:root {
  --bg: #0e1116;
  --bg-elev: #161b22;
  --bg-input: #0d1117;
  --bg-active: #21262d;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #c9d1d9;
  --text-subtle: #9198a1;
  --progress-fill: var(--text);
  --progress-track: var(--bg-active);
  --accent: #238636;
  --accent-fill: #238636;
  --accent-bg: #1f6feb33;
  --danger: #f85149;
  --danger-fill: #bd2c2c;
  --link: #4493f8;
  --shadow: rgba(0, 0, 0, 0.4);
  /* One height for every button, input and select; one header height
     the sticky drawer, rail and full-height chat measure against. */
  --control-h: 2.25rem;
  --control-gap: 0.5rem;
  --panel-divider-width: 8px;
  --control-pad: 0.4rem 0.9rem;
  --radius: 8px;
  --topbar-h: 3.5rem;
  --bottom-nav-h: 4rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --scrollbar: rgba(255, 255, 255, 0.18);
  --scrollbar-hover: rgba(255, 255, 255, 0.32);
  /* Native parts — scrollbars, form controls — follow the theme. */
  color-scheme: dark;
}
:root[data-theme='light'] {
  --bg: #ffffff;
  --bg-elev: #f6f8fa;
  --bg-input: #ffffff;
  --bg-active: #eaeef2;
  --border: #d0d7de;
  --text: #1f2328;
  --text-muted: #424a53;
  --text-subtle: #59636e;
  --danger: #cf222e;
  --link: #0969da;
  --accent: #1a7f37;
  --accent-fill: #1a7f37;
  --accent-bg: #ddf4ff;
  --shadow: rgba(0, 0, 0, 0.08);
  --scrollbar: rgba(0, 0, 0, 0.2);
  --scrollbar-hover: rgba(0, 0, 0, 0.36);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #ffffff;
    --bg-elev: #f6f8fa;
    --bg-input: #ffffff;
    --bg-active: #eaeef2;
    --border: #d0d7de;
    --text: #1f2328;
    --text-muted: #424a53;
    --text-subtle: #59636e;
    --danger: #cf222e;
    --link: #0969da;
    --accent: #1a7f37;
    --accent-fill: #1a7f37;
    --accent-bg: #ddf4ff;
    --shadow: rgba(0, 0, 0, 0.08);
    --scrollbar: rgba(0, 0, 0, 0.2);
    --scrollbar-hover: rgba(0, 0, 0, 0.36);
    color-scheme: light;
  }
}
* {
  box-sizing: border-box;
  scrollbar-color: var(--scrollbar) transparent;
}
/* Thin scrollbars in the theme's colours, as the messengers draw them
   (WebKit and Safari read these; the others `scrollbar-color`). */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--scrollbar) padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover) padding-box;
}
a {
  color: var(--link);
}
body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
}
/* Visually hidden, still announced by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.icon {
  flex: none;
}
.topbar {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding: 0 1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}
.topbar h1 {
  font-size: 1rem;
  margin: 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Header controls: one height, one outline style, icon + label; the
   label folds away on phones (the aria-label stays). */
.header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--control-h);
  min-height: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
}
.header-btn:hover {
  background: var(--bg-active);
}
.language-switcher {
  position: relative;
  padding: 0 0.25rem 0 0.75rem;
}
.language-switcher:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.language-switcher select {
  width: auto;
  min-height: 0;
  height: calc(var(--control-h) - 2px);
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  cursor: pointer;
}
.language-switcher select:focus-visible {
  outline: none;
}
@media (max-width: 640px) {
  .topbar {
    padding: 0 0.5rem 0 0.75rem;
    gap: 0.35rem;
  }
  .header-btn {
    width: var(--control-h);
    padding: 0.25rem;
  }
  .btn-label {
    display: none;
  }
  /* The select still opens natively; it covers the globe icon. */
  .language-switcher select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.topbar nav /* Action containers inherit a nonzero gap even when a new toolbar omits it.
   Named layouts can choose a denser spacing; no margins fight their alignment. */
:where(*:has(> :is(button, a.button, [role='button']) ~ :is(button, a.button, [role='button']))) {
  gap: var(--control-gap);
}
/* Inline actions in prose/table cells do not participate in flex/grid gaps. */
:where(p, td, dd, .meta) > :is(button, a.button) + :is(button, a.button) {
  margin-inline-start: var(--control-gap);
}
button {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
}
.topbar nav button.active,
.topbar nav button:hover,
.topbar nav button:focus-visible {
  background: var(--bg-active);
  border-color: var(--border);
  outline: none;
}
main {
  /* --tutorial-dock-space: room for a tutorial card docked below. */
  padding: 1rem 1.25rem calc(2rem + var(--tutorial-dock-space, 0px));
  max-width: 1100px;
  margin: 0 auto;
}
main:focus {
  outline: none;
}
h2,
h3 {
  margin: 0.6rem 0 0.4rem;
  line-height: 1.25;
}
h2 {
  font-size: 1.3rem;
}
h3 {
  font-size: 1.05rem;
}
h4 {
  margin: 0.5rem 0 0.3rem;
  font-size: 0.95rem;
}
/* The chat fills the space between the header and the bottom bar (or
   the screen's edge), edge to edge, like the messengers it imitates. */
main[data-view='chat']:has(> .chat-shell) {
  display: flex;
  flex-direction: column;
  max-width: none;
  height: calc(100dvh - var(--topbar-h));
  padding: 0;
}
.app-shell-compact main[data-view='chat']:has(> .chat-shell) {
  height: calc(
    100dvh - var(--topbar-h) - var(--bottom-nav-h) - var(--safe-bottom)
  );
}
main[data-view='chat'] > .web-mode-banner {
  margin: 0.75rem;
}
/* Chat screen (issue #31 / PR #34). The default skin follows t3.codes:
   a quiet sidebar with date sections, a centred message column where
   the other side's text sits without a bubble, and a floating glass
   composer. `data-skin` on <html> swaps in Telegram, WhatsApp or
   Signal colours and bubble shapes; `data-theme` picks light or dark. */
:root {
  --chat-bg: var(--bg);
  --chat-sidebar: var(--bg-elev);
  /* Every message is a bubble on a raised surface, as in every messenger
     (Telegram, WhatsApp, Signal, Element): the other side's in a neutral
     one, the user's own tinted with the accent. */
  --bubble-in: #1c222b;
  --bubble-in-text: var(--text);
  --bubble-in-pad: 0.45rem 0.75rem;
  --bubble-in-edge: rgb(255 255 255 / 6%);
  --bubble-out: #1c3a28;
  --bubble-out-text: var(--text);
  --bubble-shadow: 0 1px 2px rgb(0 0 0 / 35%);
  --bubble-radius: 14px;
  --bubble-tail: 14px;
  --chat-accent: var(--accent);
  --chat-accent-fill: var(--accent-fill);
  --chat-column: 46rem;
  --chat-header-h: 3.75rem;
  --chat-font-size: 0.95rem;
}
:root[data-theme='light'] {
  --chat-bg: #eef1f4;
  --bubble-in: #ffffff;
  --bubble-in-edge: rgb(31 35 40 / 6%);
  --bubble-out: #d8f3d4;
  --bubble-shadow: 0 1px 2px rgb(16 35 47 / 12%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --chat-bg: #eef1f4;
    --bubble-in: #ffffff;
    --bubble-in-edge: rgb(31 35 40 / 6%);
    --bubble-out: #d8f3d4;
    --bubble-shadow: 0 1px 2px rgb(16 35 47 / 12%);
  }
}
.chat-shell {
  display: grid;
  grid-template-columns:
    minmax(220px, min(var(--chat-sidebar-width, 320px), 50%))
    minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--chat-bg);
}
.chat-sidebar {
  position: relative;
  /* Keep the outside handle above the conversation's container layer. */
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--chat-sidebar);
  border-right: 1px solid var(--border);
}
.chat-sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
}
.chat-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.chat-sidebar-title {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  line-height: 1;
  font-weight: 600;
}
.chat-sidebar-top > .icon-btn,
.chat-sidebar-top .new-chat-btn {
  width: var(--control-h);
  height: var(--control-h);
  flex: none;
  padding: 0;
}
.chat-sidebar-top .chat-sort {
  height: var(--control-h);
  padding-block: 0;
  align-self: center;
}
.chat-sort {
  width: auto;
  max-width: 55%;
  padding: 0.2rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
}
.chat-sort:hover,
.chat-sort:focus-visible {
  border-color: var(--border);
  color: var(--text);
}
.chat-search {
  border-radius: 8px;
}
.chat-filters {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-filter {
  flex: 0 0 auto;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-subtle);
  font-size: 0.8rem;
}
.chat-filter.active {
  background: var(--bg-elev);
  color: inherit;
  font-weight: 600;
}
/* A folder's unread chats (R-Y103). */
.chat-filter-unread {
  display: inline-block;
  min-width: 1.1rem;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.1rem;
  text-align: center;
}
.chat-list-more,
.chat-older {
  padding: 0.5rem;
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.8rem;
}
.chat-older {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.chat-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 0.375rem 0.6rem;
}
.chat-list-window {
  overflow-anchor: none;
}
.chat-list-slot {
  display: flow-root;
}
.chat-list-slot[data-list-kind='chat'] {
  padding-block-end: 0.25rem;
}
.chat-list-slot > .chat-item {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.chat-item-pending {
  display: inline-flex;
  vertical-align: middle;
  margin-inline-end: 0.25rem;
}
.chat-account-empty {
  max-width: 34rem;
  margin: 2rem auto;
}
.chat-group h3,
.chat-list-heading {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  margin: 0.8rem 0.375rem 0.3rem;
}
.chat-list-heading {
  margin: 0;
  padding: 0.8rem 0.375rem 0.3rem;
}
/* A search across Telegram (R-Y107): the sections under the chats, the
   count of messages found, the words found in the accent colour. */
.global-group h3 {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.global-count {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.global-message mark {
  background: none;
  color: var(--chat-accent);
  font-weight: 600;
}
.chat-list-grow {
  min-height: 1px;
}

.chat-list > .chat-item + .chat-item {
  margin-block-start: 0.25rem;
}
.chat-item {
  /* Rows out of sight are not laid out or painted (R-Y71). */
  content-visibility: auto;
  contain-intrinsic-size: auto 3.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 3.5rem;
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: var(--radius);
  padding: 0.45rem 0.375rem;
  cursor: pointer;
}
.chat-item:hover,
.chat-item.active {
  background: var(--bg-active);
}
.chat-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.chat-item-top,
.chat-item-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.chat-item-name,
.chat-item-preview {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-item-name {
  font-weight: 500;
}
.chat-item-time,
.chat-item-source {
  flex: none;
  font-size: 0.72rem;
  color: var(--text-subtle);
}
.chat-item-preview {
  font-size: 0.82rem;
  color: var(--text-subtle);
}
.avatar {
  --avatar-hue: 260;
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  flex: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: hsl(var(--avatar-hue) 55% 48%);
}
.avatar.small {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.65rem;
}
.chat-main {
  container: conversation / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.chat-header-slot {
  flex-shrink: 0;
  min-height: var(--chat-header-h);
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--chat-header-h);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--chat-sidebar);
}
.chat-header-title {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.chat-header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--control-gap);
}
.chat-header-title > .meta,
.chat-title-row > strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
@container conversation (max-width: 650px) {
  .chat-main:has(> .person-panel) > .chat-composer .chat-composer-row {
    flex-wrap: wrap;
  }
  .chat-main:has(> .person-panel) > .chat-composer textarea {
    flex-basis: 100%;
    order: -1;
  }
  .chat-header-slot,
  .chat-header,
  .person-panel {
    --chat-header-h: 6.5rem;
  }
  .chat-header:not(.selection-top) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--control-gap);
  }
  .chat-header-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .chat-header-actions .chat-automation-label {
    display: none;
  }
  .chat-header-actions .chat-menu-toggle {
    padding-inline: 0.5rem;
  }
}
.chat-header {
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .chat-header:not(.selection-top) {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .chat-embedded .chat-header:not(.selection-top) {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.typing {
  color: var(--chat-accent);
  font-style: italic;
}
.chat-menu {
  position: relative;
}
.chat-about.active,
.chat-find-open.active {
  color: var(--chat-accent);
}
/* Search in the chat (R-Y98): a bar under the header, as Telegram's. */
.chat-find {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-muted);
}
.chat-find-input {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.chat-find-count {
  flex: none;
  min-width: 4.5rem;
  font-size: 0.8rem;
  text-align: right;
  white-space: nowrap;
}
.chat-find .icon-btn:disabled {
  opacity: 0.35;
}
/* The message found, lit up a moment as Telegram does. */
.is-found .bubble,
.is-found.bubble {
  animation: chat-found 1.6s ease-out;
}
@keyframes chat-found {
  0%,
  40% {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, var(--chat-accent) 55%, transparent);
  }
  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-found .bubble,
  .is-found.bubble {
    animation: none;
    outline: 2px solid var(--chat-accent);
  }
}
/* What the conversation tells about the person (R-Y50): beside the
   messages, under the header, as Telegram's profile column. */
.person-panel {
  position: absolute;
  top: var(--chat-header-h);
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: min(22rem, 100%);
  border-left: 1px solid var(--border);
  background: var(--chat-sidebar);
  box-shadow: -4px 0 16px rgb(0 0 0 / 12%);
  padding-left: var(--panel-divider-width);
}
/* Wide enough: the messages make room for it instead of going under. */
@media (min-width: 900px) {
  .chat-main:has(> .person-panel)
    > :not(.chat-header, .chat-header-slot, .person-panel) {
    margin-right: min(22rem, 100%);
  }
  .chat-main:has(> .person-panel) > .chat-composer {
    left: calc((100% - 22rem) / 2);
    width: min(var(--chat-column), calc(100% - 24rem));
  }
}
.person-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
}
.person-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--control-gap);
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 1rem 1rem;
  overflow-wrap: anywhere;
}
/* At the panel's foot, as Telegram's profile ends with its actions. */
.person-panel-foot {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
}
.person-open-telegram {
  display: block;
  text-align: center;
}
.person-section h3 {
  margin: 1rem 0 0.4rem;
  color: var(--chat-accent);
  font-size: 0.85rem;
  font-weight: 600;
}
.person-list,
.person-asked {
  margin: 0;
  padding-left: 1.1rem;
}
.person-list {
  padding-left: 0;
  list-style: none;
}
.person-list li,
.person-asked li {
  margin: 0.3rem 0;
}
.person-question {
  font-weight: 500;
}
.person-answer {
  margin-top: 0.1rem;
  white-space: pre-line;
}
.person-count {
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 0.6rem;
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: 0.75rem;
}
.person-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.4rem;
  border-radius: 0.6rem;
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: 0.75rem;
}
.person-badge svg {
  width: 0.8rem;
  height: 0.8rem;
}
.person-badge-confirmed {
  color: var(--chat-accent);
}
.person-badge-missing {
  text-decoration: line-through;
}
.chat-menu-toggle {
  gap: 0.4rem;
  border-radius: 8px;
}
.chat-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 20;
  width: min(26rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  box-shadow: 0 10px 30px var(--shadow);
}
.chat-menu-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
.chat-menu-item:last-child {
  border-bottom: 0;
}
/* Name over its mode, then "Test" and "Run" side by side. */
.chat-menu-name {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.9rem;
}
.chat-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.5rem auto 0;
  width: min(var(--chat-column), calc(100% - 2rem));
  padding: 0.25rem 0.25rem 0.25rem 0.8rem;
  border-radius: 8px;
  background: var(--accent-bg);
  font-size: 0.85rem;
}
.chat-notice.failed {
  background: #f8514933;
}
/* The next chat an automation fits, and its autopilot (R-Y86, R-Y87). */
.chat-notice.next-chat,
.chat-notice.autopilot-bar {
  flex-wrap: wrap;
}
.chat-notice .row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.chat-notice .row button {
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
}
.autopilot-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
}
.autopilot-bar.on {
  border: 1px solid var(--link);
}
.autopilot-monitor {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  cursor: pointer;
}
/* "Copied" floats over the chat like Telegram's toast and goes by
   itself; the messages do not move for it. */
.chat-notice.copied,
.chat-notice.link-copied {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  pointer-events: none;
  animation: toast-in 0.15s ease-out;
}
.chat-notice.copied .icon-btn,
.chat-notice.link-copied .icon-btn {
  display: none;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 0.5rem);
  }
}
.chat-notice .icon-btn {
  flex: none;
  width: 2rem;
  min-height: 2rem;
}
.chat-notice .link {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.chat-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  /* History anchoring is handled once by chat-follow, including in Safari. */
  overflow-anchor: none;
  /* Always reserve the check gutter, so selecting never moves bubbles. */
  padding: 1rem 2.75rem max(1rem, var(--chat-composer-space, 0px));
  scroll-padding-bottom: max(1rem, var(--chat-composer-space, 0px));
}

.feedback-view {
  max-width: 76rem;
  margin-inline: auto;
  padding: 1rem;
}
.feedback-filters,
.feedback-card > .row,
.feedback-reactions {
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.feedback-filters > label {
  flex: 1 1 10rem;
  min-width: 0;
}
.feedback-card {
  min-width: 0;
}
.feedback-card time {
  margin-inline-start: auto;
}
.feedback-rank {
  color: var(--muted);
}
.feedback-text,
.reaction-evidence p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.feedback-people {
  display: grid;
  gap: 0.5rem;
  margin-block: 1rem;
}
.feedback-person {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}
.feedback-person-name {
  text-align: start;
  overflow-wrap: anywhere;
}
.feedback-emoji {
  font-size: 1.5rem;
}
.reaction-evidence {
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.feedback-empty {
  text-align: center;
  padding: 2rem;
}
@media (max-width: 640px) {
  .feedback-person {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
  .feedback-person > :last-child {
    grid-column: 2;
  }
}
.chat-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(var(--chat-column), 100%);
  margin: 0 auto;
  font-size: var(--chat-font-size);
}
.chat-scroll.is-empty {
  display: flex;
  flex-direction: column;
}
.chat-scroll.is-empty > .chat-column {
  flex: 1;
  gap: 0;
}
.chat-empty-region {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: min-content;
  padding-block: 1rem;
}
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  max-width: 22rem;
  padding: 1rem;
  text-align: center;
  text-wrap: balance;
}
.chat-empty-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--bg-elev);
  color: var(--text-muted);
}
.chat-empty-title {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.chat-empty-hint {
  margin: 0;
  color: var(--text-subtle);
  font-size: 0.875rem;
  line-height: 1.5;
}
.chat-wall:has(
    .chat-wall-layer[data-wall='image'],
    .chat-wall-layer[data-wall='pattern']
  )
  .chat-empty {
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 85%;
  min-width: 0;
  padding: var(--bubble-in-pad);
  box-shadow:
    0 0 0 1px var(--bubble-in-edge, transparent),
    var(--bubble-shadow, 0 0 transparent);
  border-radius: var(--bubble-radius);
  background: var(--bubble-in);
  color: var(--bubble-in-text);
  align-self: flex-start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bubble.out {
  align-self: flex-end;
  padding: 0.45rem 0.75rem;
  box-shadow: var(--bubble-shadow, none);
  background: var(--bubble-out);
  color: var(--bubble-out-text);
  border-bottom-right-radius: calc(
    var(--bubble-radius) - var(--bubble-tail) + 4px
  );
}
.bubble.in {
  border-bottom-left-radius: calc(
    var(--bubble-radius) - var(--bubble-tail) + 4px
  );
}
.bubble-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--chat-accent);
}
.bubble-time {
  align-self: flex-end;
  font-size: 0.7rem;
  opacity: 0.8;
  white-space: nowrap;
}
/* The time sits in the last line of the text when there is room, as in
   Telegram: an invisible copy of it ends the text and takes its place,
   and the time itself is drawn over that place. */
.bubble-time-spacer {
  display: inline-flex;
  visibility: hidden;
  margin-left: 0.6rem;
  font-size: 0.7rem;
  white-space: nowrap;
  vertical-align: baseline;
  pointer-events: none;
  align-items: center;
  gap: 0.3rem;
}
.bubble.inline-time > .bubble-time {
  position: absolute;
  right: 0.75rem;
  bottom: 0.3rem;
}
:root[data-skin]:not([data-skin='t3']) .bubble:not(.out) {
  box-shadow: 0 1px 2px var(--shadow);
}
:root[data-skin='signal'] .bubble.out .bubble-time {
  opacity: 1;
}
/* Delivery: the clock, ✓ and ✓✓ sit after the time, as in messengers. */
.bubble-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.bubble-status {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 1;
}
.bubble-status-spacer {
  display: inline-block;
  width: 14px;
  flex: none;
}
.chat-mark[aria-busy='true'] {
  position: relative;
}
.chat-mark[aria-busy='true'] > .icon {
  visibility: hidden;
}
.chat-mark[aria-busy='true']::before {
  position: absolute;
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  left: calc(50% - 0.5rem);
  top: calc(50% - 0.5rem);
}
.bubble-status.read {
  color: var(--chat-accent);
}
:root[data-skin] .bubble.out .bubble-status.read {
  color: inherit;
  opacity: 1;
}
.bubble-edited {
  font-style: italic;
}
.bubble.pending {
  opacity: 0.85;
}
.bubble.failed {
  outline: 1px solid var(--danger);
}
.bubble-status.failed {
  color: var(--danger);
}
.bubble-failed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  white-space: normal;
}
.bubble-failed button,
.bubble-waiting button {
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
}
/* The clock shows only when a send takes longer than a second. */
.bubble-status.sending {
  animation: bubble-clock-in 0s linear 1s both;
}
@keyframes bubble-clock-in {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}
.bubble-waiting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  white-space: normal;
  opacity: 0.85;
}
.chat-item-unread {
  flex: none;
  min-width: 1.25rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--chat-accent-fill);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
}
/* Marked unread: the badge with no number, as in Telegram (R-Y97). */
.chat-item-unread.is-marked {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0;
}
/* A muted chat's count is grey, as in Telegram (R-Y68). */
.chat-item-unread.is-muted {
  background: color-mix(in srgb, var(--text-subtle) 55%, transparent);
}
.chat-item-badges {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
}
.chat-item-mark {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--chat-accent-fill);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.chat-item-mark.is-reaction {
  background: #e5484d;
}
.chat-item-pinned {
  display: inline-flex;
  color: var(--text-subtle);
  transform: rotate(45deg);
}
.chat-item-name {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.chat-item-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-item-muted {
  display: inline-flex;
  flex: none;
  color: var(--text-subtle);
}
.chat-item-sender {
  color: var(--text);
}
.chat-item-thumb {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.3rem;
  border-radius: 3px;
  object-fit: cover;
  vertical-align: -0.2rem;
}
.archive-avatar {
  background: color-mix(in srgb, var(--text-subtle) 45%, transparent);
  color: #fff;
}
.chat-archive-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0.2rem 0.4rem;
  font-weight: 600;
}
.chat-unread-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
  color: var(--text-subtle);
  font-size: 0.75rem;
}
.chat-unread-line::before,
.chat-unread-line::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}
.chat-account-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 0.8rem;
  text-align: center;
}
.chat-failed-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-bottom: 1px solid var(--danger);
  background: var(--bg-elev);
  color: var(--danger);
  font-size: 0.8rem;
}
.chat-failed-bar span {
  flex: 1;
}
.chat-failed-bar button {
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
}
/* Telegram's round "down" button, by the column's right edge, above the
   composer; the count of what waits below sits on its top. */
/* @ and ♥ above "down" (R-Y55), Telegram's round buttons. */
.chat-marks {
  position: absolute;
  z-index: 3;
  right: max(1rem, calc((100% - var(--chat-column)) / 2 + 0.25rem));
  bottom: 7.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.chat-marks.raised {
  bottom: 10.6rem;
}
.chat-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--surface-glass-border, var(--border));
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text-muted);
  box-shadow: var(--bubble-shadow, 0 1px 3px rgb(0 0 0 / 20%));
  cursor: pointer;
}
.chat-mark:hover {
  color: var(--chat-accent);
}
.chat-mark.busy {
  opacity: 0.6;
}
.chat-down {
  position: absolute;
  z-index: 3;
  right: max(1rem, calc((100% - var(--chat-column)) / 2 + 0.25rem));
  bottom: 7.25rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--surface-glass-border, var(--border));
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text-muted);
  box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
  animation: chat-down-in 160ms ease-out;
}
.chat-down:hover {
  color: var(--text);
}
.chat-down-count {
  position: absolute;
  top: -0.45rem;
  left: 50%;
  transform: translateX(-50%);
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--chat-accent-fill);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35rem;
  text-align: center;
}
@keyframes chat-down-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-down {
    animation: none;
  }
}
.chat-composer .send[aria-busy='true'] {
  cursor: progress;
}
.draft-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: stretch;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--bubble-radius);
  background: var(--bg-elev);
}
.draft-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--control-gap);
}
.draft-card-header > .meta {
  min-width: 0;
  overflow-wrap: anywhere;
}
.draft-card-header > button {
  flex: none;
}
.draft-card .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.draft-card .meta {
  margin: 0;
}
/* Show the whole draft before it is sent; older browsers keep 4 rows. */
.draft-card textarea {
  field-sizing: content;
  min-height: 4lh;
  max-height: 50vh;
}
.draft-card a {
  color: var(--chat-accent);
}
/* A link that looks like its sibling buttons. */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  min-height: var(--control-h);
  padding: var(--control-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-active);
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
}
.chat-composer {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  width: min(var(--chat-column), calc(100% - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 1px solid var(--surface-glass-border);
  border-radius: 16px;
  box-shadow: var(--surface-glass-shadow);
}
.chat-composer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  pointer-events: none;
  /* Blur the composer surface, not an ancestor backdrop root that prevents
     its emoji/sticker/GIF and other popovers from blurring the chat. */
}
.chat-composer-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.chat-composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  min-height: 2.4rem;
  max-height: 10rem;
  border: 0;
  background: transparent;
}
.chat-composer .send {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  background: var(--accent-fill, var(--chat-accent));
}
.chat-composer .send:disabled {
  opacity: 0.4;
  cursor: default;
}
/* The formatting bar over the box while text in it is selected
   (R-Y109). */
.format-bar {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0.6rem;
  display: flex;
  gap: 0.15rem;
  padding: 0.25rem;
  border: 1px solid var(--surface-glass-border);
  border-radius: 10px;
  background: var(--bg-elev);
  box-shadow: var(--surface-glass-shadow);
  z-index: 5;
}
.format-button {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
}
.format-button:hover,
.format-button:focus-visible {
  background: var(--accent-bg);
}
.format-bold {
  font-weight: 700;
}
.format-italic {
  font-style: italic;
}
.format-underline {
  text-decoration: underline;
}
.format-strike {
  text-decoration: line-through;
}
.format-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}
/* Voice messages (R-Y108): the microphone in Send's place; held, it
   grows with the loudness, the lock above it; the box gives way to a
   red dot, the time and how to cancel. */
.voice-holder {
  position: relative;
  flex: none;
  display: inline-flex;
}
.chat-composer .voice-button {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.chat-composer .voice-button.recording {
  transform: scale(calc(1.15 + var(--voice-level, 0) * 0.5));
  transition: transform 80ms linear;
}
.voice-lock {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.35rem 0.3rem;
  border: 1px solid var(--surface-glass-border);
  border-radius: 999px;
  background: var(--surface-glass-bg);
  color: var(--text-muted);
  pointer-events: none;
}
.voice-hint {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: var(--surface-glass-bg);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--surface-glass-shadow);
  white-space: nowrap;
  font-size: 0.85rem;
}
.voice-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0 0.4rem;
}
.voice-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--danger);
  animation: voice-blink 1s ease-in-out infinite;
}
@keyframes voice-blink {
  50% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .voice-dot {
    animation: none;
  }
  .chat-composer .voice-button.recording {
    transition: none;
  }
}
.voice-time {
  font-variant-numeric: tabular-nums;
}
.voice-how {
  flex: 1;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.voice-cancel {
  margin: 0 auto;
  border: 0;
  background: transparent;
  color: var(--chat-accent, var(--accent));
  font-weight: 600;
}
.suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.suggestion-messages,
.suggestion-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}
.suggestion-words {
  align-items: center;
}
.suggestion-kind {
  margin-inline-end: 0.2rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}
/* Keep both ends of long suggestions visible, including in narrow panes. */
.suggestions .chip {
  min-width: 0;
  line-height: 2rem;
}
.middle-ellipsis {
  display: inline-grid;
  min-width: 0;
  text-align: start;
  white-space: pre;
}
.middle-ellipsis::before,
.middle-ellipsis > span {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
}
/* Full text sets the chip's natural width so resizing can expand it again. */
.middle-ellipsis::before {
  content: attr(data-full-text);
  visibility: hidden;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.8rem;
  background: var(--bg-active);
  color: inherit;
  cursor: pointer;
  font-size: 0.82rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon-btn {
  width: var(--control-h);
  padding: 0.25rem;
  border-color: transparent;
  background: transparent;
}
.chat-back {
  display: none;
}
@media (prefers-reduced-transparency: reduce) {
  .chat-composer,
  .chat-composer::before,
  .emoji-panel {
    background: var(--bg-elev);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* Narrow screens: one pane at a time, list first, back to the list
   from the conversation header. */
@media (max-width: 720px) {
  .chat-shell {
    grid-template-columns: 1fr;
  }
  .chat-sidebar {
    border-right: 0;
  }
  .chat-sidebar > .panel-divider {
    display: none;
  }
  .chat-shell[data-pane='list'] .chat-main,
  .chat-shell[data-pane='chat']:has(.chat-main) .chat-sidebar {
    display: none;
  }
  .chat-back {
    display: inline-flex;
    margin-left: -0.5rem;
  }
  .chat-header {
    padding: 0.5rem 0.75rem;
  }
  .chat-scroll {
    padding-inline: 2.25rem;
  }
}
.meta {
  font-size: 0.8rem;
  color: var(--text-subtle);
}
/* Explanations stay readable on wide screens: at most ~80 characters
   a line (WCAG 1.4.8). */
p.meta {
  max-width: 80ch;
}
input,
textarea,
select {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: var(--control-h);
  padding: 0.4rem 0.7rem;
  font: inherit;
  width: 100%;
}
textarea {
  min-height: 4.5rem;
}
/* One control height: a text field's line box is no taller than a
   select's or a button's, so fields, selects and buttons in a row
   share their top and bottom edges. */
input:not([type='checkbox'], [type='radio']),
select {
  line-height: 1.25;
}
input[type='checkbox'],
input[type='radio'] {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
input[type='file'] {
  padding: 0.3rem;
}
input[type='color'] {
  width: 3rem;
  padding: 0.15rem;
}
/* A checkbox or radio with its text: one line, a comfortable target. */
label:has(> input[type='checkbox']),
label:has(> input[type='radio']) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.75rem;
  cursor: pointer;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--control-h);
  background: var(--bg-active);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--control-pad);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
}
button:hover:not(:disabled) {
  border-color: var(--text-subtle);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button.primary {
  background: var(--accent-fill, var(--accent));
  color: white;
  border: 1px solid transparent;
  font-weight: 600;
}
button.primary:hover:not(:disabled) {
  border-color: transparent;
  filter: brightness(1.1);
}
/* A button in a column keeps its own width instead of the column's. */
.col > button {
  align-self: flex-start;
}
.row {
  display: flex;
  gap: var(--control-gap);
  align-items: center;
  flex-wrap: wrap;
}
/* Fields in a row share it and wrap on narrow screens. */
.row > :where(input:not([type='checkbox'], [type='radio']), select) {
  flex: 1 1 12rem;
  width: auto;
  min-width: 0;
}
.row > .grow {
  flex: 1 1 16rem;
}
.row > .narrow {
  /* Wide enough for its placeholder; wraps instead of truncating it. */
  flex: 0 0 11rem;
}
@media (max-width: 640px) {
  /* Phones stack the fields full width and keep the actions together. */
  .row > .narrow {
    flex-basis: 100%;
  }
}
.col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Flex columns do not collapse margins: the gap spaces the children, so
   text keeps only the extra room above a sub-heading. */
.col > p,
.col > h2 {
  margin-block: 0;
}
.col > :is(h3, h4) {
  margin-bottom: 0;
}
table {
  width: 100%;
  border-collapse: collapse;
}
@media (max-width: 720px) {
  /* Wide tables scroll inside themselves, not the whole page. */
  table {
    display: block;
    overflow-x: auto;
  }
  /* Two-column key/value tables always fit: keep them full width so
     values line up on the right edge. */
  table.kv-table {
    display: table;
    max-width: none;
  }
  /* Commands and code wrap instead of hiding their ends. */
  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}
td,
th {
  border-bottom: 1px solid var(--border);
  padding: 0.4rem;
  text-align: left;
  /* Cells of different sizes in a row share the first text line. */
  vertical-align: baseline;
}
/* Network checkboxes: more space between choices than inside one, so
   each box reads as part of its own label. */
.source-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.source-checks > legend {
  float: left;
  width: 100%;
  margin-bottom: 0.25rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.source-checks > label {
  gap: 0.4rem;
}
/* Phones: each row of a .stack-table becomes a small card: the
   [data-title] cell on top, every other cell a "label  value" line taken
   from its data-label, so no column is cut off. */
@media (max-width: 640px) {
  .stack-table,
  .stack-table tbody {
    display: block;
    overflow: visible;
  }
  .stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .stack-table tr {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
  }
  .stack-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    gap: 1rem;
    padding: 0.1rem 0;
    border: 0;
    text-align: right;
  }
  .stack-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
    text-align: left;
  }
  .stack-table td[data-title] {
    order: -1;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .stack-table td[data-title]::before {
    content: none;
  }
}
/* Checkboxes in table cells line up with the cell text. */
td > input[type='checkbox'] {
  vertical-align: middle;
}
/* Key/value tables: keep each value near its key, numbers aligned. */
.kv-table {
  max-width: 32rem;
}
.kv-table th {
  font-weight: 500;
  color: var(--text-muted);
}
.kv-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.graph {
  border: 1px dashed var(--border);
  border-radius: 8px;
  min-height: 320px;
  padding: 0.5rem;
  position: relative;
}
.node {
  display: inline-block;
  background: var(--bg-active);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  margin: 0.2rem;
}
.operator .card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  background: var(--bg-elev);
}
.operator .big {
  font-size: 1.4rem;
  margin: 0.7rem 0 1rem;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  background: var(--bg-elev);
}
.card > :first-child {
  margin-top: 0;
}
.card > :last-child {
  margin-bottom: 0;
}
pre:empty {
  display: none;
}
pre {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem;
  overflow-x: auto;
}

.mode-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-right: auto;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mode-badge.online {
  background: #033a16;
  color: #6dd58c;
  border-color: #1a532e;
}
.mode-badge.offline {
  background: #3a1a03;
  color: #f0a36c;
  border-color: #5a2c10;
}
.mode-badge.reconnecting {
  background: #352b05;
  color: #ffdf6b;
  border-color: #746017;
}
:root[data-theme='light'] .mode-badge.reconnecting {
  background: #fff8c5;
  color: #705000;
  border-color: #b68d16;
}
:root[data-theme='light'] .mode-badge.online {
  background: #dafbe1;
  color: #1a7f37;
  border-color: #aceebb;
}
:root[data-theme='light'] .mode-badge.offline {
  background: #fff8c5;
  color: #9a6700;
  border-color: #ffd33d;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-fill, var(--accent));
  color: white;
  padding: 0.5rem 1rem;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;
}

/* Connection guides (issue #10, R-M1..R-M8): the empty state of a
   screen, aligned with the page's own text rather than indented. */
.connection-guide {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
  max-width: 46rem;
}
.connection-guide > h2 {
  margin: 0;
  font-size: 1.1rem;
}
.connection-guide > p {
  margin: 0;
  color: var(--text-muted);
}
.connection-guide > p:empty {
  display: none;
}
.local-server-help > :is(h4, p) {
  margin: 0;
}
.local-server-help {
  border-radius: var(--radius);
}

/* Connections (issue #25): one card per provider in a grid that fills
   wide screens, each with its state as a pill. */
.connections-list-header > p {
  margin: 0 0 0.75rem;
}
.connections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 0.75rem;
}
.connections-grid > .card {
  margin: 0;
}
/* Cards in a row share one height; the two ways to connect sit at the
   foot of each, full width and stacked, so they line up across a row
   whatever the length of the text above. */
.connections-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.connections-card > p {
  margin: 0;
}
.connections-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.connections-card-actions > p {
  margin: 0;
}
.connections-card-actions > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}
.connections-card > p.connections-card-facts {
  flex: none;
  font-size: 0.8rem;
}
.connections-card-actions > button:not(.primary) {
  background: transparent;
}
.connections-detail-auto {
  margin: 0.5rem 0 0;
  border-left: 4px solid var(--accent);
}
.connections-detail-auto > .provider-auto-import > p {
  margin: 0.25rem 0;
}
/* Provider page: Back on its own line, then the name with its state,
   then "Import with browser" | "Enter manually" as tabs. */
.connections-detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.connections-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
}
.connections-detail > .connections-detail-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.connections-detail-header > h2 {
  margin: 0;
}
/* Two equal tabs side by side at every width; a long label wraps
   inside its tab instead of pushing the other one to a new line. */
.connections-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 520px) {
  .connections-tabs {
    grid-template-columns: 1fr 1fr;
  }
}
.connections-tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--text-muted);
}
.connections-tab[aria-selected='true'] {
  color: var(--text);
  border-color: var(--border);
  border-bottom: 2px solid var(--accent);
  background: var(--bg-elev);
}
.connections-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.connections-panel > .card {
  margin: 0;
}
.connections-manual-intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.connections-manual-intro > p,
.connections-detail-steps {
  margin: 0;
}
.connections-detail-docs {
  align-self: flex-start;
}
/* The tab already names the route: no second "Import with browser". */
.connections-detail-auto .provider-auto-import-header {
  display: none;
}
.connections-panel p:not(.meta) {
  margin: 0;
  max-width: 80ch;
  font-size: 0.95rem;
}
/* Numbers sit on the panel's left edge; title and text share a column. */
.connections-detail-steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.25rem;
}
.connections-detail-step > h3 {
  margin: 0;
  font-size: 0.95rem;
}
.connections-detail-step > p {
  margin: 0.15rem 0 0;
}
.connections-detail-step::marker {
  font-weight: 600;
}
/* Credentials, archive and probe: one gap between blocks, none doubled
   by margins, and every row of controls spaced alike. */
.connections-detail-controls {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.connections-detail-controls > * {
  margin: 0;
}
.connections-detail-controls .col > h4 {
  margin: 0;
}
.connections-detail-controls > header {
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.connections-detail-controls > header > h3 {
  margin: 0;
}
/* "Recommended" marks the easiest route: on a primary button it reads
   as a light chip inside it, elsewhere as an accent pill. */
.recommended-tag {
  flex: none;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  background: var(--accent-bg);
}
button.primary .recommended-tag {
  color: inherit;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.provider-auto-import-header,
.sign-ins-header {
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.provider-auto-import-header > h4,
.sign-ins-header > h3 {
  margin: 0;
}
.tg-login {
  margin: 0.5rem 0;
  border-left: 4px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tg-login-head > h3 {
  margin: 0 0 0.15rem;
}
.tg-login .provider-credential-row {
  gap: 0.2rem;
}
.tg-login-done {
  border-left-color: var(--accent);
}

.tg-sessions {
  margin: 0.5rem 0;
  border-left: 4px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tg-sessions-head {
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
}
.tg-sessions-head > h3 {
  margin: 0;
}
.tg-session-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tg-session-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tg-session-group-head {
  align-items: center;
  gap: 0.4rem 0.6rem;
  flex-wrap: wrap;
}
.tg-session-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.5rem;
  font-size: 0.75rem;
}
/* A confirmed-credential check mark (the words are in its tooltip). Shared
   by every place that shows a verified credential. */
.verified-mark {
  display: inline-flex;
  align-items: center;
  color: var(--ok, var(--accent));
  cursor: help;
}
.verified-mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.verified-mark .icon {
  stroke-width: 2.5;
}

/* A styled tooltip that actually shows up — the native `title` is slow and
   easy to miss. Any element with `data-tooltip` gets a chip on hover or
   keyboard focus; it sits above every overlay (z-index > the tutorial's
   2000/2001). Keep an `aria-label` alongside for screen readers. */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--shadow);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
  z-index: 3000;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after {
    transition: none;
  }
}
.tg-session-connected {
  color: var(--ok, var(--accent));
  font-weight: 600;
  white-space: nowrap;
}
.tg-session-connected::before {
  content: '✓ ';
}
/* "+N more" / "Show less": a quiet inline toggle, not a chunky button. */
.tg-session-more {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
}
.tg-session-more:hover {
  color: var(--text);
}
.tg-session-where-list {
  list-style: none;
  margin: 0.1rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.tg-session-where-item {
  overflow-wrap: anywhere;
}
.tg-session-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tg-session-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.tg-session-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tg-session-where {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}
.tg-session-use {
  flex: none;
}
@media (max-width: 520px) {
  .tg-session-entry {
    flex-direction: column;
    align-items: stretch;
  }
}

.sign-ins {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  border-left: 4px solid var(--accent);
}
.sign-ins > p {
  margin: 0;
}
.sign-ins-browsers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.5rem;
}
.sign-ins-browser {
  display: flex;
}
/* Beats the global checkbox-label rule (inline-flex, centred): each
   row fills its grid cell, rows in a line are equally tall, and the
   box sits on the first line of text. */
.sign-ins-browser > label.sign-ins-browser-row {
  display: flex;
  flex: 1;
  width: 100%;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.sign-ins-browser[data-state='unavailable'] > label {
  cursor: default;
  opacity: 0.75;
}
.sign-ins-browser input {
  margin-top: 0.2rem;
  flex: none;
}
.sign-ins-browser-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.sign-ins-browser-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.sign-ins-default {
  border-radius: 999px;
  padding: 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-active);
}
.sign-ins-browser-text > .meta {
  overflow-wrap: anywhere;
}
.sign-ins-access {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.sign-ins-access > p,
.sign-ins-result > p {
  margin: 0;
}
.connections-card-header {
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.connections-card-header > h3 {
  margin: 0;
  min-width: 0;
}
.connections-state {
  flex: none;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-active);
}
.connections-state-connected {
  color: var(--accent);
  background: var(--accent-bg);
}
.connections-state-action-required {
  color: var(--danger);
}
.local-server-help {
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--text);
}
.local-server-help-opt pre {
  margin: 0.25rem 0;
  padding: 0.5rem;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.85rem;
}

/* Browser-only mode notice (issue #37); reuses .local-server-help. */
.web-mode-banner {
  border-style: solid;
  border-left: 4px solid var(--accent);
  margin: 0 0 1rem;
}
.web-mode-banner > h2 {
  margin: 0;
  font-size: 1.1rem;
}
.web-mode-banner p {
  margin: 0;
}

/* Tutorial overlay (issue #10, R-M9..R-M12).

   Two layouts share one card:
   - spotlight: the target is lit by a ring whose huge box-shadow dims
     everything else; the card sits beside the target with an arrow
     (side chosen in tutorial-placement.js) and the page stays usable,
     so the user can click the very control the step describes;
   - centred: no target on screen, so a dimmed modal card.
   The ring is tied to the target with CSS anchor positioning where
   supported; the card is placed in the frame the target scrolls in
   (tutorial-follow.js), so both move with it while anything scrolls. */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.tutorial-overlay-centered {
  background: rgba(0, 0, 0, 0.55);
}
.tutorial-overlay-waiting {
  background: transparent;
  pointer-events: none;
}
.tutorial-overlay .tutorial-step {
  position: fixed;
  box-sizing: border-box;
  width: min(23rem, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  margin: 0;
  overflow: visible;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 1.1rem 1.25rem 1rem;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  outline: none;
  animation: tutorial-card-in 160ms ease-out;
}
/* The card takes focus so screen readers announce it; it is not a
   control itself, so no focus ring (its buttons keep theirs). */
.tutorial-overlay .tutorial-step:focus {
  outline: none;
}
@keyframes tutorial-card-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tutorial-overlay .tutorial-step h2 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  line-height: 1.25;
}
.tutorial-overlay .tutorial-step .tutorial-progress {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 0.3rem;
}
.tutorial-overlay .tutorial-step .tutorial-body {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.9rem;
}
.tutorial-overlay .tutorial-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
  overflow: visible;
}
.tutorial-overlay .tutorial-examples .meta {
  font-size: 0.85rem;
  opacity: 0.8;
}
.tutorial-overlay .tutorial-brands {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tutorial-overlay .tutorial-brands li {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-active);
  overflow: visible;
}
.tutorial-overlay .tutorial-step .tutorial-actions {
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
}
.tutorial-overlay .tutorial-step .tutorial-actions button {
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
}
/* "Turn off" is the least likely choice: keep it quiet and push it to
   the opposite edge from the primary "Next". */
.tutorial-overlay .tutorial-step .tutorial-actions .tutorial-off {
  margin-right: auto;
  padding-left: 0;
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  opacity: 0.8;
}

/* Spotlight (issue #25 R-N9, R-N10). The layer sits at the top of the
   document and scrolls with it: a card beside a target on the page is
   positioned in it (position: absolute) and moves with the page in the
   same frame; cards and rings fixed to the screen ignore it. */
.tutorial-overlay-spotlight {
  position: absolute;
  bottom: auto;
  height: 0;
  background: transparent;
  /* Let pointer events fall through the overlay to the spotlighted
     control. The dialog card restores its own pointer behaviour below.
     Without this, the fixed-position overlay would swallow taps on the
     very nav button the spotlight is asking the user to tap. */
  pointer-events: none;
}
.tutorial-overlay-spotlight .tutorial-step {
  z-index: 1;
  pointer-events: auto;
}
/* The arrow: a rotated square on the card edge that faces the target,
   offset along that edge by JS. */
.tutorial-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  transform: rotate(45deg);
  border-radius: 2px;
  overflow: visible;
}
.tutorial-step[data-side='right'] .tutorial-arrow {
  left: -8px;
  border-top-color: transparent;
  border-right-color: transparent;
}
.tutorial-step[data-side='left'] .tutorial-arrow {
  right: -8px;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.tutorial-step[data-side='bottom'] .tutorial-arrow {
  top: -8px;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.tutorial-step[data-side='top'] .tutorial-arrow {
  bottom: -8px;
  border-top-color: transparent;
  border-left-color: transparent;
}
[data-tutorial-anchor] {
  anchor-name: --tutorial-target;
}
/* Anchored ring (a target in the navigation): the browser keeps it on
   the control while the nav drawer scrolls, with no frame of delay. It
   hides while the control is scrolled out of view. */
.tutorial-overlay-spotlight .tutorial-spotlight-anchored {
  position: fixed;
  position-anchor: --tutorial-target;
  /* Just outside the target (inside the card's 12px gap), so text at
     the target's edge never touches the ring. */
  top: calc(anchor(top) - 6px);
  left: calc(anchor(left) - 6px);
  right: calc(anchor(right) - 6px);
  bottom: calc(anchor(bottom) - 6px);
  position-visibility: anchors-visible;
  pointer-events: none;
}
.tutorial-overlay-spotlight .tutorial-spotlight-frame {
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.55),
    0 0 0 3px rgba(102, 178, 255, 0.85);
}
@media (prefers-reduced-transparency: reduce) {
  .tutorial-overlay-spotlight .tutorial-spotlight-frame {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.85),
      0 0 0 3px rgba(102, 178, 255, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-overlay .tutorial-step {
    animation: none;
  }
}

/* ----- Issue #25 — mobile-first AppShell + glass tokens ------------- */

/* Glass surface token (R-N11). The `prefers-reduced-transparency`
   media query ships a solid fallback so users who opt out of
   translucency still get a fully opaque chrome. */
:root {
  --surface-glass-bg: rgba(22, 27, 34, 0.62);
  --surface-glass-border: rgba(240, 246, 252, 0.08);
  --surface-glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
:root[data-theme='light'] {
  --surface-glass-bg: rgba(255, 255, 255, 0.72);
  --surface-glass-border: rgba(15, 23, 42, 0.08);
  --surface-glass-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.glass {
  background: var(--surface-glass-bg);
  border: 1px solid var(--surface-glass-border);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--bg-elev);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* AppShell layout — flex container that swaps the primary-nav surface
   based on viewport classification (compact/medium/expanded). */
.app-shell {
  display: flex;
  width: 100%;
  min-height: calc(100dvh - var(--topbar-h));
}
.app-shell-body {
  flex: 1 1 auto;
  min-width: 0;
}
.app-shell-compact {
  flex-direction: column;
  /* Reserve space for the bottom-nav (R-N1) including safe-area inset. */
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
}
.app-shell-medium {
  flex-direction: row;
}
.app-shell-expanded {
  flex-direction: row;
}
.nav-item {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.nav-item:hover {
  background: var(--bg-active);
  color: var(--text);
}
.nav-item.active {
  background: var(--accent-bg);
  color: var(--text);
  font-weight: 600;
}
.nav-label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Bottom navigation (compact ≤ 640 px): five equal slots, 64 px tall,
   icon over label (Material 3 navigation bar); "More" opens a sheet
   with the remaining sections (R-N2). */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--bottom-nav-h) + var(--safe-bottom));
  padding: 0.25rem 0.25rem calc(0.25rem + var(--safe-bottom));
  gap: 0.125rem;
  z-index: 50;
  border-width: 1px 0 0;
}
.bottom-nav .nav-item,
.more-sheet .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  min-height: 0;
  /* Labels get the slot's full width ("Connections" in bold). */
  padding: 0.25rem 0.125rem;
  border-radius: 12px;
  font-size: 0.72rem;
}
.more-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.4);
}
.more-sheet {
  position: fixed;
  left: 0.5rem;
  right: 0.5rem;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 0.5rem);
  z-index: 55;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.25rem;
  max-height: 60dvh;
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: 16px;
  box-shadow: 0 12px 32px var(--shadow);
}
.more-sheet .nav-item {
  min-height: 4.25rem;
}
.more-scrim[hidden],
.more-sheet[hidden] {
  display: none;
}

/* Navigation rail (medium 641-1023 px): 88 px, icon over label, sticks
   under the header and scrolls on its own. */
.side-rail {
  position: sticky;
  top: var(--topbar-h);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 88px;
  height: calc(100dvh - var(--topbar-h));
  padding: 0.5rem 0.375rem;
  gap: 0.125rem;
  overflow-y: auto;
  border-width: 0 1px 0 0;
}
.side-rail .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex: none;
  min-height: 3.25rem;
  padding: 0.3rem 0.2rem;
  border-radius: 12px;
  font-size: 0.68rem;
}
/* Two short lines beat an ellipsis ("Точечная / рассылка"). */
.side-rail .nav-label {
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}

/* Permanent drawer (expanded ≥ 1024 px): 232 px, icon + label rows,
   sticks under the header and scrolls on its own. */
.permanent-drawer {
  position: sticky;
  z-index: 2;
  top: var(--topbar-h);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 232px;
  height: calc(100dvh - var(--topbar-h));
  border-width: 0 1px 0 0;
}
.permanent-drawer-items {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.125rem;
  padding: 0.5rem;
  overflow-y: auto;
}
.permanent-drawer .nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  flex: none;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: var(--radius);
  text-align: left;
  font-size: 0.9rem;
}

/* Hide the legacy header nav block (now provided by AppShell). The
   topbar still hosts the brand, mode badge, tutorial / language /
   theme controls. */
.topbar > nav[aria-label='Primary'] {
  display: none;
}

/* Topbar gets the glass token so it visually matches the new nav. */
.topbar.glass {
  position: sticky;
  top: 0;
  /* Above the tutorial spotlight overlay (z-index 2000): the header is
     persistent chrome, so the spotlight ring and its dimming must clip at
     the header's bottom edge instead of floating over the top menu. No
     tutorial step targets a header control, so nothing needs the ring up
     here. */
  z-index: 2001;
  border-width: 0 0 1px;
}
/* Automations screen (issue #31 / PR #34): list, editor, preview,
   history, people search and saved audiences. */
.automations button.link {
  background: none;
  border: 0;
  padding: 0.2rem 0.4rem;
  color: var(--accent);
  text-decoration: underline;
}
.automations .chat-notice button.link {
  color: inherit;
  text-decoration: none;
}
.automations button.danger {
  border-color: #da3633;
  color: #da3633;
}
.automations .error {
  color: #da3633;
  font-size: 0.85rem;
  margin: 0.3rem 0;
}
.automations-head h2 {
  margin: 0;
  flex: 1;
}
.automations-body {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
/* People and Audiences side by side: one height, one bottom edge. */
.automations-body + .automations-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.automations-body + .automations-body > * {
  margin: 0;
}
/* Level with the first automation's title (the list buttons' padding
   plus their border). */
.automation-pick {
  margin: 0;
  padding-top: calc(0.55rem + 1px);
}
@media (max-width: 720px) {
  .automation-pick {
    padding-top: 0;
  }
}
.automation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.automation-list li {
  display: grid;
  gap: var(--control-gap);
}
.automation-list button {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.55rem 0.75rem;
  background: var(--bg-elev);
}
.automation-list li.active button {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.automation-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.7rem;
}
.automation-editor > .error,
.automation-actions {
  grid-column: 1 / -1;
}
.automation-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-elev);
}
.automation-fieldset legend {
  padding: 0 0.3rem;
  font-weight: 600;
}
.automations .field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.automations .field-label {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.automations .check {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.automations [aria-invalid='true'] {
  border-color: #da3633;
}
.chips {
  gap: 0.3rem;
}
.automation-drafts blockquote {
  margin: 0.3rem 0 0.6rem;
  padding: 0.3rem 0.6rem;
  border-left: 3px solid var(--accent);
  white-space: pre-wrap;
}
.automation-history,
.people-results,
.automation-audiences ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 22rem;
  overflow-y: auto;
}
.people-results {
  margin-top: 0.5rem;
}
.people-results li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 0.75rem;
}
.automation-audiences li {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.automations .status {
  border-radius: 999px;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  background: var(--bg-active);
}
.automations .status.sent {
  background: var(--accent-fill, var(--accent));
  color: white;
}
.automations .status.failed {
  background: #da3633;
  color: white;
}
@media (max-width: 720px) {
  .automations-body,
  .automations-body + .automations-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Skins (issue #31 / PR #34): Settings → Appearance sets
   <html data-skin> and the resolved <html data-theme>. t3 is the
   default above; the others take the colours and bubble shapes of
   Telegram (Web A / tdesktop night), WhatsApp Web and Signal Desktop. */
:root[data-skin='telegram'] {
  --accent: #3390ec;
  /* Fills under white text are a shade darker to keep 4.5:1 (WCAG). */
  --accent-fill: #1f75c7;
  --accent-bg: #3390ec22;
  --chat-accent: #3390ec;
  --chat-bg: linear-gradient(135deg, #dbddbb, #6ba587, #d5d88d, #88b884);
  --chat-sidebar: #ffffff;
  --bubble-in: #ffffff;
  --bubble-in-text: #000000;
  --bubble-in-pad: 0.4rem 0.7rem;
  --bubble-out: #effdde;
  --bubble-out-text: #000000;
  --bubble-radius: 15px;
  --bubble-tail: 15px;
  --chat-column: 44rem;
}
:root[data-skin='telegram'][data-theme='dark'] {
  --chat-bg: #0e1621;
  --chat-sidebar: #17212b;
  --bubble-in: #182533;
  --bubble-in-text: #f5f5f5;
  --bubble-out: #2b5278;
  --bubble-out-text: #f5f5f5;
  --chat-accent: #6ab3f3;
}
:root[data-skin='whatsapp'] {
  --accent: #00a884;
  --accent-fill: #008069;
  --accent-bg: #00a88422;
  --chat-accent: #00a884;
  --chat-bg: #efeae2;
  --chat-sidebar: #ffffff;
  --bubble-in: #ffffff;
  --bubble-in-text: #111b21;
  --bubble-in-pad: 0.35rem 0.6rem;
  --bubble-out: #d9fdd3;
  --bubble-out-text: #111b21;
  --bubble-radius: 7.5px;
  --bubble-tail: 11.5px;
}
:root[data-skin='whatsapp'][data-theme='dark'] {
  --chat-bg: #0b141a;
  --chat-sidebar: #111b21;
  --bubble-in: #202c33;
  --bubble-in-text: #e9edef;
  --bubble-out: #005c4b;
  --bubble-out-text: #e9edef;
}
:root[data-skin='signal'] {
  --accent: #2c6bed;
  --accent-fill: #2c6bed;
  --accent-bg: #2c6bed22;
  --chat-accent: #2c6bed;
  --chat-bg: #ffffff;
  --chat-sidebar: #f6f6f6;
  --bubble-in: #e9e9e9;
  --bubble-in-text: #000000;
  --bubble-in-pad: 0.45rem 0.75rem;
  --bubble-out: #2c6bed;
  --bubble-out-text: #ffffff;
  --bubble-radius: 18px;
  --bubble-tail: 18px;
}
:root[data-skin='signal'][data-theme='dark'] {
  --chat-bg: #121212;
  --chat-sidebar: #1b1b1b;
  --bubble-in: #3b3b3b;
  --bubble-in-text: #ffffff;
  --chat-accent: #6191f3;
}
.appearance-row {
  align-items: flex-start;
  gap: 1rem;
}
.appearance-choices {
  /* Side by side when they fit, otherwise stacked at the same width. */
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.appearance .check {
  display: flex;
  gap: 0.4rem;
  /* The radio stays on the first line when its label wraps. */
  align-items: flex-start;
}
.appearance .check input {
  margin-top: calc((1lh - 1.1rem) / 2);
}

/* Greetings (issue #35): a grid of sticker cards with direct previews. */
.greetings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 0.5rem;
}
.greetings-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  cursor: pointer;
}
.greetings-sticker.selected {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.greetings-sticker img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.greetings-emoji {
  font-size: 3.5rem;
  line-height: 96px;
}
.greetings-set-list {
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  gap: 0.25rem 1rem;
}
.greetings-set-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
}
.greetings-set-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
}
.greetings-controls {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}
.greetings-field {
  flex: 1 1 10rem;
  max-width: 16rem;
  gap: 0.25rem;
}
@media (max-width: 640px) {
  .greetings-field {
    flex-basis: 100%;
    max-width: none;
  }
}
.greetings-failures {
  color: var(--danger, #c0392b);
}

/* ====================================================================
   Telegram-style message display (chat-message.js / message-parts.js)
   ==================================================================== */

/* Bubble row: avatar + bubble side by side. */
.bubble-row {
  --msg-row-gap: 0.5rem;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  position: relative;
}
.bubble-row[data-mine] {
  flex-direction: row-reverse;
  --leave-x: 50%;
}

/* A message that leaves (deleted, on any network) goes like in
   Telegram's web app: it shrinks toward its side and fades, then its
   place closes (chat-leaving.js animates the height). */
.bubble-row.is-leaving {
  overflow: hidden;
  pointer-events: none;
}
.bubble-row.is-leaving > .bubble,
.bubble-row.is-leaving > .msg-avatar {
  transform-origin: bottom;
  animation: bubble-leave 0.2s ease-in forwards;
}
@keyframes bubble-leave {
  to {
    transform: scale(0.3) translateX(var(--leave-x, -50%));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bubble-row.is-leaving > .bubble,
  .bubble-row.is-leaving > .msg-avatar {
    animation: none;
  }
}

/* Telegram's seven peer colours (peer-color.js): names, reply bars and
   the avatars of who has no photo. Names are a lighter shade on dark,
   as tweb and telegram-tt draw them; avatars are tweb's gradients. */
.peer-color-0 {
  --peer-color: #ff9380;
  --avatar-top: #ff845e;
  --avatar-bottom: #d45246;
}
.peer-color-1 {
  --peer-color: #ecb04e;
  --avatar-top: #febb5b;
  --avatar-bottom: #f68136;
}
.peer-color-2 {
  --peer-color: #c697ff;
  --avatar-top: #b694f9;
  --avatar-bottom: #6c61df;
}
.peer-color-3 {
  --peer-color: #a7eb6e;
  --avatar-top: #9ad164;
  --avatar-bottom: #46ba43;
}
.peer-color-4 {
  --peer-color: #40d8d0;
  --avatar-top: #53edd6;
  --avatar-bottom: #28c9b7;
}
.peer-color-5 {
  --peer-color: #52bfff;
  --avatar-top: #5caffa;
  --avatar-bottom: #408acf;
}
.peer-color-6 {
  --peer-color: #ff86a6;
  --avatar-top: #ff8aac;
  --avatar-bottom: #d95574;
}
:root[data-theme='light'] .peer-color-0 {
  --peer-color: #cc5049;
}
:root[data-theme='light'] .peer-color-1 {
  --peer-color: #d67722;
}
:root[data-theme='light'] .peer-color-2 {
  --peer-color: #955cdb;
}
:root[data-theme='light'] .peer-color-3 {
  --peer-color: #40a920;
}
:root[data-theme='light'] .peer-color-4 {
  --peer-color: #309eba;
}
:root[data-theme='light'] .peer-color-5 {
  --peer-color: #368ad1;
}
:root[data-theme='light'] .peer-color-6 {
  --peer-color: #c7508b;
}
.bubble-name.peer-color-0,
.bubble-name.peer-color-1,
.bubble-name.peer-color-2,
.bubble-name.peer-color-3,
.bubble-name.peer-color-4,
.bubble-name.peer-color-5,
.bubble-name.peer-color-6 {
  color: var(--peer-color);
}

/* A person's or chat's photo, or their initials on their colour. */
.avatar.peer-avatar,
.msg-avatar.peer-avatar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    var(--avatar-top, #5caffa),
    var(--avatar-bottom, #408acf)
  );
}
.peer-avatar > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.peer-avatar > img.shown {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .peer-avatar > img {
    transition: none;
  }
}

/* Sender avatar circle in groups: their photo, else initials. */
.msg-avatar {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: hsl(var(--avatar-hue, 200), 55%, 42%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
}
.msg-avatar-gap {
  flex: none;
  width: 2rem;
}

/* Reply quote box inside the bubble. */
.bubble-reply {
  --reply-color: var(--peer-color, var(--chat-accent, var(--accent)));
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.2rem 0.5rem 0.25rem 0.65rem;
  margin-bottom: 0.3rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--reply-color) 12%, transparent);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
}
.bubble-reply::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--reply-color);
}
.bubble-reply:hover {
  background: color-mix(in srgb, var(--reply-color) 20%, transparent);
}
.bubble.out .bubble-reply {
  --reply-color: var(--chat-accent, var(--accent));
}
:root[data-skin='signal'] .bubble.out .bubble-reply,
:root[data-skin='telegram'][data-theme='dark'] .bubble.out .bubble-reply {
  --reply-color: currentColor;
}
.bubble-reply.loading .bubble-reply-text {
  opacity: 0.5;
}
.bubble-reply.deleted .bubble-reply-text {
  font-style: italic;
}
.bubble-reply-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}
.bubble-reply-thumb {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  object-fit: cover;
}
.bubble-reply-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bubble-reply-name {
  font-weight: 700;
  color: var(--reply-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bubble-reply-text {
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Forwarded-from header. */
.bubble-fwd {
  font-size: 0.78rem;
  color: var(--chat-accent, var(--accent));
  margin-bottom: 0.2rem;
  font-style: italic;
}

/* Inline photo. */
.bubble-photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-active);
  cursor: pointer;
}
.bubble-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  transition: filter 0.3s;
}
.bubble-photo-img.blurred {
  filter: blur(8px);
  transform: scale(1.05);
}
.bubble-photo-placeholder {
  position: absolute;
  inset: 0;
  background: var(--bg-active);
}

/* A photo or an album: the bubble is as wide as it, the caption under it
   wraps to its width (Telegram). */
.bubble.has-visual {
  width: min-content;
}

/* An album: one bubble, its photos and videos in rows that fill it. */
.bubble-album {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 400px;
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.bubble-album-row {
  display: flex;
  gap: 2px;
  width: 100%;
}
.bubble-album-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.bubble-album-tile > .bubble-photo,
.bubble-album-tile > .bubble-video {
  max-width: none;
  border-radius: 0;
}
.bubble-album-tile .bubble-photo-img {
  border-radius: 0;
}

/* Full-screen photo viewer. */
.photo-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  cursor: zoom-out;
}
.photo-viewer-img {
  max-width: 95vw;
  max-height: 92vh;
  border-radius: var(--radius);
  object-fit: contain;
  cursor: default;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}

/* A file, as Telegram draws it: its round icon, then its name and
   size, from the bubble's left edge (not centred like a button), with
   no box behind. */
.bubble-doc {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  height: auto;
  min-height: 0;
  padding: 0.2rem 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  text-decoration: none;
  max-width: 280px;
  margin-bottom: 0.25rem;
  cursor: pointer;
}
.bubble-doc:disabled {
  cursor: progress;
  opacity: 0.8;
}
.file-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--chat-accent-fill);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.file-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.file-size {
  font-size: 0.75rem;
  opacity: 0.7;
}
.bubble-doc-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Web page preview. */
.bubble-webpage {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 3px solid var(--accent);
  padding-left: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.82rem;
}
.bubble-wp-site {
  font-size: 0.75rem;
  color: var(--text-subtle);
}
.bubble-wp-title {
  font-size: 0.9rem;
  color: var(--link);
}
.bubble-wp-desc {
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reactions row. */
.bubble-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.2rem;
}
.bubble-reaction {
  background: var(--bg-active);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.82rem;
  cursor: default;
  user-select: none;
}

/* Service message: centred pill. */
.service-line {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.15rem 0;
}
.service-line span {
  background: var(--bg-active);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-subtle);
  text-align: center;
}

/* Pinned message bar below the chat header. */
.chat-pinned-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.3;
  width: 100%;
  height: auto;
  padding: 0.35rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-elev);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.chat-pinned-bar:hover {
  background: var(--bg-active);
}
.chat-pinned-line {
  flex: none;
  align-self: stretch;
  width: 2px;
  border-radius: 1px;
  background: var(--chat-accent, var(--accent));
}
.chat-pinned-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.chat-pinned-title {
  color: var(--chat-accent, var(--accent));
  font-weight: 600;
}
.chat-pinned-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.chat-pinned-bar > .icon {
  flex: none;
  opacity: 0.6;
}
.chat-header .meta.online {
  color: var(--chat-accent, var(--accent));
}

/* A message's menu, as in Telegram's web app (R-Y67): at the pointer,
   rounded, frosted, an icon before each item; it grows from the corner
   it opened at. */
.msg-context-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: fixed;
  /* Above a dialog: the files' Send button has a menu too (R-Y102). */
  z-index: 2100;
  background: var(--surface-glass-bg, var(--bg-elev));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--surface-glass-border, var(--border));
  border-radius: 12px;
  box-shadow: 0 6px 28px var(--shadow);
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  min-width: 190px;
  transform-origin: top left;
  animation: menu-open 0.15s ease-out;
}
@keyframes menu-open {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg-context-menu {
    animation: none;
  }
}
.msg-context-menu li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.msg-context-menu li > .icon {
  flex: none;
  opacity: 0.75;
}
.msg-context-menu li:hover,
.msg-context-menu li:focus {
  background: var(--bg-active);
  outline: none;
}
.msg-context-menu li.msg-context-delete {
  color: var(--danger);
}
.msg-context-menu li.msg-context-delete > .icon {
  opacity: 1;
}

/* Selecting messages: checks sit outside the stable message column,
   a selected row is tinted across the whole chat, and a click anywhere
   on a row picks it. */
:root {
  --msg-select-overlay: rgba(53, 140, 212, 0.3);
  --msg-select-check: #4ab44a;
}
.chat-column .bubble-row {
  transition: transform 0.2s ease-out;
}
.chat-column.is-selecting .bubble-row {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.chat-column.is-selecting .bubble-row.is-selected,
.chat-column .bubble-row.is-context-target {
  isolation: isolate;
}
.chat-column.is-selecting .bubble-row.is-selected::before,
.chat-column .bubble-row.is-context-target::before {
  /* Fill the row as well as its gutters. Each row owns only the gap
     above it. One rectangle avoids clipped-shadow seams and stacking. */
  content: '';
  position: absolute;
  inset: calc(-1 * var(--msg-row-gap)) -100vmax 0;
  z-index: -1;
  background: var(--msg-select-overlay);
  pointer-events: none;
}
.bubble-check {
  position: absolute;
  right: -2rem;
  bottom: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff;
  animation: bubble-check-in 0.15s ease-out;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.bubble-check.is-checked {
  background: var(--msg-select-check);
  border-color: #fff;
}
@keyframes bubble-check-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
.chat-column.is-selecting .bubble-row a,
.chat-column.is-selecting .bubble-row button {
  pointer-events: none;
}

/* Desktop's top bar while messages are selected: FORWARD n and DELETE n
   on the left, CANCEL on the right; it slides in over the chat's. */
.selection-top {
  flex-wrap: wrap;
  gap: 0.5rem;
  animation: selection-top-in 0.15s ease-out;
}
@keyframes selection-top-in {
  from {
    opacity: 0;
    transform: translateY(-30%);
  }
}
.selection-top-button,
.selection-top-cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}
.selection-top-button {
  background: var(--chat-accent-fill);
  color: #fff;
}
.selection-top-button:hover {
  filter: brightness(1.08);
}
.selection-top-count {
  font-variant-numeric: tabular-nums;
}
.selection-top-cancel {
  background: transparent;
  color: var(--chat-accent, var(--accent));
}
.selection-top-cancel:hover {
  background: var(--bg-active);
}
.selection-top-gap {
  flex: 1;
}

/* Desktop's corner "Reply" on a group's incoming message: it shows while
   the pointer is on the message, at the bubble's top right. */
.bubble-fast-reply {
  position: absolute;
  /* Desktop: centred 2px above the bubble, 3px past its right edge. */
  top: -2px;
  right: -3px;
  transform: translateY(-50%) scale(0.85);
  height: 20px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: var(--bubble-in);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  color: var(--chat-accent, var(--accent));
  font: inherit;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.12s 0.3s,
    transform 0.12s 0.3s;
  z-index: 1;
}
@media (hover: hover) {
  .bubble-row:hover .bubble-fast-reply {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
    transition-delay: 0s;
  }
}

/* A row follows the finger in a swipe to reply; it comes back after. */
.bubble-row {
  transition: transform 0.2s ease-out;
  touch-action: pan-y pinch-zoom;
}
.bubble-row.is-swiping {
  transition: none;
}

/* Pin question. */
.pin-dialog h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}
.pin-dialog-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
}

/* Delete confirmation dialog. */
.msg-context-menu li.msg-context-reactions {
  display: flex;
  gap: 0.15rem;
  padding: 0.25rem 0.4rem;
  cursor: default;
}
.msg-context-menu li.msg-context-reactions:hover {
  background: none;
}
.msg-context-reactions button {
  border: 0;
  background: none;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 999px;
  cursor: pointer;
}
.msg-context-reactions button:hover,
.msg-context-reactions button:focus-visible {
  background: var(--bg-hover, rgba(127, 127, 127, 0.15));
}
.edit-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
}
.delete-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.delete-dialog,
.forward-picker {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.delete-dialog-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
.delete-dialog-btns button.danger {
  background: var(--danger-fill);
  color: #fff;
  border-color: var(--danger);
}

/* Forward chat picker. */
.forward-picker-title {
  font-weight: 700;
  margin: 0;
}
.forward-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.forward-picker-list li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.forward-picker-list li:last-child {
  border-bottom: none;
}
.forward-picker-list li:hover,
.forward-picker-list li:focus {
  background: var(--bg-active);
  outline: none;
}

/* Reply bar above the composer. */
.composer-reply-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  background: var(--bg-active);
  border-top: 1px solid var(--border);
}
.composer-reply-clear {
  flex: none;
  align-self: center;
  background: transparent;
  border: none;
  color: var(--text-subtle);
  font-size: 0.9rem;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  line-height: 1;
}
.composer-reply-clear:hover {
  color: var(--text);
}

/* One sender's run (chat-view.js messageRuns): bubbles sit close, and
   the corners between them are rounded less, as in Telegram. */
.bubble-row:not([data-run-first]) {
  --msg-row-gap: 0.2rem;
  margin-top: -0.3rem;
}
.bubble-row:not([data-run-first]) > .bubble.in {
  border-top-left-radius: 6px;
}
.bubble-row:not([data-run-last]) > .bubble.in {
  border-bottom-left-radius: 6px;
}
.bubble-row:not([data-run-first]) > .bubble.out {
  border-top-right-radius: 6px;
}
.bubble-row:not([data-run-last]) > .bubble.out {
  border-bottom-right-radius: 6px;
}
.msg-avatar {
  width: 2.125rem;
  height: 2.125rem;
  font-size: 0.8rem;
  align-self: flex-end;
}
.msg-avatar-gap {
  width: 2.125rem;
}
.chat-item .avatar {
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
}
.chat-header .avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.9rem;
}
.peer-avatar-initials {
  line-height: 1;
}

/* Formatted text (message-text.js). */
.bubble-body {
  min-width: 0;
}
.msg-link {
  color: var(--link);
  text-decoration: none;
  word-break: break-word;
}
.msg-link:hover {
  text-decoration: underline;
}
.bubble.out .msg-link {
  color: inherit;
  text-decoration: underline;
}
.msg-code,
.msg-pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}
.msg-code {
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.18);
}
.msg-pre {
  margin: 0.25rem 0;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.15);
  overflow-x: auto;
  white-space: pre;
}
.msg-quote {
  margin: 0.25rem 0;
  padding: 0.15rem 0.6rem;
  border-left: 3px solid var(--chat-accent, var(--accent));
  border-radius: 4px;
  background: color-mix(
    in srgb,
    var(--chat-accent, var(--accent)) 10%,
    transparent
  );
}
.msg-tag,
.msg-mention-name {
  color: var(--link);
}
.bubble.out .msg-tag,
.bubble.out .msg-mention-name {
  color: inherit;
  font-weight: 600;
}
.msg-spoiler:not(.open) {
  color: transparent;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.45);
  cursor: pointer;
  user-select: none;
}
.msg-spoiler:not(.open) * {
  color: transparent;
}

/* A sticker or a round video: no bubble around it. */
.bubble.bare {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
/* A sticker's reply: a small bubble of its own (R-Y68). */
.bubble.bare > .bubble-reply {
  align-self: flex-start;
  max-width: 16rem;
  padding: 0.3rem 0.55rem 0.35rem 0.75rem;
  background: var(--bubble-in);
  color: var(--bubble-in-text);
}
.bubble.bare.out > .bubble-reply {
  align-self: flex-end;
  background: var(--bubble-out);
  color: var(--bubble-out-text);
}
.bubble-reply-thumb.is-sticker {
  object-fit: contain;
}
.bubble.bare > .bubble-time {
  align-self: flex-end;
  margin-top: 0.2rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}
/* A photo without a caption fills its bubble; the time is over it. */
.bubble.media-only {
  padding: 0.2rem;
}
.bubble.media-only > .bubble-time {
  position: absolute;
  right: 0.6rem;
  bottom: 0.55rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

/* Video and GIF (chat-media.js). */
.bubble-video,
.bubble-round {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  border-radius: calc(var(--bubble-radius) - 4px);
  background: #000;
  margin-bottom: 0.25rem;
}
.bubble-round {
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  cursor: pointer;
}
.media-poster,
.media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-poster.blurred {
  filter: blur(10px);
  transform: scale(1.08);
}
.bubble-video .media-video {
  object-fit: contain;
  background: #000;
}
.media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0 0 0 0.2rem;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}
.media-play:hover {
  background: rgba(0, 0, 0, 0.65);
}
.media-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.72rem;
  pointer-events: none;
}
.bubble-round .media-badge {
  top: auto;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
}
.media-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 2.6rem;
  margin: -1.3rem 0 0 -1.3rem;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: media-spin 0.8s linear infinite;
}
.media-spinner.small {
  position: static;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  border-width: 2px;
}
/* Loading belongs to the media's reserved box, including before URL resolution. */
.media-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  color: #fff;
  pointer-events: none;
  text-align: center;
}
.media-loading > .spinner,
.media-load-error {
  box-sizing: content-box;
  padding: 0.5rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 55%);
}
.media-loading.is-failed button {
  pointer-events: auto;
}
.media-loading.is-small {
  position: static;
  display: inline-flex;
}
.media-loading.is-small > .spinner {
  padding: 0;
  background: transparent;
}
img[data-media-ready='false'] {
  opacity: 0;
}
.loading-image,
.loading-player {
  position: relative;
  display: inline-grid;
  max-width: 100%;
  min-width: min(10rem, 100%);
  min-height: 6rem;
  overflow: hidden;
}
.loading-image > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.loading-image.media-poster {
  position: absolute;
  min-width: 0;
  min-height: 0;
}
.loading-image.is-compact {
  min-width: 0;
  min-height: 0;
}
.loading-image.is-compact .spinner,
.peer-avatar .media-loading .spinner {
  width: 1rem;
  height: 1rem;
  padding: 0.125rem;
}
.loading-image.media-poster.blurred {
  filter: none;
  transform: none;
}
.loading-image.media-poster.blurred > img {
  filter: blur(10px);
}
.loading-player.loading-audio {
  min-height: 3.5rem;
}
.media-poster .media-loading {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.5rem;
}
.media-poster .media-loading > .spinner {
  width: 1.25rem;
  height: 1.25rem;
}
:is(.bubble-video, .bubble-round):has(> video) > .media-poster {
  display: none;
}
.bubble-sticker {
  position: relative;
}
.bubble-sticker .loading-image {
  width: 100%;
  height: 100%;
}
@keyframes media-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Voice notes and songs. */
.bubble-audio {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 14rem;
  margin-bottom: 0.2rem;
}
.audio-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--chat-accent-fill);
  color: #fff;
  cursor: pointer;
}
.audio-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.audio-wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 1.4rem;
  overflow: hidden;
}
.audio-wave i {
  flex: 1;
  min-width: 0;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.35;
}
.audio-wave i.played {
  opacity: 1;
  background: var(--chat-accent, var(--accent));
}
.bubble.out .audio-wave i.played {
  background: currentColor;
}
.audio-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.audio-time {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Stickers. */
.bubble-sticker {
  display: grid;
  place-items: center;
  width: 10rem;
  height: 10rem;
}
.bubble-sticker img,
.bubble-sticker video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sticker-emoji {
  font-size: 5rem;
}

/* Places, contacts, polls, dice. */
.bubble-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  background: rgba(127, 127, 127, 0.12);
  color: inherit;
  text-decoration: none;
}
.card-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* R-Y131: a place's map, as Telegram Desktop draws it: the map picture
   with a pin over its middle; the title and address under it. */
.bubble-place {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 300px;
  margin-bottom: 0.25rem;
  color: inherit;
  text-decoration: none;
}
.place-map {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(127, 127, 127, 0.18);
}
.place-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.place-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 32px;
  /* The pin's tip is on the place. */
  transform: translate(-50%, -100%);
  fill: #e5483c;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.place-pin circle {
  fill: #fff;
}
.place-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.place-title {
  font-weight: 600;
}
.bubble-card.note {
  font-style: italic;
  opacity: 0.85;
}
/* A poll, a quiz, a checklist (R-Y74), drawn as Telegram Desktop draws
   them: circles (boxes) to vote, then shares, bars and our tick. */
.bubble-poll {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: min(17rem, 70vw);
  margin-bottom: 0.25rem;
}
.poll-question {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.poll-kind {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}
.poll-voters {
  display: inline-flex;
}
.poll-voters .poll-voter {
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.5rem;
  border: 1.5px solid var(--bubble-in, var(--bg));
  border-radius: 50%;
  overflow: hidden;
}
.poll-voters .poll-voter + .poll-voter {
  margin-left: -0.35rem;
}
.poll-clock {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.poll-solution-toggle {
  margin-left: auto;
  padding: 0.1rem;
  border: 0;
  background: none;
  color: var(--chat-accent, var(--link));
  cursor: pointer;
}
.poll-solution {
  margin: 0.2rem 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--chat-accent, var(--link));
  border-radius: 4px;
  background: var(--accent-bg);
  font-size: 0.85rem;
  white-space: pre-wrap;
}
.poll-answers {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.3rem 0;
  padding: 0;
  list-style: none;
}
.poll-answer {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: 0.4rem;
  align-items: start;
}
.poll-share {
  font-weight: 700;
  font-size: 0.8rem;
  text-align: right;
  line-height: 1.35rem;
}
.poll-text {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35rem;
}
.poll-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.18rem;
  border-radius: 50%;
  color: #fff;
  background: var(--chat-accent-fill);
}
.poll-answer.correct .poll-mark {
  background: #1a7f37;
}
.poll-answer.wrong .poll-mark {
  background: var(--danger-fill);
}
.poll-bar-track {
  grid-column: 2;
  height: 4px;
}
.poll-bar {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--chat-accent, var(--link));
}
.poll-answer.correct .poll-bar {
  background: #3fb950;
}
.poll-answer.wrong .poll-bar {
  background: var(--danger);
}
.poll-answer:has(.poll-choice) {
  display: block;
}
.poll-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.15rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.poll-choice:disabled {
  cursor: default;
}
.poll-circle,
.poll-box {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.12rem;
  border: 2px solid var(--text-subtle);
  border-radius: 50%;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.poll-box {
  border-radius: 4px;
}
.poll-choice.picked .poll-circle,
.poll-choice.picked .poll-box {
  border-color: var(--chat-accent, var(--link));
  background: var(--chat-accent-fill)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 80% no-repeat;
}
.bubble-todo .poll-answer.chosen .poll-text {
  text-decoration: line-through;
  opacity: 0.7;
}
.poll-total {
  align-self: center;
  font-size: 0.8rem;
}
.poll-action {
  align-self: stretch;
  padding: 0.35rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--chat-accent, var(--link));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.poll-action:hover:not(:disabled) {
  background: var(--accent-bg);
}
.poll-action:disabled {
  opacity: 0.5;
  cursor: default;
}
.poll-voters-dialog {
  max-height: min(80vh, 40rem);
  display: flex;
  flex-direction: column;
}
.poll-voters-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.poll-voters-group h4 {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
}
.poll-voters-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.poll-voters-group li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.poll-voters-group .avatar {
  width: 1.8rem;
  height: 1.8rem;
}
.bubble-dice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 3rem;
}
.dice-value {
  font-size: 1rem;
  font-weight: 700;
}

/* Loading (spinner.js, R-Y84): Telegram's arc, turning as it grows and
   shrinks; pages show it after a moment, so a quick load does not
   flash. */
.spinner {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: var(--text);
  vertical-align: -0.2em;
}
.spinner svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: spinner-turn 1.6s linear infinite;
}
.spinner circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1 63;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: spinner-arc 1.6s ease-in-out infinite;
}
.spinner-small circle {
  stroke-width: 3;
}
.spinner-large {
  width: 2.75rem;
  height: 2.75rem;
}
.spinner-large circle {
  stroke-width: 2;
}
@keyframes spinner-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinner-arc {
  0% {
    stroke-dasharray: 1 63;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 44 63;
    stroke-dashoffset: -12;
  }
  100% {
    stroke-dasharray: 44 63;
    stroke-dashoffset: -62;
  }
}
.page-loading {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  animation: loading-appear 0.25s ease-out 0.2s both;
}
/* A page loader uses the whole available view; pane loaders use their pane. */
main:has(> .page-loading) {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--topbar-h));
}
.app-shell-compact main:has(> .page-loading) {
  min-height: calc(
    100dvh - var(--topbar-h) - var(--bottom-nav-h) - var(--safe-bottom)
  );
}
@keyframes loading-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.busy {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
p.busy,
div.busy {
  display: flex;
}
/* A working button: the arc before its words. */
button[aria-busy='true'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: progress;
}
button[aria-busy='true']::before {
  content: '';
  flex: none;
  width: 0.95em;
  height: 0.95em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-turn 0.75s linear infinite;
}

/* The chat list before its rows come (Telegram Web A's skeleton). */
.chat-skeleton {
  display: flex;
  flex-direction: column;
  padding: 0 0.75rem;
  animation: loading-appear 0.25s ease-out 0.1s both;
}
.chat-skeleton-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.5rem;
  padding: 0.45rem 0.375rem;
}
.chat-skeleton-avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
}
.chat-skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.chat-skeleton-line {
  height: 0.7rem;
  border-radius: 4px;
}
.chat-skeleton-line.is-short {
  height: 0.6rem;
  opacity: 0.7;
}
.skeleton {
  display: block;
  background: linear-gradient(
      90deg,
      transparent 0%,
      var(--skeleton-shine) 50%,
      transparent 100%
    )
    var(--skeleton);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s ease-in-out infinite;
}
:root {
  --skeleton: rgba(255, 255, 255, 0.07);
  --skeleton-shine: rgba(255, 255, 255, 0.06);
}
:root[data-theme='light'] {
  --skeleton: rgba(31, 35, 40, 0.08);
  --skeleton-shine: rgba(255, 255, 255, 0.6);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --skeleton: rgba(31, 35, 40, 0.08);
    --skeleton-shine: rgba(255, 255, 255, 0.6);
  }
}
@keyframes skeleton-shine {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner svg {
    animation-duration: 3s;
  }
  .spinner circle {
    animation: none;
    stroke-dasharray: 44 63;
  }
  .skeleton {
    animation: none;
  }
}

/* Files and photos (R-Y99): the paperclip, the send box, the drop. */
.chat-attach {
  display: contents;
}
.chat-attach-btn {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-muted, inherit);
}
.attach-dialog {
  width: min(460px, 92vw);
  max-height: 86vh;
}
.attach-dialog h3 {
  margin: 0;
}
.attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  max-height: 46vh;
}
.attach-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.attach-pic,
.attach-doc {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 8px;
  object-fit: cover;
}
.attach-doc {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-fill, var(--chat-accent));
  color: #fff;
}
.attach-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.attach-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.attach-size {
  font-size: 0.8rem;
  color: var(--text-muted, inherit);
  opacity: 0.8;
}
.attach-caption {
  resize: vertical;
  font: inherit;
}
.attach-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}
.progress-track {
  height: 4px;
  border-radius: 2px;
  background: var(--progress-track);
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  background: var(--progress-fill);
}
.progress-track[data-progress='indeterminate'] > .progress-fill {
  width: 35%;
  animation: progress-travel 1.2s ease-in-out infinite;
}
@keyframes progress-travel {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(286%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .progress-track[data-progress='indeterminate'] > .progress-fill {
    animation: none;
    transform: translateX(93%);
  }
}
.attach-progress-bar {
  flex: 1;
}
.chat-drop {
  position: absolute;
  inset: 0.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent-fill, var(--chat-accent));
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  font-size: 1.1rem;
  pointer-events: none;
}
.attach-pic {
  background: var(--bg-active);
}
.attach-dialog .pin-dialog-option {
  margin: 0;
}
.attach-list.is-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.4rem;
}
.attach-list.is-photos .attach-item {
  position: relative;
}
.attach-list.is-photos .attach-pic {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.attach-list.is-photos .attach-name {
  display: none;
}
.attach-list.is-photos .attach-remove {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

/* Clear, delete or leave a chat (R-Y100). */
.remove-chat-dialog h3 {
  margin: 0;
}
.remove-chat-dialog p {
  margin: 0;
}
.remove-chat-note {
  color: var(--text-muted, inherit);
  font-size: 0.9rem;
}
.remove-chat-dialog .pin-dialog-option {
  margin: 0;
}

/* The Send button's menu: scheduled messages (R-Y102). */
.composer-scheduled {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent, inherit);
}
.composer-scheduled-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1rem;
  padding: 0 0.25rem;
  border-radius: 0.5rem;
  background: var(--accent-fill);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1rem;
}
.schedule-dialog,
.scheduled-dialog {
  width: min(460px, 92vw);
}
.schedule-dialog h3,
.scheduled-dialog h3 {
  margin: 0 0 0.75rem;
}
.schedule-when {
  display: flex;
  gap: 0.5rem;
}
.schedule-when input {
  flex: 1;
  min-width: 0;
  font: inherit;
}
.schedule-hint {
  margin: 0.75rem 0 0;
  color: var(--text-muted, inherit);
  font-size: 0.9rem;
}
.scheduled-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.scheduled-day {
  margin: 0.75rem 0 0.25rem;
  color: var(--text-muted, inherit);
  font-size: 0.8rem;
  text-align: center;
}
.scheduled-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.2));
}
.scheduled-time {
  flex: none;
  color: var(--text-muted, inherit);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.scheduled-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scheduled-act {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
}

/* The emoji panel by the message box (R-Y104), as Telegram Desktop's. */
.composer-emoji {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-muted, inherit);
}
.composer-emoji.active {
  color: var(--accent, inherit);
}
.emoji-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 30;
  width: min(22rem, 100%);
  height: min(24rem, 60vh);
  display: flex;
  flex-direction: column;
  background: var(--surface-glass-bg, var(--bg-elev));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--surface-glass-border, var(--border));
  border-radius: 12px;
  box-shadow: 0 6px 28px var(--shadow);
  overflow: hidden;
}
.emoji-search {
  box-sizing: border-box;
  width: calc(100% - 1rem);
  min-width: 0;
  margin: 0.5rem 0.5rem 0.25rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
}
.emoji-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 0.4rem 0.4rem;
}
.emoji-section-title {
  margin: 0.5rem 0.2rem 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-subtle);
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr));
}
.emoji-cell {
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.emoji-cell:hover,
.emoji-cell:focus-visible {
  background: var(--accent-bg, var(--bg));
}
.emoji-none {
  margin: 1.5rem 0;
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.85rem;
}
.emoji-cats {
  display: flex;
  justify-content: space-around;
  padding: 0.2rem;
  border-top: 1px solid var(--border);
}
.emoji-cat {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-subtle);
}
.emoji-cat.active {
  color: var(--accent, inherit);
  background: var(--accent-bg, transparent);
}

/* Stickers and GIFs in the emoji panel (R-Y105). */
.emoji-tabs {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem 0.15rem;
}
.emoji-tab {
  padding: 0.25rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-subtle);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.emoji-tab.active {
  color: var(--accent, inherit);
  background: var(--accent-bg, var(--bg));
}
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.15rem;
}
.gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem;
  padding-top: 0.4rem;
}
.sticker-cell,
.gif-cell {
  display: block;
  min-width: 0;
  padding: 0.2rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  aspect-ratio: 1;
}
.gif-cell {
  padding: 0;
  overflow: hidden;
  background: var(--bg);
}
.sticker-cell:hover,
.sticker-cell:focus-visible,
.gif-cell:focus-visible {
  background: var(--accent-bg, var(--bg));
}
.sticker-picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sticker-picture img,
.sticker-picture video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gif-cell .sticker-picture img,
.gif-cell .sticker-picture video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sticker-empty {
  font-size: 1.6rem;
  opacity: 0.5;
}
.sticker-sets {
  flex: none;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}
.sticker-sets .emoji-cat {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker-sets img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}
.sticker-set-letter {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Days in the chat (R-Y106): a date between two days' messages, the top
   one floating while the chat scrolls, and the calendar they open. */
.chat-day {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0.35rem;
}
.chat-day-pill {
  border: 0;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  background: var(--bg-active);
  color: var(--text-subtle);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.chat-day-pill:hover {
  color: var(--text);
}
.chat-day-float {
  position: sticky;
  z-index: 3;
  top: 0.5rem;
  display: flex;
  justify-content: center;
  height: 0;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.chat-day-float.is-shown {
  opacity: 1;
}
.chat-day-float.is-shown .chat-day-pill {
  pointer-events: auto;
}
.chat-day-float .chat-day-pill {
  background: var(--bg-elev);
  box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
}
.calendar {
  width: min(340px, 92vw);
  gap: 0.6rem;
}
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.calendar-title {
  margin: 0;
  font-size: 1rem;
  text-transform: capitalize;
}
.calendar-move {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.calendar-move:hover:not(:disabled) {
  background: var(--bg-active);
  color: var(--text);
}
.calendar-move:disabled {
  opacity: 0.35;
  cursor: default;
}
.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.15rem;
  text-align: center;
}
.calendar-weekdays span {
  color: var(--text-subtle);
  font-size: 0.75rem;
}
.calendar-day {
  aspect-ratio: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.calendar-day:hover:not(:disabled) {
  background: var(--bg-active);
}
.calendar-day:disabled {
  color: var(--text-subtle);
  opacity: 0.45;
  cursor: default;
}
.calendar-day.is-today {
  font-weight: 700;
  color: var(--accent);
}
.calendar-day.is-chosen {
  background: var(--accent-fill);
  color: #fff;
}

/* A bot's buttons (R-Y110): rows under its bubble, as wide as it, and
   the keyboard it puts under the message box. */
.bubble-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 85%;
  min-width: min(16rem, 85%);
  align-self: flex-start;
}
.bubble-stack.out {
  align-self: flex-end;
}
.bubble-stack > .bubble {
  max-width: 100%;
  align-self: stretch;
}
.bot-keyboard,
.reply-keyboard {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.bot-row {
  display: flex;
  gap: 0.2rem;
}
.bot-button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.1rem;
  padding: 0.35rem 1rem;
  border: 0;
  border-radius: 0.6rem;
  background: var(--bg-active);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.bot-button:hover {
  filter: brightness(1.08);
}
.bot-button[aria-busy='true'] {
  opacity: 0.6;
  cursor: progress;
}
.bot-button.is-primary {
  background: var(--accent-fill);
  color: #fff;
}
.bot-button.is-success {
  background: #1a7f37;
  color: #fff;
}
.bot-button.is-danger {
  background: var(--danger-fill);
  color: #fff;
}
.bot-button-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-button-mark {
  position: absolute;
  top: 0.2rem;
  right: 0.3rem;
  display: flex;
  opacity: 0.7;
}
.reply-keyboard {
  max-height: 40vh;
  overflow-y: auto;
  padding: 0.4rem 0.6rem 0.2rem;
}
.reply-keyboard .bot-button {
  min-height: 2.6rem;
}
.reply-keyboard.is-fit .bot-button {
  min-height: 2.1rem;
}
.bot-kb-toggle.is-on {
  color: var(--accent);
}
.bot-dialog-url {
  overflow-wrap: anywhere;
  color: var(--text-muted);
}
.bot-dialog-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The profile column's top and the chat's shared media (R-Y111). */
.profile-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0 0.9rem;
  text-align: center;
}
.profile-head .avatar {
  width: 5rem;
  height: 5rem;
  font-size: 1.8rem;
}
.profile-name {
  margin-top: 0.4rem;
  font-size: 1.05rem;
}
.profile-username {
  color: var(--accent);
  text-decoration: none;
}
.profile-about {
  margin: 0.4rem 0 0;
  white-space: pre-wrap;
  font-size: 0.9rem;
}
.profile-shared {
  display: flex;
  flex-direction: column;
  margin: 0 -1rem 0.75rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.profile-shared > .meta {
  padding: 0.4rem 1rem;
}
.shared-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1.1rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.shared-row:hover,
.shared-item-go:hover {
  background: var(--bg-active);
}
.shared-list-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem 0.4rem;
}
.shared-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.shared-cell {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--bg-active);
  cursor: pointer;
}
.shared-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shared-cell-time {
  position: absolute;
  left: 0.25rem;
  bottom: 0.25rem;
  padding: 0 0.3rem;
  border-radius: 0.4rem;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: 0.7rem;
}
.shared-items {
  display: flex;
  flex-direction: column;
}
.shared-item {
  display: flex;
  flex-direction: column;
  padding: 0 0 0.3rem;
}
.shared-item-go {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.45rem 1rem 0.2rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.shared-item-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-item-link {
  padding: 0 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: 0.85rem;
}
.shared-end {
  height: 1px;
}

/* The end of found GIFs: near the view, the next page (R-Y112). */
.gif-more {
  grid-column: 1 / -1;
  height: 1px;
}

/* An animated sticker (R-Y113): its SVG over the picture till it draws. */
.lottie-sticker {
  display: block;
  width: 100%;
  height: 100%;
}
.bubble-sticker > * {
  grid-area: 1 / 1;
}
.sticker-picture {
  position: relative;
}
.sticker-picture .lottie-sticker + img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Skin tones in the emoji panel (R-Y114): a corner mark on the emoji that
   take one, and the six variants in a popover over it. */
.emoji-cell {
  position: relative;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.emoji-cell[data-tonable]::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 6px 6px;
  border-color: transparent transparent var(--text-subtle) transparent;
  opacity: 0.7;
  pointer-events: none;
}
.emoji-tones {
  position: absolute;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 4px;
  width: 228px;
  box-sizing: border-box;
  padding: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px var(--shadow);
}
.emoji-tone {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.emoji-tone:hover,
.emoji-tone:focus-visible,
.emoji-tone.active {
  background: var(--accent-bg, var(--bg));
}

/* A found sticker set's Add button by its title (R-Y116). */
.sticker-set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sticker-set-add {
  margin: 0.4rem 0.2rem 0.1rem;
  padding: 0.2rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--chat-accent-fill);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.sticker-set-add:disabled {
  opacity: 0.6;
  cursor: default;
}

/* A custom emoji in a message's text (R-Y120): its picture inline at the
   text's size, the fallback emoji hidden (but still copied) once drawn. */
.msg-custom-emoji {
  position: relative;
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.3em;
  line-height: 1.25em;
  text-align: center;
}
.msg-custom-emoji.big {
  width: 3.5em;
  height: 3.5em;
  line-height: 3.5em;
  margin: 0.1em;
}
.msg-custom-emoji.big .msg-custom-emoji-text {
  font-size: 3em;
}
.msg-custom-emoji.drawn .msg-custom-emoji-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.msg-custom-emoji-img,
.msg-custom-emoji-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* A new poll (R-Y121): the paperclip's menu and the dialog. */
.attach-menu {
  position: fixed;
}
.attach-menu li {
  padding: 0;
}
.attach-menu-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.poll-dialog {
  width: min(460px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
}
.poll-dialog h3 {
  margin: 0;
}
.poll-heading {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted, inherit);
}
.poll-question,
.poll-option input[type='text'],
.poll-solution {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}
.poll-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.poll-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.poll-option input[type='text'] {
  flex: 1;
  min-width: 0;
}
.poll-remove {
  flex: none;
}
.poll-dialog .schedule-hint {
  margin: 0;
}

/* A forum's topics (R-Y122): Telegram's tabs layout over the messages. */
.chat-topics {
  display: flex;
  flex: none;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  scrollbar-width: thin;
}
.chat-topic {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  max-width: 14rem;
  height: auto;
  padding: 0.3rem 0.65rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.chat-topic:hover {
  background: var(--bg-active);
}
.chat-topic.is-selected {
  background: var(--accent-soft, var(--bg-active));
  color: var(--chat-accent, var(--accent));
  font-weight: 600;
}
.chat-topic-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-topic-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.chat-topic-icon.is-general {
  background: var(--bg-active);
  color: var(--text-muted);
}
.chat-topic-closed {
  display: inline-flex;
  opacity: 0.7;
}
.chat-topic-unread {
  min-width: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2rem;
  text-align: center;
}

/* Chat invite links (R-Y123): the dialog and the info column's link. */
.invite-dialog {
  align-items: center;
  text-align: center;
}
.invite-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.invite-initial {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.invite-title {
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}
.invite-about {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.invite-error {
  margin: 0;
  color: var(--danger);
}
.invite-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0;
}
.invite-link-text {
  overflow-wrap: anywhere;
  user-select: all;
}
.invite-link-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* A group's members in the info column (R-Y125). */
.member-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0.3rem 0;
}
.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.member-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.2rem;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.member-initial {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-badge {
  flex: none;
}
.member-remove {
  flex: none;
  color: var(--danger);
}

/* A sticker in a chat opens its set's box; the box (R-Y124). */
.bubble-sticker.has-set {
  cursor: pointer;
}
.delete-dialog.sticker-box {
  width: min(380px, 94vw);
  max-height: 80vh;
}
.sticker-box-title {
  margin: 0;
  overflow-wrap: anywhere;
}
.sticker-box-scroll {
  overflow-y: auto;
  min-height: 6rem;
}
.sticker-box-button {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
}
.sticker-box-failed {
  margin: 0;
  color: var(--danger);
}
.sticker-set-remove {
  margin-inline-start: auto;
}
.sticker-ask-text {
  margin: 0;
}
/* Over the sticky top bar, so a click beside the box closes it. */
.delete-dialog-overlay.sticker-overlay {
  z-index: 2200;
}
/* A post's comments: the bar under it and the panel (R-Y126). */
.bubble-comments {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.45rem 0.1rem 0.1rem;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.92em;
  cursor: pointer;
  text-align: start;
}
.bubble-comments .icon-chevron-right {
  margin-inline-start: auto;
}
.bubble-comments-label {
  font-weight: 600;
}
.bubble-comments-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}
/* Over the sticky top bar, so a click beside the panel closes it. */
.delete-dialog-overlay.comments-overlay {
  z-index: 2200;
}
.comments-panel {
  display: flex;
  flex-direction: column;
  width: min(var(--chat-column, 640px), 96vw);
  height: min(88vh, 900px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.comments-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.comments-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.comments-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.8rem;
}
.comments-column {
  width: 100%;
}
.comments-start {
  align-self: center;
  padding: 0.2rem 0.7rem;
  border-radius: 1rem;
  background: var(--bg-elev);
  font-size: 0.85em;
}
.comments-older {
  align-self: center;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: none;
  color: var(--accent);
  padding: 0.25rem 0.8rem;
  cursor: pointer;
}
.comments-failed {
  color: var(--danger);
  margin: 0;
}
.comments-composer {
  border-top: 1px solid var(--border);
  padding: 0.5rem 0.8rem;
  background: var(--bg-elev);
}
.comments-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.comments-composer textarea {
  flex: 1 1 auto;
  resize: none;
  min-height: 2.4rem;
  height: 2.4rem;
  max-height: 8rem;
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: inherit;
}
.comments-reply {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
  color: var(--accent);
}
.comments-reply-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
}
/* A die drawn as its animation, its card under it till then (R-Y130). */
.bubble-die > * {
  grid-area: 1 / 1;
}

/* "Seen by" and who reacted (R-Y127). */
.reader-panel {
  display: flex;
  flex-direction: column;
  width: min(420px, 96vw);
  max-height: min(80vh, 640px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.reader-body {
  padding: 0.6rem 0.8rem;
  overflow-y: auto;
}
.reader-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0;
}
.reader-emoji,
.reader-when {
  flex: none;
}
.reader-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.reader-tab {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: none;
  color: inherit;
  cursor: pointer;
}
.reader-tab.active {
  background: var(--accent-fill);
  border-color: var(--accent);
  color: #fff;
}

/* Block, contacts and report in the info column; the report dialog (R-Y128). */
.peer-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--control-gap);
}
.person-panel-body > * {
  flex-shrink: 0;
  min-width: 0;
}
.person-panel-body > :is(.person-section, .admin-actions) {
  margin-block: 0;
}
.person-panel-body > .person-section > button {
  width: 100%;
}
.person-panel-body > :is(button, a.button),
.person-panel-body .peer-actions > button,
.person-panel-body .peer-action {
  width: 100%;
}
.person-panel-body .contact-extras,
.person-panel-body .contact-photo,
.person-panel-body .contact-birthday,
.person-panel-body .contact-note {
  gap: var(--control-gap);
}
.person-panel-body :is(.contact-photo, .contact-birthday, .contact-note) {
  flex-direction: column;
  align-items: stretch;
}
.telegram-open-hint {
  margin: var(--control-gap) 0 0;
}
.peer-action,
.peer-reason {
  text-align: left;
}
.peer-reasons {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 50vh;
  overflow-y: auto;
}
.peer-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.peer-comment {
  width: 100%;
  min-height: 5rem;
  box-sizing: border-box;
}

/* New group, new channel and editing a chat's info (R-Y129). */
.new-chat {
  position: relative;
}
.new-chat-btn {
  font-size: 1.2rem;
  line-height: 1;
}
.new-chat-menu {
  position: absolute;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  margin-top: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, var(--bg));
}
.new-chat-menu button {
  padding: 0.4rem 0.6rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-form-dialog {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: min(22rem, 90vw);
  /* R-Y129: a long form (My profile) scrolls inside the card on a small
     window instead of running off the screen, and Save stays in reach. */
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  box-sizing: border-box;
}
.chat-form-dialog > .delete-dialog-btns {
  position: sticky;
  bottom: -1.5rem;
  margin-bottom: -1.5rem;
  padding: 0.6rem 0 1.5rem;
  background: var(--bg-elev);
}
.chat-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.chat-form-error {
  margin: 0;
  color: var(--danger, #d33);
}
.chat-pick-list {
  max-height: 16rem;
  margin: 0.4rem 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.chat-pick-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.2rem;
  cursor: pointer;
}
.chat-form-photo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.chat-edit-bar {
  padding: 0.5rem 0;
}

/* The bar over a chat with a stranger (R-Y137). */
.peer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.45rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  flex: none;
  font-size: 0.9rem;
}
.peer-bar-info {
  color: var(--text-muted);
  flex: 1 1 12rem;
}
.peer-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.peer-bar .peer-action {
  width: auto;
}
.peer-bar-hide {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

/* Translating a message: the original, the language, the translation
   (R-Y132). */
.translate-block {
  margin: 0 0 0.6rem;
}
.translate-label {
  margin: 0 0 0.2rem;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--muted);
}
.translate-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.translate-failed {
  color: var(--danger);
  margin: 0;
}
.translate-pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
}
.translate-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* A group's permissions, slow mode and recent actions (R-Y133). */
.admin-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.6rem 0;
}
.admin-open {
  text-align: left;
}
.admin-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.admin-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.admin-slow {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
}
.admin-event {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0;
}
.admin-event-text {
  overflow-wrap: anywhere;
}
.admin-event-when {
  margin-left: auto;
}

/* R-Y135: a bot's commands over the box, and its Menu button, as
   Telegram Desktop shows them. */
.bot-commands {
  display: flex;
  flex-direction: column;
  max-height: 14rem;
  overflow-y: auto;
  border-radius: 10px;
}
.bot-command {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.bot-command[aria-selected='true'] {
  background: var(--bg-active);
}
.bot-command-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted, inherit);
}
.bot-command-bot {
  flex: none;
  font-size: 0.8em;
  color: var(--chat-accent, var(--accent));
}
.bot-menu-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  height: 2.5rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 1.25rem;
  background: var(--accent-fill, var(--chat-accent));
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* R-Y136: the user's own Telegram profile (My Account). */
.profile-photo-row .profile-photo {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
}
.profile-bio,
.profile-username {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.profile-username-available {
  color: var(--ok, #2a9d4a);
}
.profile-username-taken,
.profile-username-invalid {
  color: var(--danger, #d33);
}
.profile-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* R-Y139: Privacy and security (rules, sessions, blocked users). */
.privacy-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 40vh;
  overflow-y: auto;
}
.privacy-section h4 {
  margin: 0.5rem 0 0;
}
.privacy-row,
.privacy-session,
.privacy-blocked-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.privacy-label,
.privacy-blocked-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.privacy-label {
  display: flex;
}
.privacy-confirm {
}

/* The link preview over the message box (R-Y145; chat-link-preview.js). */
.composer-link-preview {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Sharing a place and a contact (R-Y142). */
.share-dialog {
  width: min(420px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
}
.share-dialog h3 {
  margin: 0;
}
.share-use {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
}
.share-fields {
  display: flex;
  gap: 0.5rem;
}
.share-field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-muted, inherit);
}
.share-field input,
.share-field select,
.share-search {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}
.share-preview {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.share-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.share-tabs {
  display: flex;
  gap: 0.25rem;
}
.share-tab {
  flex: 1;
}
.share-tab.is-active {
  background: var(--accent-fill);
  color: var(--accent-contrast, #fff);
}
.share-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.share-contact {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.share-contact:hover,
.share-contact.is-picked {
  background: var(--bg-elev);
}
.share-contact.is-picked {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.card-action {
  align-self: flex-start;
  margin-top: 0.25rem;
  font: inherit;
  font-size: 0.85rem;
}

/* R-Y138: an inline bot's answers over the box (`@gif cats`), pictures in
   a grid, articles in a list. */
.inline-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.4rem;
  border-radius: 10px;
}
.inline-hint,
.inline-status {
  padding: 0 0.3rem;
  font-size: 0.85em;
  color: var(--text-subtle);
}
.inline-results {
  display: flex;
  max-height: 16rem;
  overflow-y: auto;
}
.inline-results.is-grid {
  flex-flow: row wrap;
  gap: 0.3rem;
}
.inline-results.is-list {
  flex-direction: column;
}
.inline-result {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.inline-result[aria-selected='true'] {
  background: var(--bg-active);
}
.inline-result.inline-grid {
  width: 6rem;
  height: 6rem;
  padding: 0.15rem;
}
.inline-result.inline-grid .sticker-picture,
.inline-result.inline-grid .inline-plain {
  width: 100%;
  height: 100%;
}
.inline-result.inline-grid .sticker-picture img,
.inline-result.inline-grid .sticker-picture video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.inline-result.inline-list {
}

/* R-Y141: "Send as" — the avatar button left of the box and its list. */
.send-as-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.send-as-button .send-as-avatar {
  width: 2.25rem;
  height: 2.25rem;
}
.send-as-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  text-align: left;
}
.inline-thumb {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}
.inline-thumb .sticker-picture,
.inline-thumb .inline-plain {
  width: 100%;
  height: 100%;
}
.inline-thumb .sticker-picture img,
.inline-thumb .sticker-picture video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.inline-plain {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg-active);
  color: var(--text-subtle);
}
.inline-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.inline-text b,
.inline-text .meta {
}

/* R-Y143: a chat's auto-delete timer, Saved Messages by chat. */
.chat-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.chat-ttl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.4rem;
  border-radius: 1rem;
  background: var(--bg-elev);
  color: var(--accent);
  font-size: 0.75em;
  white-space: nowrap;
}
.bubble-ttl {
  display: inline-flex;
  align-items: center;
  margin-right: 0.25rem;
  vertical-align: middle;
}
.ttl-now {
  margin-left: 0.4rem;
}
.saved-view,
.saved-sub {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.saved-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0.8rem;
}
.saved-dialogs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.saved-dialog {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 0.4rem;
  padding: 0.35rem 0.4rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.saved-dialog:hover {
  background: var(--bg-elev);
}
.saved-dialog-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.saved-dialog-name,
.saved-dialog-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inline-more,
.inline-switch {
  align-self: center;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--link);
  font: inherit;
  cursor: pointer;
}

.saved-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.saved-head-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
  cursor: pointer;
}
.send-as-item:hover:not(:disabled),
.send-as-item.active {
  background: var(--bg-elev);
}
.send-as-item:disabled {
  opacity: 0.55;
  cursor: default;
}
.send-as-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.send-as-text small {
  color: var(--text-muted);
}

/* Viewing stories (R-Y140): the strip above the chat list, a ring round
   the photo while some are unread, the full-screen viewer. */
.stories-strip {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stories-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.25rem;
  font-size: 0.8rem;
  color: var(--text-subtle);
}
.stories-toggle svg {
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.stories-strip.is-compact .stories-toggle svg {
  transform: rotate(-90deg);
}
.stories-list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.15rem 0.1rem 0.25rem;
  scrollbar-width: thin;
}
.stories-strip.is-compact .stories-list {
  gap: 0.25rem;
}
.story-peer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: none;
  width: 3.9rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
.stories-strip.is-compact .story-peer {
  width: auto;
  margin-inline-end: -0.45rem;
}
.story-ring {
  display: inline-grid;
  padding: 2px;
  border-radius: 50%;
  background: var(--border);
}
.story-peer.has-unread .story-ring {
  background: linear-gradient(135deg, #34c759, var(--link));
}
.story-ring .story-avatar {
  width: 3.1rem;
  height: 3.1rem;
  border: 2px solid var(--bg);
  box-sizing: content-box;
}
.stories-strip.is-compact .story-ring .story-avatar {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.65rem;
}
.story-peer-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-item-ring {
  display: inline-flex;
  flex: none;
  border-radius: 50%;
  cursor: pointer;
}
.chat-item.has-story .chat-item-ring > .avatar {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--border);
}
.chat-item.has-story.is-unread .chat-item-ring > .avatar {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px #34c759;
}
.story-viewer {
  position: fixed;
  inset: 0;
  /* Above the sticky header (2001) and the tutorial overlay (2000). */
  z-index: 2500;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.92);
}
.story-frame {
  position: relative;
  height: min(100dvh, 960px);
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
  border-radius: var(--radius);
  background: #111;
  color: #fff;
}
.story-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.story-bars {
  position: absolute;
  inset: 0.5rem 0.5rem auto;
  z-index: 3;
  display: flex;
  gap: 3px;
}
.story-bar {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
}
.story-bar > i {
  display: block;
  height: 100%;
  background: #fff;
}
.story-head {
  position: absolute;
  inset: 1.1rem 0.5rem auto;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.story-head .story-head-avatar {
  width: 2.2rem;
  height: 2.2rem;
}
.story-head-name {
  font-weight: 600;
}
.story-head-date {
  font-size: 0.8rem;
  opacity: 0.8;
}
.story-head-space {
  flex: 1;
}
.story-btn {
  color: #fff;
}
.story-zone {
  position: absolute;
  top: 3.6rem;
  bottom: 0;
  z-index: 1;
  width: 50%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.story-zone.is-left {
  left: 0;
}
.story-zone.is-right {
  right: 0;
}
.story-caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  max-height: 40%;
  overflow-y: auto;
  padding: 2rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.story-text {
  position: absolute;
  inset: 40% 1rem auto;
  z-index: 2;
  text-align: center;
  opacity: 0.85;
  padding: 0.3rem 0.75rem;
  background: var(--bg-active);
  border-top: 1px solid var(--border);
}
.link-preview-line {
  flex: none;
  align-self: stretch;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.link-preview-photo {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 6px;
  object-fit: cover;
}
.link-preview-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
}
.link-preview-body > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.link-preview-site {
  color: var(--accent);
  font-weight: 600;
}
.link-preview-text {
  color: var(--text-muted);
}
.link-preview-more,
.link-preview-option {
  flex: none;
  background: transparent;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  padding: 0.1rem 0.4rem;
}
.link-preview-more:hover,
.link-preview-option:hover {
  color: var(--text);
}
.link-preview-options {
  flex-basis: 100%;
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
}

/* Message effects in private chats (R-Y149). */
.bubble-effect {
  display: inline-block;
  margin-right: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
span.bubble-effect {
  cursor: inherit;
}
.effect-panel {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  z-index: 60;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: 0 4px 16px var(--shadow);
}
.effect-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  color: var(--text-subtle);
  font-size: 0.85em;
}
.effect-panel-close {
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.2em;
  cursor: pointer;
}
.effect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  gap: 0.25rem;
}
.effect-choice {
  position: relative;
  padding: 0.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bg-active);
  font-size: 1.4rem;
  line-height: 1.2;
  cursor: pointer;
}
.effect-choice:hover:not(:disabled) {
  border-color: var(--accent);
}
.effect-choice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.effect-choice .icon {
  position: absolute;
  right: 2px;
  bottom: 2px;
}
.effect-wait {
  padding: 0.5rem;
  color: var(--text-subtle);
}
.effect-burst {
  position: fixed;
  z-index: 70;
  width: 0;
  height: 0;
  pointer-events: none;
}
.effect-piece {
  position: absolute;
  font-size: var(--size, 1.4rem);
  opacity: 0;
  animation: effect-rise 1.4s ease-out var(--delay, 0ms) forwards;
}
@keyframes effect-rise {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.5);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, -160px)) scale(1.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .effect-burst {
    display: none;
  }
}

/* Editing a message in the box (R-Y146): the reply bar's look, a pencil
   and two lines (the title, then the text), the accent on the pencil. */
.composer-edit-bar {
  align-items: center;
}
.composer-edit-bar > svg {
  flex: none;
  color: var(--accent);
}
/* Story interactions (R-Y148): the reply box and the reactions under a
   story, the views of one's own, the menu, the delete question. */
.story-frame.has-foot .story-caption {
  inset: auto 0 3.4rem;
}
.story-foot,
.story-own {
  position: absolute;
  inset: auto 0 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.55);
}
.story-reply {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.story-reply-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
}
.story-reply-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.story-note {
  position: absolute;
  inset: auto 0 100%;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
.story-react {
  position: relative;
  display: flex;
  align-items: center;
}
.story-heart.is-on {
  color: #ff4d6d;
}
.story-react-emoji {
  font-size: 1.2rem;
  line-height: 1;
}
.story-picker {
  position: absolute;
  inset: auto 0 100% auto;
  display: flex;
  gap: 0.1rem;
  margin-bottom: 0.4rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--bg-elev);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.story-picker-item {
  padding: 0.2rem 0.3rem;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.story-picker-item.is-on {
  background: var(--bg-active);
}
.story-views,
.story-more {
  color: #fff;
}
.story-views-reactions {
  color: #fff;
  font-size: 0.9rem;
}
.story-menu {
  position: absolute;
  inset: 3.4rem 0.5rem auto auto;
  z-index: 6;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
}
.story-viewers {
  position: absolute;
  inset: 20% 0 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-elev);
  color: var(--text);
}
.story-viewers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.story-viewers-head .story-btn {
  color: var(--text);
}
.story-viewers-list {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.story-viewers-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.8rem;
}
.story-viewers .story-viewer-avatar {
  width: 2.2rem;
  height: 2.2rem;
}
.story-viewer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-viewer-date {
  color: var(--text-muted);
  font-size: 0.75rem;
}
.story-viewer-reaction {
  font-size: 1.2rem;
}
.story-viewers .story-note {
  position: static;
  color: var(--text-muted);
  background: none;
}
.story-viewers .story-more {
  color: var(--accent);
}
.story-confirm {
  position: absolute;
  inset: 50% 1rem auto;
  z-index: 8;
  transform: translateY(-50%);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
}
.story-confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.stories-hidden-toggle {
  margin-inline-start: 0.5rem;
}

/* R-Y151: reaction tags of Saved Messages, the default timer. */
.saved-tags {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.saved-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.saved-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--bg-elev);
  color: inherit;
  cursor: pointer;
}
.saved-tag.active {
  border-color: var(--accent);
  color: var(--accent);
}
.saved-tag-big {
  margin: 0;
  font-size: 2rem;
}
.privacy-ttl .admin-body {
  padding-top: 0.4rem;
}
[data-dialog='privacy'] .chat-form-dialog {
  max-height: 90vh;
  overflow-y: auto;
}

/* Round video messages (R-Y150): playing in a circle, and recording. */
.bubble-round {
  transition: transform 0.2s ease;
}
.bubble-round.playing {
  transform: scale(1.08);
  z-index: 1;
}
.bubble-round .round-ring,
.round-record .round-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.round-ring circle {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
@media (max-width: 480px) {
  .bubble-round {
    width: 12rem;
    height: 12rem;
  }
}
.round-switch {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.round-switch:hover {
  color: var(--accent);
}
.round-record {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.45);
}
.round-record-circle {
  position: relative;
  flex: none;
  width: min(15rem, 70vw);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #000;
}
.round-live {
  position: absolute;
  inset: 0;
}
.round-live canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.round-live canvas {
  transform: scaleX(-1);
}
.round-record-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text);
}
.round-time {
  font-variant-numeric: tabular-nums;
}
.round-send {
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}

/* Managing a forum's topics (R-Y153): the "+" tab, colours, icons, the
   closed topic's bar and the Topics switch. */
.chat-topic-new {
  font-size: 1.1rem;
  font-weight: 600;
}
.topic-admin-error {
  margin: 0;
  padding: 0.3rem 0.75rem;
  color: var(--danger, #d33);
  font-size: 0.85rem;
}
.topic-colors,
.topic-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.topic-icons {
  max-height: 9rem;
  overflow-y: auto;
}
.topic-color {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.topic-color.is-selected {
  border-color: var(--text, currentColor);
}
.topic-icon-pick {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
}
.topic-icon-pick.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft, var(--bg-active));
}
.topic-closed-bar {
  flex: none;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-muted);
  text-align: center;
}
.forum-toggle {
  margin-top: 0.5rem;
}

/* Invite links and join requests (R-Y152): the slim bar under the
   header, the requests list and the links screen. */
.requests-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.4rem 0.8rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  flex: none;
}
.requests-bar-wrap {
  flex: none;
}
.requests-faces {
  display: inline-flex;
}
.requests-face {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.4rem;
  font-size: 0.6rem;
  border: 2px solid var(--bg-elev);
}
.requests-face:first-child {
  margin-left: 0;
}
.requests-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0;
}
.requests-avatar {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
}
.requests-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.requests-about {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
  color: var(--text-muted);
}
.requests-buttons,
.requests-all,
.links-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.requests-all {
  margin-bottom: 0.4rem;
}
.links-primary {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
.links-open {
  display: flex;
  flex: 1 1 10rem;
  flex-direction: column;
  align-items: flex-start;
  border: none;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.links-field {
}

/* Notification settings (R-Y157): Settings sections and a chat's dialog. */
.telegram-notify .notify-scope,
.telegram-notify .notify-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
}
.notify-exceptions-toggle {
  align-self: flex-start;
}
.notify-exceptions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.links-revoked {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Posting a story (R-Y156): the "+" badge on one's own avatar, a ring
   that fills while the story uploads, and the composer. */
.story-ring {
  position: relative;
}
.story-add-badge {
  position: absolute;
  inset: auto 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--link);
  color: #fff;
}
.story-peer.is-posting .story-ring {
  background: conic-gradient(
    var(--link) var(--story-progress, 0%),
    var(--border) 0
  );
  animation: story-posting-pulse 1.2s ease-in-out infinite;
}
@keyframes story-posting-pulse {
  50% {
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-peer.is-posting .story-ring {
    animation: none;
  }
}
.story-compose {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.92);
}
.story-compose-body {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  max-width: 100vw;
  max-height: 100dvh;
}
.story-compose-frame {
  position: relative;
  height: min(100dvh, 960px);
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
  border-radius: var(--radius);
  background: #111;
  color: #fff;
}
.story-compose-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.story-compose-caption {
  position: absolute;
  inset: auto 0.5rem 1.6rem;
  resize: none;
  border: 0;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  padding: 0.5rem 0.6rem;
}
.story-compose-count {
  position: absolute;
  inset: auto 0.9rem 0.5rem auto;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
}
.story-compose-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(22rem, 100vw);
  max-height: 100dvh;
  overflow-y: auto;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
}
.story-compose-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.story-compose-group legend {
  margin-bottom: 0.25rem;
  color: var(--text-subtle);
  font-size: 0.8rem;
}
.story-compose-choice,
.story-compose-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.story-compose-btns {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: auto;
}
.story-post-overlay {
  z-index: 2700;
}
@media (max-width: 700px) {
  .story-compose-body {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    height: 100dvh;
  }
  .story-compose-frame {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    align-self: center;
  }
  .story-compose-panel {
    flex: none;
    width: 100%;
    max-height: 45dvh;
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* R-Y154: the forward waiting over the message box, and its menu. */
.forward-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  background: var(--bg-active);
  border-top: 1px solid var(--border);
  color: var(--accent);
}
.forward-bar-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.forward-bar-title {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}
.forward-bar-names {
  color: var(--text-muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forward-bar-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--text-subtle);
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}
.forward-bar-button:hover {
  color: var(--text);
}
.forward-bar-menu {
  position: absolute;
  right: 0.5rem;
  bottom: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.25rem 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.forward-bar-item {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0.45rem 0.9rem;
  text-align: left;
  cursor: pointer;
}
.forward-bar-item:hover,
.forward-bar-item:focus {
  background: var(--bg-active);
  outline: none;
}

/* Chat backgrounds (R-Y155): a layer behind the messages, drawn from the
   custom properties --wp-gradient, --wp-image, --wp-pattern,
   --wp-pattern-opacity and --wp-pattern-invert. It is its own absolutely
   positioned layer, not background-attachment: fixed, which WebKit
   repaints on every scroll. */
/* Its own stacking context, so the list's z-index stays under the
   composer's bars (the forward bar, the reply bar) that overlap it. */
.chat-wall {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.chat-wall > .chat-scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
}
.chat-wall-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: transparent;
  background-image: var(--wp-image, var(--wp-gradient, none));
  background-position: center;
  background-size: cover;
}
.chat-wall-layer::before,
.chat-wall-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* The pattern over the colours; a negative intensity is a dark one,
   drawn light. */
.chat-wall-layer[data-wall='pattern']::after {
  background-image: var(--wp-pattern, none);
  background-size: 420px auto;
  background-position: center;
  opacity: var(--wp-pattern-opacity, 0.4);
  filter: invert(var(--wp-pattern-invert, 0));
}
/* In the dark theme a picture is dimmed a little, as Desktop does. */
:root[data-theme='dark'] .chat-wall-layer[data-wall='image']::before {
  background: rgb(0 0 0 / 35%);
}
:root[data-theme='dark'] .chat-wall-layer[data-wall='pattern'],
:root[data-theme='dark'] .chat-wall-layer[data-wall='colors'] {
  filter: brightness(0.8);
}
.chat-background .wallpaper-grid-wrap {
  margin-top: 0.5rem;
}
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
}
.wallpaper-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
}
.wallpaper-tile.is-selected {
  border-color: var(--accent);
}
.wallpaper-tile:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.wallpaper-plain-label {
  padding: 0.25rem;
  font-size: 0.8rem;
  text-align: center;
}

.notify-exception {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
}
.notify-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.notify-mutes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Groups in common (R-Y158). */
.common-chat {
}

/* The recent calls list (R-Y163). */
.calls-scroll {
  max-height: min(56vh, 460px);
  overflow-y: auto;
}
.call-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.35rem 0.2rem;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.common-chat:hover {
  background: var(--bg-elev);
}
.common-chat-text {
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.call-row:hover,
.call-row:focus-visible {
  background: var(--bg-elev);
}
.call-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.common-chat-text strong {
}

.call-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Which reactions a chat allows (R-Y160). */
.reactions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  gap: 0.25rem;
  max-height: 16rem;
  overflow-y: auto;
}

.reactions-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  font-size: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  cursor: pointer;
}

.reactions-cell.is-on {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.reactions-cell input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Reordering the pinned chats by drag (R-Y159): the lifted row follows the
   pointer, the rows it passes slide aside and leave its place open. */
.chat-list .chat-item[data-pinned] {
  position: relative;
  transition: transform 0.15s ease;
}
.chat-list.is-pin-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}
.chat-list.is-pin-dragging .chat-item {
  cursor: grabbing;
}
.chat-list .chat-item.is-lifted {
  transition: none;
  background: var(--bg-elev);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.28);
  outline: 1px solid var(--accent);
  opacity: 0.96;
}

.call-row.is-missed .call-name,
.call-arrow.is-missed {
  color: var(--danger);
}
.call-arrow {
  font-weight: 600;
}
.call-arrow.is-in:not(.is-missed),
.call-arrow.is-out {
  color: var(--accent);
}

/* Emoji status (R-Y162): a small custom emoji after a name, the profile
   card's row and the picker. */
.emoji-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-inline-start: 0.25rem;
  font-size: 1em;
}
.profile-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.4rem;
}
.account-deleted-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--text-muted);
}
.avatar.deleted-account-avatar {
  background: var(--bg-active);
  color: var(--text-muted);
}
.profile-user-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.profile-user-id dt {
  color: var(--text-muted);
}
.profile-user-id dd {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
}
.profile-user-id code {
  user-select: all;
  overflow-wrap: anywhere;
}
.profile-name-row .profile-name {
  margin-top: 0;
}
.emoji-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
.emoji-status-duration {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.emoji-status-locked {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
}
.emoji-status-section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.emoji-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
  gap: 0.25rem;
  max-height: 10rem;
  overflow-y: auto;
}
.emoji-status-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.2rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.emoji-status-pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The effect panel over the files' box (R-Y161). */
.effect-panel.is-over-dialog {
  z-index: 2100;
}

/* A group's and channel's settings (R-Y165). */
.settings-row {
  align-items: flex-start;
}
.settings-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.settings-discussion {
}

/* Creating and editing chat folders (R-Y164). */
.folder-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}
.folder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.folder-row-name {
  flex: 1 1 8rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.folder-row-btn,
.folder-choose {
  background: var(--bg-active);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}
.folder-row-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.folder-suggested h4 {
  margin: 0.8rem 0 0.4rem;
}
.folder-section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
}
.settings-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.settings-groups {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.settings-groups button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
}
.folder-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.folder-icon {
  min-width: 2.2rem;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.2rem 0.4rem;
  cursor: pointer;
}
.folder-icon.is-selected {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.folder-menu {
  position: fixed;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px var(--shadow);
  padding: 0.25rem;
}
.folder-menu-item {
  background: none;
  color: var(--text);
  border: 0;
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
  text-align: left;
  cursor: pointer;
}
.folder-menu-item:hover,
.folder-menu-item:focus-visible {
  background: var(--bg-active);
}
.chat-form-dialog:has(.folder-section) {
  max-height: 90vh;
  overflow-y: auto;
}

/* Statistics of channels and groups (R-Y167). */
.reader-panel[data-dialog='stats'] {
  width: min(760px, 96vw);
  max-height: min(88vh, 900px);
}
.stats-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}
.stats-figure {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stats-figure strong {
  font-size: 1.25rem;
}
.stats-change[data-change='up'] {
  color: var(--accent);
}
.stats-change[data-change='down'] {
  color: var(--danger);
}
.stats-change[data-change='same'] {
  color: var(--text-subtle);
}
.stats-graph {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 3rem;
}
.stats-graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.stats-chart-box {
  position: relative;
}
.stats-chart svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
  cursor: crosshair;
}
.stats-axes line {
  stroke: var(--border);
  stroke-width: 1;
}
.stats-axes text {
  fill: var(--text-subtle);
  font-size: 10px;
}
.stats-cursor {
  stroke: var(--text-subtle);
  stroke-dasharray: 3 3;
}
.stats-tooltip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  z-index: 2;
  min-width: 9rem;
  padding: 0.4rem 0.55rem;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px var(--shadow);
  font-size: 0.8rem;
  pointer-events: none;
}
.stats-tooltip.is-right {
  transform: translateX(-100%);
}
.stats-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.stats-tooltip-row i {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}
.stats-tooltip-row span {
  flex: 1;
}
.stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.stats-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--series, var(--border));
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
}
.stats-legend-item::before {
  content: '';
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid var(--series, var(--accent));
  border-radius: 50%;
}
.stats-legend-item[aria-pressed='true']::before {
  background: var(--series, var(--accent));
}
.stats-legend-item[aria-pressed='false'] {
  opacity: 0.6;
}
.stats-shares {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.stats-share {
  display: grid;
  grid-template-columns: 7rem 1fr 3.5rem 4rem;
  align-items: center;
  gap: 0.5rem;
}
.stats-share-bar {
  height: 0.6rem;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: hidden;
}
.stats-share-bar i {
  display: block;
  height: 100%;
}
.stats-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.stats-post,
.stats-person {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 0.6rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--border);
}
.stats-post-text {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The pinned messages list, similar channels and fact checks (R-Y166). */
.chat-pinned-wrap {
  display: flex;
  flex: none;
  align-items: stretch;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.chat-pinned-wrap > .chat-pinned-bar {
  flex: 1;
  min-width: 0;
  width: auto;
  border-bottom: 0;
}
.chat-pinned-side {
  flex: none;
  align-self: center;
  margin-right: 0.5rem;
  color: var(--text-muted);
}
.pinned-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.pinned-item-go {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  height: auto;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pinned-item-go:hover {
  background: var(--bg-active);
}
.pinned-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.pinned-item-unpin {
  flex: none;
  height: auto;
  padding: 0.25rem 0.6rem;
  color: var(--accent);
}
.pinned-list-foot {
  width: 100%;
  margin-top: 0.75rem;
}
.similar-title {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.similar-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.similar-channel {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 5.5rem;
  height: auto;
  padding: 0.4rem 0.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  text-align: center;
  cursor: pointer;
}
.similar-channel:hover {
  background: var(--bg-active);
}
.similar-channel-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fact-check {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--chat-accent, var(--accent));
  border-radius: 0.3rem;
  background: var(--bg-elev);
  font-size: 0.85rem;
}
.fact-check-title {
  color: var(--chat-accent, var(--accent));
}
.fact-check-pending {
  display: block;
  min-height: 1px;
}

/* R-Y168: a bot's mini app, a window as Telegram Desktop's (about 384 by
   640, resizable), with the app's own buttons at the bottom. */
.web-app-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.web-app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 384px;
  height: 640px;
  min-width: 280px;
  min-height: 320px;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  resize: both;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px var(--shadow);
}
.web-app.is-expanded {
  height: 92vh;
}
.web-app-header {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.web-app-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.web-app-more {
  font-size: 1.3rem;
  line-height: 1;
}
.web-app-menu {
  position: absolute;
  top: 100%;
  right: 0.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  padding: 0.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px var(--shadow);
}
.web-app-menu button {
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.web-app-menu button:hover {
  background: var(--bg-active);
}
.web-app-body {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--bg-elev);
}
.web-app-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.web-app-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  pointer-events: none;
}
.web-app-loading.is-failed {
  flex-direction: column;
  gap: var(--control-gap);
  padding: 1.25rem;
  text-align: center;
  pointer-events: auto;
}
.web-app-loading.is-failed .row {
  justify-content: center;
}
.web-app-spinner {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: web-app-spin 0.8s linear infinite;
}
@keyframes web-app-spin {
  to {
    transform: rotate(360deg);
  }
}
.web-app-bottom {
  display: flex;
  flex: none;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
}
.web-app-bottom.is-column {
  flex-direction: column;
}
.web-app-button {
  flex: 1;
  min-height: 2.75rem;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  background: var(--accent-fill);
  color: #fff;
  cursor: pointer;
}
.web-app-button.is-secondary {
  background: var(--bg-active);
  color: var(--text);
}
.web-app-button:disabled {
  opacity: 0.6;
  cursor: default;
}
.web-app-popup-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.45);
}
.web-app-popup {
  width: 100%;
  max-width: 20rem;
  padding: 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.web-app-popup h4 {
  margin: 0 0 0.4rem;
}
.web-app-popup p {
  margin: 0 0 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.web-app-popup-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}
.web-app-popup-buttons button.is-destructive {
  color: var(--danger);
}

/* Settings → Stickers and emoji, close friends, add contact (R-Y169). */
.sticker-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.sticker-tab {
  flex: 1;
}
.sticker-tab.active {
  background: var(--bg-active);
  border-color: var(--accent);
}
.sticker-setting-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 50vh;
  overflow-y: auto;
}
.sticker-setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  list-style: none;
}
.sticker-setting-cover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  background: var(--bg-elev);
  border-radius: var(--radius);
  overflow: hidden;
}
.sticker-setting-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sticker-setting-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 6rem;
}
.sticker-setting-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.privacy-close-friends {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

/* Channel boosts in the info column (R-Y173). */
.boosts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.boosts-level {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.boosts-bar {
  height: 6px;
  border-radius: 3px;
}
.boosts-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}
.boosts-ask {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.boosters-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.boosters-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

/* Chat themes and several usernames (R-Y170). */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.5rem;
}
.theme-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
}
.theme-tile.is-selected {
  border-color: var(--accent);
}
.theme-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-swatch {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  height: 2.4rem;
  padding: 0.25rem;
  border-radius: 6px;
  background: var(--swatch-accent, var(--bg-active));
}
.theme-swatch-bubble {
  width: 60%;
  height: 0.9rem;
  border-radius: 6px;
  background: var(--swatch-bubble, transparent);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 55%);
}
.theme-tile-emoji {
  font-size: 1.3rem;
}
.usernames-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.username-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
}
.username-row.is-inactive {
  opacity: 0.7;
}
.username-row[draggable='true'] {
  cursor: grab;
}
.username-link {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--link);
}
.username-moves {
  display: inline-flex;
  gap: 0.25rem;
}
.profile-usernames {
  margin-top: 0.5rem;
}

/* A forum as messages or as topics (R-Y171): the header's ⋯ menu. */
.forum-view-menu {
  display: inline-flex;
}
.forum-view-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 20;
  min-width: 11rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  box-shadow: 0 10px 30px var(--shadow);
}
.forum-view-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.forum-view-item:hover {
  background: var(--border);
}
/* Archive settings, websites, pinned Saved Messages chats and the stories
   strip's menu (R-Y174). */
.privacy-switch {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.privacy-switch .meta {
  grid-column: 2;
}
.saved-dialog-item {
  display: flex;
  align-items: center;
}
.saved-dialog-item .saved-dialog {
  flex: 1 1 auto;
  min-width: 0;
}
.saved-pin {
  flex: none;
  opacity: 0.55;
}
.saved-dialog-item:hover .saved-pin,
.saved-dialog-item.is-pinned .saved-pin,
.saved-pin:focus-visible {
  opacity: 1;
}
.saved-pinned-mark {
  display: inline-flex;
  color: var(--text-muted);
}
.stories-menu li {
  cursor: pointer;
}

/* Dragging folders to reorder them, and shared folders (R-Y172). */
.chat-filters .chat-filter[data-folder-tab],
.folder-list .folder-row[data-folder-id] {
  position: relative;
  transition: transform 0.15s ease;
  touch-action: pan-x;
}
.folder-list .folder-row[data-folder-id] {
  touch-action: pan-y;
  cursor: grab;
}
.chat-filters.is-pin-dragging,
.folder-list.is-pin-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}
.chat-filters .chat-filter.is-lifted,
.folder-list .folder-row.is-lifted {
  transition: none;
  background: var(--bg-elev);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.28);
  outline: 1px solid var(--accent);
  opacity: 0.96;
}
.share-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}
.share-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.share-link-main {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.share-link-url {
  overflow-wrap: anywhere;
}
.share-link-btns,
.share-form-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.share-form {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  gap: 0.4rem;
}
.folder-share-btn {
  align-self: flex-start;
}

/* Transcribing voice and video notes (R-Y175): "→A" beside the waveform
   or the circle, the text under the message. */
.transcribable {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.round-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.audio-transcribe {
  flex: none;
  min-width: 2rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.audio-transcribe.on {
  background: var(--accent-bg);
  color: var(--accent);
}
.audio-transcribe:disabled {
  opacity: 0.6;
  cursor: progress;
}
.transcript {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 18rem;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.transcript[data-transcript='pending'] .transcript-text {
  opacity: 0.8;
}
.transcript-pending {
  animation: transcript-blink 1s ease-in-out infinite;
}
@keyframes transcript-blink {
  50% {
    opacity: 0.2;
  }
}
.transcript-error {
  color: var(--danger, #f85149);
}
.transcript-trial {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.transcript-rate button {
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
}
.transcript-rate button.on {
  opacity: 1;
}

/* Telegram Stars, paid reactions and paid media (R-Y176). */
.paid-portal {
  display: contents;
}
.bubble-reaction-paid {
  font: inherit;
  font-size: 0.82rem;
  color: inherit;
  cursor: pointer;
}
.bubble-reaction-paid.mine {
  border-color: var(--accent-fill, var(--chat-accent));
}
.bubble-reaction-paid:disabled {
  cursor: default;
}
[data-dialog='paid-reaction'] input[type='range'] {
  width: 100%;
}
[data-dialog='paid-reaction'] input[type='number'] {
  width: 8rem;
}
.paid-top {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}
.paid-media {
  position: relative;
  width: min(320px, 100%);
  overflow: hidden;
  border-radius: 10px;
}
.paid-previews,
.paid-open {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.paid-preview {
  display: block;
  background: var(--bg-active);
  overflow: hidden;
}
.paid-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px);
  transform: scale(1.2);
}
.paid-unlock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: var(--control-pad);
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.paid-item {
  position: relative;
  display: block;
  width: calc(50% - 2px);
  aspect-ratio: 1;
  background: var(--bg-active);
  overflow: hidden;
}
.paid-open .paid-item:only-child {
  width: 100%;
}
.paid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paid-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
}
.stars-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.stars-balance {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}
.stars-balance strong {
  font-size: 1.4rem;
}
.stars-tabs {
  display: flex;
  gap: 0.3rem;
}
.stars-tabs button.active {
  background: var(--bg-active);
  border-color: var(--accent-fill, var(--chat-accent));
}
.stars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.stars-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}
.stars-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stars-amount {
  font-weight: 600;
  white-space: nowrap;
}
.stars-amount.in {
  color: var(--accent);
}
.stars-amount.out {
  color: var(--danger);
}
.stars-tag {
  align-self: flex-start;
  font-size: 0.75rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--bg-active);
}
.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
}
.gift-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem;
  font-size: 0.75rem;
  text-align: center;
}
.gift-cell .sticker-picture {
  width: 4rem;
  height: 4rem;
}
.gift-cell.hidden-gift {
  opacity: 0.55;
}
.gift-stars {
  font-weight: 600;
}
.gift-from {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gift-big .sticker-picture {
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 0 auto;
}
.gift-text {
  white-space: pre-wrap;
}
/* Two-step verification, self-destruct, sensitive content and per-session
   settings in Privacy and Security (R-Y177). */
.security-status,
.security-form,
.security-code,
.security-choice,
.security-session-switches {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.3rem 0;
}
.security-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.3rem 0;
}
.security-choice {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* Profile extras (R-Y178): birthday, colours, personal channel. */
.birthday-mark {
  margin-inline-start: 0.25em;
}
.profile-birthday {
  margin: 0.25rem 0 0;
  font-size: 0.9em;
}
.profile-head.profile-tinted {
  color: #fff;
  border-radius: 12px;
  padding: 0.75rem;
}
.profile-head.profile-tinted .meta,
.profile-head.profile-tinted a {
  color: rgba(255, 255, 255, 0.85);
}
.personal-channel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  text-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
}
.personal-channel-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.personal-channel-text {
  display: flex;
  flex-direction: column;
}
.personal-channel-post {
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.birthdays-block {
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.birthdays-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.birthday-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.25rem;
  background: none;
  border: 0;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.birthday-item .meta {
  margin-inline-start: auto;
}
.extras-birthday,
.extras-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem;
}
.extras-swatches,
.extras-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
}
.extras-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.extras-swatch.chosen,
.extras-emojis .chosen,
.extras-swatches .chosen {
  outline: 2px solid var(--accent);
}
.extras-preview {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: var(--bg-elev);
}
.extras-preview-quote {
  border-inline-start: 3px solid var(--peer-color, var(--accent));
  display: flex;
  flex-direction: column;
}
.extras-quote-name {
  color: var(--peer-color, var(--accent));
}
.extras-preview-profile {
  color: #fff;
  min-height: 3rem;
}

/* Telegram Business: quick replies, greeting and away messages (R-Y179). */
.quick-shortcuts,
.quick-messages,
.business-sections {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}
.quick-row,
.quick-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}
.quick-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-align: left;
}
.quick-preview,
.quick-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.quick-form,
.quick-shortcut,
.quick-rename,
.quick-add,
.quick-delete,
.business-recipients,
.business-schedule,
.business-shortcut {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.quick-rename,
.quick-delete {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.business-recipients,
.business-schedule {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
}
.business-section {
  width: 100%;
  text-align: left;
  margin-bottom: 0.4rem;
}
.business-people {
  max-height: 12rem;
  overflow-y: auto;
}
.bot-commands [data-quick-error] {
  margin: 0;
  padding: 0.4rem 0.8rem;
}
[data-dialog^='business-'] .chat-form-dialog {
  max-height: 90vh;
  overflow-y: auto;
}

/* Hashtag search, live view counters and picture-in-picture (R-Y182). */
.msg-tag-search {
  cursor: pointer;
}
.msg-tag-search:hover,
.msg-tag-search:focus-visible {
  text-decoration: underline;
}
.tag-results {
  display: flex;
  flex-direction: column;
}
.bubble-views,
.bubble-forwards {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.bubble-views {
  gap: 0.25rem;
  margin-right: 0.15rem;
}
.media-pip {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}
.media-pip:hover,
.media-pip.active {
  background: rgba(0, 0, 0, 0.8);
}
.bubble-round .media-pip {
  top: 0.9rem;
  right: 50%;
  transform: translateX(50%);
}
.pip-keeper {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

/* R-Y180: Telegram Business (opening hours, location, intro, chat links,
   chatbots) and folder tags. */
.business-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.business-menu-item {
  width: 100%;
  text-align: left;
}
.business-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.business-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--border);
}
.business-day-name {
  min-width: 7.5rem;
  font-weight: 500;
}
.business-range {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.business-add {
  font-size: 0.8rem;
}
.business-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  max-height: 14rem;
  overflow-y: auto;
  margin-top: 0.4rem;
}
.business-stickers .sticker-cell,
.business-sticker-now {
  width: 4.5rem;
  height: 4.5rem;
  display: inline-flex;
}
.business-sticker {
}

/* Notification sounds and automatic media download (R-Y181) */
.media-play.media-download {
  width: auto;
  min-width: 3.4rem;
  height: auto;
  min-height: 3.4rem;
  padding: 0.4rem 0.7rem;
  gap: 0.15rem;
  border-radius: 1.2rem;
  grid-auto-flow: row;
  text-align: center;
}
.media-size {
  font-size: 0.72rem;
  line-height: 1;
}
.bubble-photo[data-download='manual'],
.bubble-round[data-download='manual'] {
  cursor: pointer;
}
.bubble-doc .file-size[data-download='manual']::before {
  content: '\2193 ';
}
.notify-sound {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.business-place-preview {
  max-width: 300px;
}
.business-links {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.business-link {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.business-link-name {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.business-link-url {
  overflow-wrap: anywhere;
}
.business-link-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.business-disconnect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.business-bot-bar {
  flex-wrap: wrap;
}
.business-profile {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.business-hours-line {
  width: 100%;
  text-align: left;
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}
.business-open {
  color: #3fb950;
}
.business-closed {
  color: var(--danger);
}
.business-week {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.business-week li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.business-week li.is-today {
  font-weight: 600;
}
.business-place {
  margin: 0;
}
.business-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: auto;
  padding: 1rem 1.25rem;
  max-width: 20rem;
  text-align: center;
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.business-intro-sticker {
  display: inline-flex;
  width: 7rem;
  height: 7rem;
}
.business-intro p {
  margin: 0;
}
.folder-tags {
  display: inline-flex;
  gap: 0.2rem;
  flex: none;
}
.folder-tag,
.folder-color {
  --tag: #4493f8;
}
.folder-tag-0 {
  --tag: #e5534b;
}
.folder-tag-1 {
  --tag: #e0823d;
}
.folder-tag-2 {
  --tag: #986ee2;
}
.folder-tag-3 {
  --tag: #57ab5a;
}
.folder-tag-4 {
  --tag: #39c5cf;
}
.folder-tag-5 {
  --tag: #4493f8;
}
.folder-tag-6 {
  --tag: #e275ad;
}
.folder-tag {
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.3rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.15rem;
  text-transform: uppercase;
  color: var(--tag);
  background: color-mix(in srgb, var(--tag) 18%, transparent);
}
.folder-colors {
  display: flex;
  gap: 0.35rem;
  margin: 0.4rem 0;
}
.folder-color {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--tag);
  color: var(--text);
}
.folder-color.folder-tag-none {
  background: transparent;
  border-color: var(--border);
}
.folder-color.is-selected {
  border-color: var(--text);
}
.folder-tags-toggle {
  margin: 0.4rem 0 0.8rem;
}

/* Local passcode lock screen and the keyboard shortcuts list (R-Y183). */
.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.lock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: min(22rem, calc(100vw - 2rem));
  padding: 2rem 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.lock-card input {
  width: 100%;
}
.shortcut-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}
.shortcut-keys {
  display: inline-flex;
  gap: 0.25rem;
  white-space: nowrap;
}
.shortcut-keys kbd {
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elev);
  font-size: 0.85em;
}

.notify-sound legend {
  width: 100%;
}
.media-settings .media-limit,
.scale-settings .media-limit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.ringtone-list {
  margin: 0.4rem 0;
  padding: 0;
  list-style: none;
}
.ringtone-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.ringtone-row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The photo editor of the send box (R-Y187). */
.attach-edit {
  margin-left: auto;
}
.attach-list.is-photos .attach-edit {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.photo-editor-overlay {
  z-index: 2100;
}
.photo-editor {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  width: min(760px, calc(100vw - 1rem));
  max-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.photo-editor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.photo-editor-btn.is-active {
  background: var(--accent-bg);
  color: var(--link);
}
.photo-editor-btn:disabled {
  opacity: 0.4;
}
.photo-editor-stage {
  display: flex;
  justify-content: center;
}
.photo-editor-box {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  background: var(--bg-active);
}
.photo-editor-box[data-tool='brush'],
.photo-editor-box[data-tool='marker'],
.photo-editor-box[data-tool='arrow'],
.photo-editor-box[data-tool='eraser'] {
  cursor: crosshair;
}
.photo-editor-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-editor-crop {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.photo-editor-crop.is-active {
  pointer-events: auto;
  cursor: move;
}
.photo-editor-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.photo-editor-handle.is-nw,
.photo-editor-handle.is-n,
.photo-editor-handle.is-ne {
  top: 0;
}
.photo-editor-handle.is-sw,
.photo-editor-handle.is-s,
.photo-editor-handle.is-se {
  top: 100%;
}
.photo-editor-handle.is-w,
.photo-editor-handle.is-e {
  top: 50%;
}
.photo-editor-handle.is-nw,
.photo-editor-handle.is-w,
.photo-editor-handle.is-sw {
  left: 0;
}
.photo-editor-handle.is-n,
.photo-editor-handle.is-s {
  left: 50%;
}
.photo-editor-handle.is-ne,
.photo-editor-handle.is-e,
.photo-editor-handle.is-se {
  left: 100%;
}
.photo-editor-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.photo-editor-pen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.photo-editor-color,
.photo-editor-size {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.photo-editor-size span {
  border-radius: 50%;
  background: var(--text);
}
.photo-editor-color.is-active,
.photo-editor-size.is-active {
  border-color: var(--link);
}
.photo-editor-ratio {
  font: inherit;
}

/* Stories and music on a profile, sending a gift (R-Y185). */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.35rem;
}
.story-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.story-cell-open {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.story-cell-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-cell.is-top .story-cell-open {
  border-color: var(--accent);
}
.story-cell-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
}
.story-cell-mark {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  font-size: 0.8rem;
}
.story-cell-actions {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.story-cell-actions button {
  padding: 0.1rem 0.25rem;
  font-size: 0.7rem;
}
.story-albums {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.2rem 0 0.5rem;
}
.story-albums button {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
}
.story-albums button.active {
  background: var(--bg-active);
  border-color: var(--accent);
}
.music-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.music-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.music-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gift-cell.picked {
  outline: 2px solid var(--accent);
}
.gift-marks {
  font-size: 0.7rem;
}
[data-dialog='gift-pick'] .gift-grid {
  max-height: 45vh;
  overflow-y: auto;
}

/* Export chat history (R-Y186): the header's ⋯ menu and the dialog. */
.chat-more .chat-menu-list {
  width: auto;
  min-width: 13rem;
  padding: 0.25rem;
}
.chat-more-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 6px;
}

/* Voice chats, video chats and live streams (R-Y188): the bar under the
   top bar and the panel. */
.voice-bar-wrap {
  flex: none;
}
.voice-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 0.9rem;
}
.voice-bar-main {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0.6rem;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-more-item:hover,
.chat-more-item:focus-visible {
  background: var(--bg-hover, rgba(127, 127, 127, 0.15));
}
.export-dialog {
  width: min(460px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
}
.export-form,
.export-progress {
}

/* Giveaways, paid messages, channel auto-translation (R-Y184). */
.paid-send-label {
  align-self: flex-start;
  margin: 0 0.5rem 0.25rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: 0.8rem;
}
.paid-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.giveaway-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 14rem;
}
.giveaway-row small {
  display: block;
}
.giveaway-extra {
  color: var(--text-muted);
}
.giveaway-more {
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--link);
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}
.giveaway-details {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.export-media {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.export-media .pin-dialog-option {
  margin: 0.2rem 0;
}
.export-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9rem;
}
.export-field input,
.export-field select {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
  box-sizing: border-box;
  width: 100%;
}
.export-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.export-progress p {
  margin: 0;
  overflow-wrap: anywhere;
}
.export-bar {
  height: 8px;
  border-radius: 4px;
}

.paid-earnings,
.privacy-paid,
.settings-paid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.settings-paid {
  align-items: flex-start;
}

.voice-bar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.voice-bar-sub {
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-faces {
  display: inline-flex;
  margin-left: auto;
}
.voice-face {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.4rem;
  font-size: 0.6rem;
  border: 2px solid var(--bg-elev);
}
.voice-pill {
  flex: none;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-active);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.voice-join {
  border-color: var(--accent);
  background: var(--accent-fill);
  color: #fff;
}
.voice-leave {
  border-color: var(--danger-fill);
  color: var(--danger);
}
.voice-pill:disabled {
  opacity: 0.6;
  cursor: default;
}
.voice-title {
  margin: 0 0 0.2rem;
}
.voice-count,
.voice-note {
  margin: 0 0 0.6rem;
  color: var(--text-subtle);
  font-size: 0.85rem;
}
.voice-list {
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}
.voice-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
}
.voice-avatar {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
}
.voice-row[data-speaking='true'] .voice-avatar {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.voice-who {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.voice-about {
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-marks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
}
.voice-mark {
  color: var(--text-subtle);
  font-size: 0.72rem;
}
.voice-mark-speaking {
  color: var(--accent);
}
.voice-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.voice-join-as {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

/* The Contacts window and read times in a private chat (R-Y189). */
.contacts-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.contacts-controls .chat-search {
  flex: 1 1 100%;
}
.contacts-sort,
.contacts-add {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.contacts-add {
  margin-left: auto;
}
.contact-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.contact-status.is-online {
  color: var(--accent);
}
.msg-context-menu li.msg-context-info {
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: default;
}
/* R-Y190: a game's card (picture, title, description, Play) and its high
   scores list. */
.bubble-card.game {
  flex-direction: column;
  align-items: stretch;
  max-width: 320px;
}
.game-photo {
  overflow: hidden;
  border-radius: var(--radius);
}
.game-title {
  font-weight: 600;
}
.game-description {
  white-space: pre-wrap;
}
.game-pos {
  flex: none;
  min-width: 1.5rem;
  color: var(--text-subtle);
  text-align: right;
}
.game-score.is-me .member-name {
  font-weight: 600;
}
.game-points {
  flex: none;
}

/* Interface scale and connection proxy (R-Y192). */
.proxy-dialog {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
.proxy-kinds {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.scale-settings input[type='range'] {
  flex: 1;
  min-width: 8rem;
}

/* Channel direct messages and suggested posts (R-Y191) */
.dm-threads {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dm-thread-row {
  width: 100%;
  text-align: left;
  gap: 0.6rem;
}
.dm-thread-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.dm-thread-last {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-thread-date {
  flex: none;
}
.dm-back {
  margin-bottom: 0.5rem;
}
.dm-thread {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dm-messages {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 22rem;
  overflow-y: auto;
}
.dm-message {
  align-self: flex-start;
  max-width: 90%;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.dm-message.is-out {
  align-self: flex-end;
  background: var(--accent-bg);
}
.dm-name {
  display: block;
  font-size: 0.85rem;
}
.dm-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dm-time {
  display: block;
  text-align: right;
  font-size: 0.75rem;
}
.dm-service {
  align-self: center;
  color: var(--text-subtle);
  font-size: 0.85rem;
  text-align: center;
}
.dm-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
}
.dm-card[data-dm-card='rejected'] {
  border-left-color: var(--danger);
}
.dm-card-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.dm-card-status {
  font-size: 0.8rem;
  color: var(--text-subtle);
}
.dm-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.dm-ask,
.dm-suggest {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dm-suggest label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dm-composer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dm-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}
.dm-input {
  flex: 1;
  min-width: 0;
  resize: vertical;
}
.dm-attach-menu {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.dm-attach-item {
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}
.dm-note {
  margin: 0;
}

/* Apps in the search, similar bots, the prepared-message chooser and
   collectible cards (R-Y194). */
.apps-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 14rem;
  overflow-y: auto;
  margin: 0.4rem 0;
  padding: 0.25rem;
}

/* Managing received gifts, unique gifts and gift codes (R-Y193). */
.gift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.gift-confirm {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.apps-title {
  margin: 0;
  padding: 0 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.apps-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.apps-open-chat {
  flex: 1;
  min-width: 0;
}
.apps-open-chat .chat-item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.apps-launch,
.apps-more {
  flex: none;
  height: auto;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-active);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.apps-more {
  align-self: center;
}
button.profile-username.is-collectible {
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--link);
  font: inherit;
  cursor: pointer;
}
.collectible-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.collectible-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.5rem;
}
.collectible-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.collectible-learn {
  align-self: flex-start;
}
.prepared-preview {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid var(--accent);
  border-radius: 0.3rem;
  background: var(--bg-elev);
}
.prepared-filter {
  width: 100%;
  margin-bottom: 0.4rem;
}
.prepared-chats {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.prepared-chat {
  text-align: left;
}

.gift-upgrade .gift-attrs {
  margin: 0.4rem 0;
}
.gift-attr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.gift-pick .contacts-list {
  max-height: 14rem;
  overflow-y: auto;
}
.unique-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--radius);
  text-align: center;
  color: var(--text);
}
.unique-hero strong,
.unique-hero div {
  color: inherit;
}
.gift-code-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}
.service-line .gift-code-open {
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  font-size: 0.8rem;
}

/* Checklist extras, reaction reports, post statistics, Stars revenue
   (R-Y195). */
.todo-done-by {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px 30px;
  font-size: 12px;
}
.todo-add {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.todo-add textarea {
  width: 100%;
  resize: vertical;
}
.todo-add-btns {
  display: flex;
  gap: 8px;
}
.todo-add-open {
  margin-top: 8px;
  align-self: flex-start;
}
.reader-report {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  padding: 8px 12px;
  margin-bottom: 8px;
}
.reader-report-btn {
  margin-left: 8px;
}
.stats-share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  list-style: none;
}
.stats-stars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* Private one-to-one voice calls (R-Y196): the call button in a private
   chat's header, and the call window / incoming notification that floats
   over the page (a portal to the body). */
.chat-call {
  flex: none;
}
.private-call-window {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(20rem, calc(100vw - 2rem));
  padding: 1rem;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 8px 32px var(--shadow);
  text-align: center;
}
.private-call-avatar {
  width: 4rem;
  height: 4rem;
}
.private-call-name {
  font-size: 1.1rem;
}
.private-call-status,
.private-call-clock {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.private-call-key {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.private-call-emoji {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.75rem;
  line-height: 1.2;
}
.private-call-key small,
.private-call-media,
.private-call-window small {
  color: var(--text-subtle);
}
.private-call-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.private-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--control-h);
  padding: 0 0.875rem;
  color: var(--text);
  background: var(--bg-active);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.private-call-btn[aria-pressed='true'] {
  background: var(--accent-bg);
}
.private-call-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.private-call-btn.accept {
  color: #fff;
  background: var(--accent-fill);
  border-color: transparent;
}
.private-call-btn.end {
  color: #fff;
  background: var(--danger-fill);
  border-color: transparent;
}
.private-call-btn.end svg {
  transform: rotate(135deg);
}
.private-call-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.private-call-rate textarea {
  width: 100%;
  min-height: 3.5rem;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.private-call-stars {
  display: flex;
  gap: 0.25rem;
}
.private-call-star {
  padding: 0 0.125rem;
  font-size: 1.75rem;
  color: var(--text-subtle);
  background: none;
  border: 0;
  cursor: pointer;
}
.private-call-star.on {
  color: #e3b341;
}
.private-call-window.phase-error {
  flex-direction: row;
  justify-content: space-between;
}

/* The account switcher (R-Y198). */
.accounts-list > .account-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-row .account-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.account-unread {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--accent-fill);
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.account-logout {
  color: var(--danger);
}
.accounts-add {
  margin-top: 10px;
}
.accounts-chats-head,
.accounts-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.accounts-actions {
  justify-content: flex-end;
  margin-top: 10px;
}
.account-dialog {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

/* Sending extras and the live locations viewer (R-Y197). */
.place-heading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 1.5;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.live-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 0.9rem;
}
.live-bar-main {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0.6rem;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.live-bar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.live-bar-sub {
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-bar-stop {
  flex: none;
}
.live-shares {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
}
.live-share {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.live-share-go {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.live-share-go:hover {
  background: var(--bg-elev);
}
.live-share-map {
  position: relative;
  flex: none;
  width: 96px;
  height: 56px;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(127, 127, 127, 0.18);
}
.live-share-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-share-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 18px;
  transform: translate(-50%, -100%);
  fill: #e5483c;
}
.live-share-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.live-nearby {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.3rem;
}
.live-nearby input {
  width: 6rem;
}
.live-nearby-open {
  align-self: flex-start;
  margin-left: 0.3rem;
}
.saved-move {
  opacity: 0.6;
}
.saved-dialog-item.is-pinned[draggable='true'] {
  cursor: grab;
}

/* Story stealth mode, viewers' tabs and filters, report (R-Y199). */
.story-dialog-host .delete-dialog-overlay {
  /* Above the story viewer (2500). */
  z-index: 2600;
}
.story-stealth-list {
  margin: 0.4rem 0;
  padding-left: 1.2rem;
}
.story-stealth-state {
  margin: 0.4rem 0;
  color: var(--text);
}
.story-stealth-badge {
  position: absolute;
  inset: 3.4rem auto auto 0.6rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.story-viewers-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem 0.8rem 0;
}
.story-viewers-tab {
  padding: 0.2rem 0.6rem;
  border-bottom: 2px solid transparent;
  color: var(--text-subtle);
}
.story-viewers-tab.is-on {
  border-bottom-color: var(--accent);
  color: var(--text);
}
.story-viewers-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.4rem 0.8rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.story-viewers-search {
  flex: 1 1 100%;
  min-width: 0;
}
.story-viewers-check {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
}
.story-viewer-kind {
  font-size: 0.75rem;
  color: var(--text-subtle);
}

/* Bot login links and attachment-menu bots (R-Y201). */
.bot-login-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
  cursor: pointer;
}
.bot-login-check input:disabled + span {
  opacity: 0.5;
}
.attach-bot-menu {
  position: fixed;
}
.attach-bot-add {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg-elev);
  color: var(--accent);
  cursor: pointer;
}

/* R-Y200: moderation boxes in the delete dialog, "Not spam" in Recent
   actions, the broadcast group row and the channels you left. */
.moderation-boxes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0;
}
.not-spam {
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
}
.giga-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
}
.left-channels {
  flex-wrap: wrap;
  overflow-x: visible;
}
/* R-Y200: a channel's preview opened from the list stays above it. */
.delete-dialog-overlay[data-dialog='similar-preview'] {
  z-index: 2300;
}
/* Sign in to Telegram by QR code (R-Y203), as Telegram Desktop shows it:
   the code on white (a scanner needs the contrast in either theme) with the
   three steps beside it. */
.tg-qr {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.tg-qr-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 0.25rem;
  line-height: 0;
}
.tg-qr-code {
  width: 13rem;
  max-width: 100%;
  height: auto;
  display: block;
}
.tg-qr-steps {
  flex: 1 1 14rem;
  min-width: 0;
}
.tg-qr-steps h4 {
  margin: 0 0 0.4rem;
}
.tg-qr-steps ol {
  margin: 0 0 0.4rem;
  padding-left: 1.25rem;
}
.tg-login-mode {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0.25rem 0;
  color: var(--link);
  cursor: pointer;
}

/* Adding members and administrators (R-Y204). */
.admins-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.admins-section h4 {
  margin: 0;
}
.admins-section .member-open[disabled] {
  cursor: default;
  opacity: 0.85;
}
.admin-rights {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 40vh;
  overflow-y: auto;
}
.admin-right input:disabled + span {
  color: var(--text-muted);
}

/* Recent locations in the Location dialog (R-Y208) */
.share-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.share-recent-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elev);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.share-recent-pick span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-recent-pick:hover {
  border-color: var(--accent);
}
.admin-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* The account the chat shows, beside the list's menu, and the other
   accounts' unread on it (R-Y202). */
.new-chat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.active-account {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 5.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.active-account-name {
  min-width: 0;
  max-width: 3.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.new-chat-btn {
  position: relative;
}
.new-chat-unread {
  position: absolute;
  top: -0.35rem;
  right: -0.45rem;
  margin: 0;
  font-size: 0.65rem;
  line-height: 1.2;
}
.new-chat-menu .account-unread {
  margin-left: 0.5rem;
}
.account-switch {
  margin-left: auto;
}
.account-row .account-unread {
  margin-left: 0;
}
.chat-sidebar-top .chat-sort {
  flex: 0 1 auto;
  min-width: 0;
}
.chat-sidebar-top .new-chat {
  flex: none;
}
.new-chat > .new-chat-menu {
  top: 100%;
}

/* Instant View (R-Y205) */
.bubble-wp-iv {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--link);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.bubble-wp-iv:hover {
  background: var(--bg-active);
}
.reader-panel[data-dialog='instant-view'] {
  width: min(760px, 100vw);
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
}
.reader-panel[data-dialog='instant-view'] .reader-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
}
.iv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.iv-open-browser,
.iv-link {
  color: var(--link);
}
.iv-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.2rem 2rem;
}
.iv-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 2rem 0;
  color: var(--text-muted);
}
.iv-article-body {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.iv-title {
  font-size: 1.8rem;
  line-height: 1.2;
  margin: 0.4rem 0;
}
.iv-subtitle,
.iv-kicker,
.iv-authordate,
.iv-footer,
.iv-caption,
.iv-credit {
  color: var(--text-subtle);
}
.iv-kicker {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.iv-header {
  font-size: 1.4rem;
}
.iv-subheader {
  font-size: 1.15rem;
}
.iv-pre {
  padding: 0.7rem;
  overflow-x: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.iv-quote {
  margin: 1rem 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent);
}
.iv-pullquote {
  margin: 1.2rem 0;
  font-size: 1.3rem;
  text-align: center;
}
.iv-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.2rem 0;
}
.iv-figure {
  margin: 1rem 0;
}
.iv-img,
.iv-article-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.iv-inline-img {
  vertical-align: middle;
  max-height: 1.4em;
}
.iv-caption {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.3rem;
}
.iv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.4rem;
}
.iv-slideshow .iv-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.iv-slideshow .iv-grid > * {
  flex: 0 0 90%;
  scroll-snap-align: start;
}
.iv-list {
  padding-left: 1.4rem;
}
.iv-table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
}
.iv-table {
  border-collapse: collapse;
  width: 100%;
}
.iv-table th,
.iv-table td {
  padding: 0.35rem 0.6rem;
  text-align: left;
}
.iv-bordered th,
.iv-bordered td {
  border: 1px solid var(--border);
}
.iv-striped tr:nth-child(even) {
  background: var(--bg-elev);
}
.iv-details {
  margin: 0.8rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
}
.iv-details > summary {
  cursor: pointer;
  font-weight: 600;
}
.iv-related {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1.2rem 0;
}
.iv-card {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0.8rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
.iv-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.iv-article-img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}
.iv-embedpost {
  padding-left: 0.9rem;
  border-left: 3px solid var(--border);
}

/* Sticker and emoji extras (R-Y206): the trending list, the ":word" emoji
   strip, the quick reaction, clearing the recent stickers, the photo
   viewer's menu and the sticker sets of a photo. */
.sticker-trending-button,
.trending-back,
.trending-more {
  align-self: flex-start;
  margin: 0.1rem 0.5rem 0.25rem;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.trending-more {
  display: block;
  margin: 0.5rem auto;
}
.trending-sets {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.trending-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.25rem;
}
.trending-emoji-set {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid var(--border);
}
.sticker-new {
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--chat-accent-fill);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}
.emoji-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.25rem;
  border-radius: 10px;
}
.emoji-suggest-item {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.emoji-suggest-item.active {
  background: var(--bg-active);
}
.quick-reaction {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.quick-reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.quick-reaction-pick {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
}
.quick-reaction-pick.is-on {
  background: var(--bg-active);
  border-color: var(--accent);
}
.sticker-clear-recent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.5rem;
}
.photo-viewer-menu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  cursor: default;
}
.photo-viewer-more {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
}
.photo-viewer-items {
  position: absolute;
  top: 2.5rem;
  right: 0;
  min-width: 12rem;
}

/* Cloud drafts, the calendar's day counts, frequent contacts (R-Y207). */
.chat-item-draft {
  color: var(--danger);
}
.calendar-day.has-messages {
  font-weight: 600;
}
.calendar-day.has-messages:not(.is-chosen)::after {
  content: attr(data-count);
  display: block;
  font-size: 0.55rem;
  line-height: 1;
  color: var(--text-subtle);
}
.top-peers {
  padding: 0.25rem 0.5rem 0.5rem;
}
.top-title {
  margin: 0.25rem 0;
  font-size: 0.75rem;
  color: var(--text-subtle);
  text-transform: none;
}
.top-list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
}
.top-person {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4.2rem;
  padding: 0.25rem 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.top-person:hover {
  background: var(--bg-active);
}
.top-person-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}
.top-turn-on {
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  cursor: pointer;
}
.top-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: 0 6px 28px var(--shadow);
}
.photo-viewer-items button {
  width: 100%;
  text-align: left;
}
body:has(.photo-viewer) .delete-dialog-overlay.sticker-overlay {
  z-index: 9100;
}
.attached-sets {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 50vh;
  overflow-y: auto;
}
.attached-set {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}
.attached-stickers-button {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}
.emoji-status-search {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.25rem 0;
  box-shadow: 0 4px 16px var(--shadow);
}
.top-menu-item {
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.top-menu-item:hover {
  background: var(--bg-active);
}
.drafts-clear {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Managing one's own stories (R-Y210) */
.story-manage-note {
  inset: auto 0.5rem 4.5rem;
  z-index: 8;
  border-radius: var(--radius);
}
[data-dialog='story-edit-caption'],
[data-dialog='story-edit-privacy'] {
  z-index: 2700;
}

/* Cloud themes and the per-chat translation switch (R-Y209). */
.cloud-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.6rem;
  margin: 0.5rem 0;
}
.cloud-theme {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
}
.cloud-theme.is-selected {
  border-color: var(--accent);
}
.cloud-theme-preview {
  position: relative;
  display: block;
  height: 3.4rem;
  border-radius: 6px;
  background: var(--ct-ground, var(--bg-active));
  overflow: hidden;
}
.cloud-theme-in,
.cloud-theme-out {
  position: absolute;
  height: 0.8rem;
  border-radius: 6px;
}
.cloud-theme-in {
  top: 0.4rem;
  left: 0.4rem;
  width: 45%;
  background: rgb(127 127 127 / 45%);
}
.cloud-theme-out {
  top: 1.5rem;
  right: 0.4rem;
  width: 55%;
  background: var(--ct-bubble, transparent);
}
.cloud-theme-accent {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.4rem;
  background: var(--ct-accent, var(--accent));
}
.cloud-theme-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-more-group .meta {
  margin: 0.2rem 0.7rem;
}

/* R-Y212: change phone number, delete account, export Telegram data. */
.delete-account {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.delete-account button {
  color: var(--danger, #d33);
}

/* A group's sticker set and emoji pack, new chats in a shared folder (R-Y211). */
.group-set-rows {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.group-set-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  text-align: start;
}
.group-set-preview {
  margin: 0;
}
.chat-filter-new {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.05rem;
}
.folder-updates-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg-elev);
  font-size: 0.8rem;
}
.folder-updates-view {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  padding: 0;
}
.folder-updates-hide {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 0 0.25rem;
}

/* Service messages with their pictures, newer entities and live-stream
   cards (R-Y221). */
.service-line.has-photo {
  flex-direction: column;
  gap: 0.4rem;
}
.service-line .service-photo {
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-active);
  cursor: pointer;
}
.service-line .service-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-line .service-view {
  border: 0;
  border-radius: 999px;
  padding: 0.2rem 0.9rem;
  font: inherit;
  font-size: 0.75rem;
  background: var(--bg-active);
  color: var(--link);
  cursor: pointer;
}
.msg-bankcard {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}
.msg-date {
  border-bottom: 1px dashed currentColor;
}
.msg-diff-insert {
  text-decoration: underline;
  text-decoration-color: #2da44e;
  background: rgba(46, 160, 67, 0.18);
}
.msg-diff-delete {
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  background: rgba(248, 81, 73, 0.16);
}
.msg-diff-replace {
  text-decoration: underline wavy #d29922;
  background: rgba(210, 153, 34, 0.18);
}
.bubble-card.live-stream {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.live-stream .live-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--danger);
}
.bubble-wp-kind {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}
/* Rich messages in a bubble (R-Y220): the Instant View blocks, sized as
   message text, not as an article. */
.rich-message {
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  min-width: 0;
}
.rich-message > :first-child {
  margin-top: 0;
}
.rich-message > :last-child {
  margin-bottom: 0;
}
.rich-message .iv-p,
.rich-message .iv-h {
  margin: 0.35rem 0;
}
.rich-message .iv-h1 {
  font-size: 1.35rem;
}
.rich-message .iv-h2 {
  font-size: 1.2rem;
}
.rich-message .iv-h3 {
  font-size: 1.1rem;
}
.rich-message .iv-h4,
.rich-message .iv-h5,
.rich-message .iv-h6 {
  font-size: 1rem;
}
.rich-message .iv-h5,
.rich-message .iv-h6 {
  color: var(--text-muted);
}
.rich-message .iv-list {
  margin: 0.3rem 0;
}
.rich-message .iv-task {
  list-style: none;
  margin-left: -1.2rem;
}
.rich-message .iv-task-box {
  margin: 0 0.4rem 0 0;
}
.rich-message .iv-quote {
  margin: 0.4rem 0;
}
.rich-message .iv-collapsed {
  max-height: 3.2em;
  overflow: hidden;
}
.rich-message .iv-img {
  max-height: 22rem;
}
.iv-math,
.iv-math-inline {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-style: italic;
}
.iv-math {
  margin: 0.4rem 0;
  padding: 0.5rem 0.7rem;
  overflow-x: auto;
  text-align: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.iv-thinking {
  margin: 0.4rem 0;
  padding: 0.25rem 0.6rem;
  color: var(--text-subtle);
  border-left: 3px solid var(--border);
  font-size: 0.9rem;
}
.iv-thinking > summary {
  cursor: pointer;
  font-style: italic;
}
.iv-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.45rem 0;
}
.iv-buttons.is-center {
  justify-content: center;
}
.iv-buttons.is-right {
  justify-content: flex-end;
}
.iv-file {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.4rem 0;
  flex-wrap: wrap;
}
.iv-file-size {
  color: var(--text-subtle);
}
.iv-spoiler:not(.is-open) {
  background: var(--text-subtle);
  color: transparent;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.rich-part {
  display: inline-block;
  color: var(--text-subtle);
  animation: rich-part-blink 1.2s ease-in-out infinite;
}
@keyframes rich-part-blink {
  50% {
    opacity: 0.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rich-part {
    animation: none;
  }
}

/* Files, video and audio in rich messages and Instant View pages (R-Y224). */
.iv-player {
  display: block;
  max-width: 100%;
  border-radius: 8px;
}
.iv-audio-player {
  width: 100%;
}
.iv-file-download {
  color: var(--accent);
  text-decoration: underline;
}

/* Ephemeral messages (R-Y223): the small mark under a message only this
   user can see. */
.bubble-ephemeral {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-subtle);
}

/* Rich text kinds of rich messages and Instant View pages (R-Y225). */
.iv-math-rendered,
.iv-math-inline.is-rendered {
  font-family: 'Latin Modern Math', 'STIX Two Math', 'Cambria Math', serif;
  font-style: normal;
}
.iv-math-rendered {
  margin: 0.4rem 0;
  overflow-x: auto;
  text-align: center;
}
.iv-math-rendered math[display='block'] {
  display: block math;
}
.iv-math-inline.is-rendered {
  padding: 0;
  background: none;
}
.iv-math-inline.is-rendered .katex {
  white-space: nowrap;
}
.bot-button.is-link {
  background: none;
  color: var(--link);
  text-decoration: underline;
}
.bot-button.is-inert {
  display: inline-block;
  min-height: 0;
  padding: 0 0.4rem;
  cursor: default;
}
.iv-inline-button .bot-button {
  display: inline-block;
  flex: 0 1 auto;
  min-height: 0;
  padding: 0.1rem 0.6rem;
}

/* Disk almost full (R-Z14): a quiet, dismissible strip above the views. */
.disk-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text);
}
.disk-banner > span {
  flex: 1;
}
main[data-view='chat'] > .disk-banner {
  margin: 0.75rem;
}

/* A store from a newer version (R-Z17): the same strip, not dismissible. */
.disk-banner[data-banner='schema-too-new'] {
  border-left-color: var(--danger, var(--accent));
}
main[data-view='chat'] > .disk-banner[data-banner='schema-too-new'] {
  margin: 0.75rem;
}

/* Send safety: the send log, quiet hours, the opt-out list (R-Z3). */
.automation-safety {
  margin-top: 1.5rem;
}
.outbox-list,
.optout-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.outbox-row,
.optout-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.outbox-status {
  font-weight: 600;
}
.outbox-unknown .outbox-status {
  color: var(--accent);
}
.outbox-failed .outbox-status {
  color: var(--text-muted);
}
.optout-form {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.quiet-hours {
  margin-top: 1rem;
  gap: 0.5rem;
}
/* A mail in its bubble and the Email card's pull button (R-Z5). */
.email-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 0;
}
.email-html {
  overflow-wrap: anywhere;
  max-width: 100%;
}
.email-html blockquote {
  margin: 0.4rem 0;
  padding-left: 0.6rem;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
}
.email-html pre {
  white-space: pre-wrap;
  overflow-x: auto;
}
.email-html .email-img {
  max-width: 100%;
  height: auto;
}
.email-html .email-table {
  overflow-x: auto;
  max-width: 100%;
}
.email-html table {
  border-collapse: collapse;
}
.email-html td,
.email-html th {
  padding: 0.15rem 0.4rem;
  vertical-align: top;
}
.email-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.email-file {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.email-file-name {
  overflow-wrap: anywhere;
}
.email-pull .row {
  align-items: center;
  gap: 0.5rem;
}
.email-pull-status.is-failed {
  color: var(--danger, #cf222e);
}

/* R-Z8: attachments at another network (VK photos, stickers, files) and the
   Fetch now row of a Connections card. */
.remote-media {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 320px;
}
.remote-img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
  object-fit: cover;
}
.remote-img.remote-sticker {
  width: 144px;
  height: 144px;
  object-fit: contain;
}
.remote-chip {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.remote-chip:hover {
  text-decoration: underline;
}
.fetch-now {
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.fetch-status.fetch-error {
  color: var(--danger, #d1242f);
}

/* Saved deletions and edits share one row; narrow panes can scroll it. */
.chat-history-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 0.35rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: 0.82rem;
  overflow-x: auto;
}
.chat-history-bar:empty {
  display: none;
}
.folder-tab-settings label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.chat-deleted-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.6rem;
}
.chat-deleted-bar > :is(span, button) {
  white-space: nowrap;
}
.deleted-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.deleted-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.15rem;
}
.deleted-body {
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-style: italic;
}
.deleted-actions {
  display: flex;
  flex: none;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 55%;
}
.message-version {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.version-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.version-asset {
  display: grid;
  gap: 0.5rem;
  max-width: 100%;
}
.version-asset :is(img, video, audio) {
  max-width: 100%;
}
.version-asset .loading-image {
  max-height: 24rem;
}
.version-more {
  display: grid;
  place-items: center;
  min-height: 1rem;
}
.edited-message-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 0.6rem;
  text-align: left;
  overflow-wrap: anywhere;
}

/* The tutorial's "Skip step" sits beside the step count (R-M10, R-N3). */
.tutorial-overlay .tutorial-step .tutorial-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.tutorial-overlay .tutorial-step .tutorial-skip {
  padding: 0.1rem 0;
  border-color: transparent;
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
  text-transform: none;
  text-decoration: underline;
}

/* A list that could not load, with a retry button (R-Z12). */
.load-error {
  margin: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-elev);
}

/* The error toast floats above any open dialog so a refusal is never hidden. */
.api-error-toast {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  max-width: min(36rem, calc(100vw - 2rem));
  margin: 0;
  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
}
main[data-view='chat'] > .api-error-toast {
  margin: 0;
}

/* R-Z15: attachments of imported archive messages (pictures, players,
   file chips, "media not imported"). */
.archive-media audio,
.archive-media video {
  max-width: 100%;
}
.remote-chip.is-missing {
  color: var(--text-muted);
  border-style: dashed;
}

/* R-Z20: VK players, video link card, captcha picture, notification list */
.remote-player {
  display: block;
  width: 100%;
  max-width: 320px;
  border-radius: 8px;
}
audio.remote-player {
  height: 40px;
}
.remote-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.vk-captcha-img {
  display: block;
  max-width: 100%;
  background: #fff;
  border-radius: 8px;
}
.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.notification-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.note-title {
  flex: 1 1 12rem;
  overflow-wrap: anywhere;
}

/* Reduced visual effects (R-Z21). <html data-effects="reduced"> is set by
   effects.js when the browser renders slowly (a frame probe), or by the
   Settings choice / ?effects=reduced: no backdrop blur (the same solid
   surfaces as `prefers-reduced-transparency`), no page-sized dim around
   the tutorial's ring, and no non-essential animation or transition. */
:root[data-effects='reduced'] *,
:root[data-effects='reduced'] *::before {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:root[data-effects='reduced'] *,
:root[data-effects='reduced'] *::before,
:root[data-effects='reduced'] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  /* 0s, not 0.01ms: the default transition-property is `all`, so any
     non-zero duration turns every colour change (the theme switch at
     load) into a transition, and axe read light text on a dark fill
     (R-Z22). */
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
:root[data-effects='reduced'] {
  --surface-glass-bg: var(--bg-elev);
}
:root[data-effects='reduced'] .chat-composer {
  background: var(--bg-elev);
}
:root[data-effects='reduced']
  .tutorial-overlay-spotlight
  .tutorial-spotlight-frame {
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(102, 178, 255, 1);
}

/* The card collapses to its title and buttons when its target cannot be
   scrolled clear of it (R-Z22). */
.tutorial-overlay .tutorial-step[data-compact='true'] .tutorial-body,
.tutorial-overlay .tutorial-step[data-compact='true'] .tutorial-examples {
  display: none;
}

/* The translate bar over a foreign-language chat, and the summary
   (R-Y213). */
.translate-bar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.2rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  flex: none;
  font-size: 0.9rem;
}
.translate-bar-main {
  flex: 1 1 auto;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.translate-bar-text {
  flex: 1 1 auto;
  color: var(--text-muted);
}

/* Custom emoji, the group's emoji pack and emoji groups in the emoji
   panel (R-Y214). */
.emoji-groups {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  padding: 0 0.5rem 0.25rem;
}
.emoji-group {
  flex: 0 0 auto;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.3rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.emoji-group.active {
  background: var(--accent-bg, var(--bg));
  color: var(--accent, inherit);
}
.emoji-note {
  margin: 0 0.6rem 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.8rem;
}
.custom-emoji-cell .msg-custom-emoji {
  font-size: inherit;
}

/* Local storage management, reaction notifications (R-Y215). */
.storage-settings .storage-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.storage-kinds,
.storage-chats ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.storage-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--border);
}
.storage-row .storage-name {
  flex: 1;
}
.storage-settings .storage-panel > button {
  align-self: flex-start;
}
.storage-settings .media-limit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.telegram-notify .notify-block .media-limit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.telegram-notify .notify-block button {
  align-self: flex-start;
}

/* Channel type, appearance, deletion and the channel limit (R-Y216). */
.chat-manage-rows .group-set-row.danger {
  color: var(--danger, #d33);
}
.public-link-kinds {
  display: flex;
  gap: 0.5rem;
}
.public-link-kinds button.chosen {
  border-color: var(--accent);
  color: var(--accent);
}
.public-link-status.is-error {
  color: var(--danger, #d33);
}
.public-link-channel,
.limit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.3rem 0;
}
.limit-list {
  max-height: 40vh;
  overflow-y: auto;
}
.limit-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Contact extras: share my contact's QR code, a contact's note and photo,
   synced contacts (R-Y217). */
.contact-share {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem;
}
.contact-qr {
  display: block;
  width: 12rem;
  height: 12rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.contact-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.contact-share-url {
  overflow-wrap: anywhere;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--bg-elev);
}
.contact-extras {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-note,
.contact-photo,
.contact-birthday {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.synced-clear {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

/* Login email, passkeys, password reset (R-Y218). */
.security-extras,
.security-passkeys {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}
.security-extras h5 {
  margin: 0.4rem 0 0;
}
.security-passkey {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.security-reset,
.security-login-email {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Right handles extend beyond the panel edge without taking content space.
   Their transparent hit areas leave native sidebar scrollbars clickable. */
.panel-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--panel-divider-width);
  z-index: 15;
  cursor: col-resize;
  touch-action: none;
}
.panel-divider.on-right {
  left: 100%;
}
.panel-divider.on-left {
  left: 0;
}
.panel-divider:hover,
.panel-divider:focus-visible,
.panel-divider.is-resizing {
  background: var(--text-muted);
  opacity: 0.55;
  outline: none;
}
.permanent-drawer {
  width: clamp(160px, var(--nav-width, 232px), 35vw);
}
.person-panel {
  width: min(var(--details-width, 352px), 100%);
}
.chat-kind-filters {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
}
.calls-content {
  display: flex;
  flex-direction: column;
  min-height: min(56vh, 460px);
  gap: var(--control-gap);
}
.calls-state {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
}
.person-panel-body
  :is(
    .admin-actions,
    .peer-actions,
    .contact-photo,
    .contact-note,
    .contact-birthday
  ) {
  gap: var(--control-gap);
}
.my-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 900px) {
  .chat-main:has(> .person-panel)
    > :not(.chat-header, .chat-header-slot, .person-panel) {
    margin-right: min(var(--details-width, 352px), 100%);
  }
  .chat-main:has(> .person-panel) > .chat-composer {
    left: calc((100% - var(--details-width, 352px)) / 2);
    width: min(
      var(--chat-column),
      calc(100% - var(--details-width, 352px) - 2rem)
    );
  }
}
@media (max-width: 640px) {
  .panel-divider {
    display: none;
  }
  .person-panel {
    padding-left: 0;
  }
  .chat-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Default dark controls use neutral surfaces and white line icons. */
:root[data-theme='dark'][data-skin='t3'] {
  --msg-select-overlay: rgba(255, 255, 255, 0.16);
  --msg-select-check: #fff;
  --bg: #08090b;
  --bg-elev: #121315;
  --bg-active: #292a2d;
  --accent: #f5f5f5;
  --accent-bg: #292a2d;
  --accent-hover: #dedede;
}
:root[data-theme='dark'] button .icon,
:root[data-theme='dark'] .nav-item .icon {
  color: #fff;
}
:root[data-theme='dark'][data-skin='t3'] {
  --accent-fill: #2c2d30;
}
:root[data-theme='dark'][data-skin='t3'] .chat-filter-unread,
:root[data-theme='dark'][data-skin='t3'] .story-add-badge {
  background: #303135;
  color: #fff;
}

/* Operator uses the conversation itself as its queue card. */
main[data-view='operator']:has(> .operator-workspace) {
  max-width: none;
  padding: 0;
}
.operator-workspace {
  height: calc(100dvh - var(--topbar-h));
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}
.operator-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.operator-toolbar h2,
.operator-toolbar p {
  margin: 0;
}
.operator-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.operator-card {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.chat-shell.chat-embedded {
  grid-template-columns: minmax(0, 1fr);
}
.chat-embedded .chat-back {
  display: none;
}
.operator-empty {
  display: flex;
  flex: 1;
  min-height: 12rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.nav-icon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.nav-count {
  position: absolute;
  top: -0.45rem;
  right: -0.6rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.2rem;
  border: 1px solid var(--bg);
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.65rem;
  line-height: 1.1rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
:root[data-theme='dark'] .nav-count {
  background: #fff;
  color: #000;
}
@media (max-width: 640px) {
  .operator-workspace {
    height: calc(
      100dvh - var(--topbar-h) - var(--bottom-nav-h) - var(--safe-bottom)
    );
    padding: 0.5rem;
  }
}

.marketplace-accounts {
  margin: 1rem 0;
}
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 0.75rem;
  align-items: start;
}
.marketplace-account {
  min-width: 0;
}
.marketplace-account .row {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.marketplace-bio {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 12rem;
  overflow-y: auto;
}
.marketplace-snapshot a {
  overflow-wrap: anywhere;
}
.nav-item-drawer .nav-icon:has(.nav-count),
.nav-item-sheet .nav-icon:has(.nav-count) {
  margin-right: 0.35rem;
}
.marketplace-account {
  overflow-wrap: anywhere;
}

.automation-state {
  display: block;
  font-weight: 600;
  color: var(--text);
}
.automation-active-count {
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  min-width: 1.4em;
  text-align: center;
}

:root[data-theme='dark'][data-skin='t3'] .bubble-check.is-checked {
  color: #000;
}

.app-start-loading {
  display: flex;
  min-height: 100dvh;
  align-items: stretch;
  justify-content: center;
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}
.collection-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
.collection-sticker.selected {
  background: var(--bg-active);
  border-color: var(--text);
}
.collection-sticker .sticker-picture,
.collection-sticker > img {
  width: 100%;
  height: 96px;
  object-fit: contain;
}
.collections-fields {
  flex-wrap: wrap;
  align-items: end;
}
.collections-fields > label {
  flex: 1;
  min-width: 140px;
}
.chat-sticker-collections {
  padding: 0.4rem;
}
.collection-picker-items {
  max-height: 200px;
  overflow: auto;
}