:root {
  --bg: #edf2f1;
  --bg-soft: #f7faf9;
  --surface: #ffffff;
  --surface-muted: #f3f6f5;
  --surface-strong: #e8efed;
  --line: #d8e1de;
  --line-strong: #bdcbc6;
  --text: #101817;
  --muted: #667571;
  --muted-strong: #3f504b;
  --ink: #071310;
  --ink-2: #0d1f1b;
  --green: #0b7a60;
  --green-strong: #075a47;
  --green-soft: #dff3ec;
  --blue: #256d91;
  --blue-soft: #dcecf4;
  --amber: #936212;
  --amber-soft: #fff1d6;
  --red: #b83f46;
  --red-soft: #ffe6e8;
  --violet: #6652b8;
  --violet-soft: #ece8ff;
  --radius: 8px;
  --shadow: 0 18px 45px rgba(16, 24, 23, 0.08);
  --shadow-soft: 0 10px 28px rgba(16, 24, 23, 0.06);
  --focus: 0 0 0 3px rgba(37, 109, 145, 0.16);
}

/* Account health/admin actions pass: real backend states, compact admin controls. */
.overview-account-card.is-auth_failed,
.overview-account-card.is-session_invalid,
.overview-account-card.is-session_missing,
.overview-account-card.is-flood_wait,
.overview-account-card.is-error {
  border-color: rgba(224, 82, 100, .30);
}

.overview-account-status.is-reconnecting,
.overview-account-status.is-flood_wait {
  color: var(--ov-amber, #e0a84f);
  background: rgba(224, 168, 79, .13);
}

.overview-account-status.is-auth_failed,
.overview-account-status.is-session_invalid,
.overview-account-status.is-session_missing,
.overview-account-status.is-error {
  color: var(--ov-red, #e05264);
  background: rgba(224, 82, 100, .14);
}

.overview-account-status.is-offline {
  color: var(--ov-muted, #7f91a3);
  background: rgba(127, 145, 163, .12);
}

.overview-account-status.is-idle {
  color: #9fb0c0;
  background: rgba(127, 145, 163, .13);
}

.overview-account-healthline {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ov-text, #e7eef5);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.overview-account-healthline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-account-healthline b {
  max-width: 46%;
  overflow: hidden;
  border-radius: 999px;
  padding: 4px 7px;
  color: #ffd7dd;
  background: rgba(224, 82, 100, .14);
  font-size: 10px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-icon-button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ov-border, rgba(127,145,163,.22));
  border-radius: 999px;
  padding: 0;
  color: var(--ov-text, #e7eef5);
  background: rgba(255,255,255,.045);
  cursor: pointer;
}

.overview-icon-button svg,
.overview-action-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overview-icon-button:hover,
.overview-icon-button:focus-visible {
  border-color: var(--ov-border-strong, rgba(51,144,236,.32));
  color: #fff;
  background: rgba(51, 144, 236, .16);
  outline: none;
}

.overview-icon-button.danger {
  color: #ffd7dd;
  border-color: rgba(224, 82, 100, .34);
  background: rgba(224, 82, 100, .10);
}

.overview-icon-button.danger:hover,
.overview-icon-button.danger:focus-visible {
  color: #fff;
  background: rgba(224, 82, 100, .18);
  box-shadow: 0 0 0 3px rgba(224, 82, 100, .10);
}

.overview-icon-button:disabled,
.overview-button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.overview-action-overlay {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .46);
  animation: motionBackdropIn var(--motion-small, 160ms) var(--ease-standard, ease) both;
}

.overview-action-overlay.is-closing {
  animation: motionBackdropOut var(--motion-micro, 120ms) var(--ease-standard, ease) both;
}

.overview-action-modal {
  position: relative;
  width: min(430px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  display: grid;
  gap: 14px;
  overflow: auto;
  border: 1px solid rgba(127, 145, 163, .25);
  border-radius: 14px;
  padding: 18px;
  color: #e7eef5;
  background: #17212b;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
  animation: motionModalIn 170ms var(--ease-standard, ease) both;
}

.overview-action-overlay.is-closing .overview-action-modal {
  animation: motionModalOut var(--motion-micro, 120ms) var(--ease-standard, ease) both;
}

.overview-action-modal-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-right: 30px;
}

.overview-action-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #8ac0f6;
  background: rgba(51, 144, 236, .16);
}

.overview-action-icon.danger {
  color: #ffd7dd;
  background: rgba(224, 82, 100, .16);
}

.overview-action-modal h2,
.overview-action-modal p {
  margin: 0;
}

.overview-action-modal h2 {
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.2;
}

.overview-action-modal-head p,
.overview-action-copy {
  color: #93a4b5;
  font-size: 13px;
  line-height: 1.45;
}

.overview-action-field {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #93a4b5;
  font-size: 12px;
  font-weight: 800;
}

.overview-action-field input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid rgba(127, 145, 163, .25);
  border-radius: 10px;
  padding: 0 11px;
  color: #e7eef5;
  background: #242f3d;
  outline: none;
}

.overview-action-field input:focus {
  border-color: #3390ec;
  box-shadow: 0 0 0 3px rgba(51, 144, 236, .12);
}

.overview-action-result {
  display: none;
  gap: 5px;
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 13px;
  line-height: 1.35;
}

.overview-action-result.is-error,
.overview-action-result.is-warning,
.overview-action-result.is-ok {
  display: grid;
}

.overview-action-result.is-error {
  color: #ffd7dd;
  background: rgba(224, 82, 100, .13);
}

.overview-action-result.is-warning {
  color: #ffe6b8;
  background: rgba(224, 168, 79, .14);
}

.overview-action-result.is-ok {
  color: #c9f6dd;
  background: rgba(79, 208, 139, .13);
}

.overview-action-result span,
.overview-action-result strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.overview-action-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.telegram-account.is-disabled,
.telegram-account[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .62 !important;
}

.telegram-account.is-connection-auth_failed .account-avatar::after,
.telegram-account.is-connection-session_invalid .account-avatar::after,
.telegram-account.is-connection-session_missing .account-avatar::after,
.telegram-account.is-connection-flood_wait .account-avatar::after {
  background: #e05264 !important;
}

.telegram-account.is-connection-reconnecting .account-avatar::after {
  background: #e0a84f !important;
}

@media (max-width: 640px) {
  .overview-account-top {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .overview-account-status {
    grid-column: 2;
    justify-self: start;
  }

  .overview-action-modal {
    width: min(100%, calc(100vw - 18px));
    padding: 16px;
  }
}

/* Dialogs v6: Telegram-like dark-only functional polish. */
.theme-toggle-button {
  display: none !important;
}

.telegram-inbox-stack,
.telegram-shell,
.telegram-shell.theme-dark,
.telegram-shell.theme-light,
.overview-command-center.theme-dark,
.overview-command-center.theme-light {
  color-scheme: dark;
}

.telegram-shell.theme-light {
  --tg-bg: #0e1621;
  --tg-panel: #17212b;
  --tg-panel-hover: #202b36;
  --tg-input: #242f3d;
  --tg-line: #0f1a24;
  --tg-line-soft: rgba(127, 145, 163, .2);
  --tg-text: #e7eef5;
  --tg-muted: #7f91a3;
  --tg-accent: #3390ec;
  --tg-active: #2f6ea5;
  --tg-incoming: #182533;
  --tg-outgoing: #2b5278;
}

.dialog-mode-button {
  position: relative;
}

.dialog-mode-button::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #3390ec;
  box-shadow: 0 0 0 2px rgba(23, 33, 43, .92);
}

.dialog-mode-menu {
  min-width: 216px;
  padding: 7px;
  border: 1px solid rgba(127, 145, 163, .24);
  border-radius: 12px;
  background: rgba(23, 33, 43, .98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38), 0 0 0 1px rgba(51, 144, 236, .08);
  backdrop-filter: none;
  transform-origin: top left;
  animation: dialogMenuEnter 150ms cubic-bezier(.22,.61,.36,1) both;
  z-index: 240;
}

.dialog-mode-menu.is-closing {
  animation: dialogMenuExit 140ms ease both;
  pointer-events: none;
}

.dialog-mode-menu button {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 0 10px;
  color: #dce7f2;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease, transform 110ms ease;
}

.dialog-mode-menu button span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.dialog-mode-menu button i {
  width: 20px;
  display: inline-grid;
  place-items: center;
  color: #7f91a3;
  font-style: normal;
}

.dialog-mode-menu button:hover,
.dialog-mode-menu button:focus-visible {
  color: #ffffff;
  background: rgba(51, 144, 236, .14);
  outline: none;
}

.dialog-mode-menu button:active {
  transform: scale(.985);
}

.dialog-mode-menu button.is-active {
  color: #ffffff;
  background: rgba(51, 144, 236, .24);
}

.dialog-mode-menu button.is-active i,
.dialog-mode-menu button.is-active b {
  color: #8ed1ff;
}

.dialog-mode-menu button b {
  opacity: 0;
  font-size: 14px;
}

.dialog-mode-menu button.is-active b {
  opacity: 1;
}

.telegram-loader-state {
  width: 100%;
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--tg-muted, #7f91a3);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.telegram-loader-state.is-inline {
  min-height: 34px;
  display: inline-flex;
  justify-content: center;
  width: auto;
  padding: 4px 0;
}

.telegram-loader-spinner,
.small-spinner {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 3px solid rgba(51, 144, 236, .16);
  border-top-color: #3390ec;
  border-right-color: #3390ec;
  animation: telegramCircularLoader 760ms cubic-bezier(.42, .12, .28, .94) infinite;
}

.telegram-loader-state.is-inline .telegram-loader-spinner,
.small-spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.dialog-pagination.is-loading {
  display: flex;
  justify-content: center;
  min-height: 40px;
}

.composer-emoji-button {
  flex: none;
  font-size: 18px;
}

.composer-emoji-picker {
  position: fixed;
  z-index: 230;
  width: min(360px, calc(100vw - 20px));
  max-height: min(430px, calc(100vh - 20px));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(127, 145, 163, .24);
  border-radius: 14px;
  background: rgba(23, 33, 43, .99);
  color: #e7eef5;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .42), 0 0 0 1px rgba(51, 144, 236, .08);
  animation: emojiPickerEnter 160ms cubic-bezier(.22,.61,.36,1) both;
  overflow: hidden;
}

.composer-emoji-picker.is-closing {
  animation: emojiPickerExit 140ms ease both;
  pointer-events: none;
}

.composer-emoji-search {
  width: 100%;
  height: 36px;
  border: 1px solid rgba(127, 145, 163, .18);
  border-radius: 999px;
  padding: 0 13px;
  color: #e7eef5;
  background: #242f3d;
  outline: none;
  font: inherit;
  font-size: 13px;
}

.composer-emoji-search:focus {
  border-color: rgba(51, 144, 236, .62);
  box-shadow: 0 0 0 3px rgba(51, 144, 236, .13);
}

.composer-emoji-categories {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.composer-emoji-categories button,
.composer-emoji-grid button {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease, transform 110ms ease;
}

.composer-emoji-categories button {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 17px;
}

.composer-emoji-categories button:hover,
.composer-emoji-categories button:focus-visible,
.composer-emoji-categories button.is-active {
  background: rgba(51, 144, 236, .18);
  outline: none;
}

.composer-emoji-categories button:disabled {
  opacity: .35;
  cursor: default;
}

.composer-emoji-title {
  color: #7f91a3;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.composer-emoji-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  overflow-y: auto;
  padding-right: 2px;
}

.composer-emoji-grid button {
  height: 36px;
  border-radius: 9px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 22px;
  line-height: 1;
}

.composer-emoji-grid button:hover,
.composer-emoji-grid button:focus-visible {
  background: rgba(127, 145, 163, .16);
  transform: scale(1.08);
  outline: none;
}

.composer-emoji-empty {
  grid-column: 1 / -1;
  padding: 22px 10px;
  color: #7f91a3;
  text-align: center;
  font-size: 13px;
}

.message-reaction {
  animation: reactionPop 220ms cubic-bezier(.2,.9,.25,1.25) both;
}

.message-actions {
  pointer-events: none;
}

.message-actions > button,
.message-actions .reaction-picker.is-open,
.message-actions .message-action-menu.is-open {
  pointer-events: auto;
}

.message-reaction.is-pending {
  opacity: .66;
  border-color: rgba(51, 144, 236, .28);
  background: rgba(51, 144, 236, .12);
}

.message-actions {
  z-index: 260;
  pointer-events: none !important;
}

.message-actions > button,
.message-actions .reaction-picker.is-open,
.message-actions .message-action-menu.is-open {
  pointer-events: auto !important;
}

.reaction-picker,
.message-action-menu {
  z-index: 270;
}

.telegram-message.has-reaction-error .message-reaction.is-error {
  border-color: #e05264;
  box-shadow: 0 0 0 2px rgba(224, 82, 100, .16);
}

.all-dialog-row {
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 160ms ease, opacity 180ms ease;
}

.all-dialog-row.is-activity-pulse {
  animation: allDialogActivityPulse 820ms ease-out both;
}

.all-dialog-pin.is-pinned {
  animation: pinPop 180ms cubic-bezier(.2,.9,.25,1.25);
}

.telegram-message {
  animation: messageAppear 180ms cubic-bezier(.22,.61,.36,1) both;
}

.telegram-send.is-sending {
  color: transparent !important;
}

.telegram-send.is-sending::after {
  border-color: rgba(255,255,255,.32);
  border-top-color: #ffffff;
}

@keyframes dialogMenuEnter {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dialogMenuExit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-4px) scale(.97); }
}

@keyframes telegramCircularLoader {
  0% { transform: rotate(0deg); }
  55% { transform: rotate(220deg); }
  100% { transform: rotate(360deg); }
}

@keyframes emojiPickerEnter {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes emojiPickerExit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(.97); }
}

@keyframes allDialogActivityPulse {
  0% { box-shadow: inset 0 0 0 rgba(51,144,236,0); background-color: rgba(51,144,236,.18); }
  100% { box-shadow: inset 0 0 0 rgba(51,144,236,0); background-color: transparent; }
}

@keyframes pinPop {
  0% { transform: scale(.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes messageAppear {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .composer-emoji-picker {
    width: calc(100vw - 20px) !important;
    max-height: min(360px, calc(100vh - 132px));
  }

  .composer-emoji-grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .composer-emoji-grid button {
    height: 38px;
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-mode-menu,
  .dialog-mode-menu.is-closing,
  .composer-emoji-picker,
  .composer-emoji-picker.is-closing,
  .message-reaction,
  .all-dialog-row.is-activity-pulse,
  .telegram-message,
  .inbox-toast {
    animation-duration: 1ms !important;
    transform: none !important;
  }

  .telegram-loader-spinner,
  .small-spinner {
    animation-duration: 1.8s;
  }
}

.telegram-shell {
  height: calc(100vh - 150px);
  min-height: 620px;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.telegram-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #d8e2e8;
  background: #ffffff;
}

.telegram-accountbar {
  height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid #e4ebef;
}

.mini-avatar,
.dialog-avatar,
.chat-avatar,
.profile-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #3390ec;
  color: #ffffff;
  font-weight: 700;
}

.mini-avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

.telegram-select {
  min-width: 0;
  height: 36px;
  border: 0;
  border-radius: 18px;
  padding: 0 10px;
  background: #f1f4f6;
  color: #17212b;
  outline: none;
}

.telegram-icon-button,
.telegram-send {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: #6f7f89;
  font-size: 19px;
}

.telegram-icon-button:hover {
  background: #eef3f6;
  color: #3390ec;
}

.telegram-search {
  padding: 10px 12px;
}

.telegram-search-input {
  width: 100%;
  height: 38px;
  border: 0;
  border-radius: 19px;
  background: #f1f4f6;
  padding: 0 14px;
  outline: none;
  color: #17212b;
}

.telegram-search-input:focus {
  box-shadow: 0 0 0 2px rgba(51, 144, 236, 0.18);
}

.telegram-meta {
  padding: 0 14px 8px;
  color: #70828d;
  font-size: 12px;
}

.telegram-dialogs {
  overflow: auto;
  padding: 4px 8px 10px;
}

.live-inbox-panel {
  margin: 0 8px 8px;
  border: 1px solid #e4ebef;
  border-radius: 10px;
  background: #f8fbfd;
  overflow: hidden;
}

.live-inbox-head {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #17212b;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #e4ebef;
}

.tiny-button {
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 0 8px;
  background: #3390ec;
  color: #ffffff;
  font-size: 11px;
}

.live-inbox-list {
  max-height: 148px;
  overflow: auto;
}

.live-inbox-item {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #e4ebef;
  padding: 7px 9px;
  background: transparent;
  text-align: left;
}

.live-inbox-item:hover {
  background: #edf6ff;
}

.live-inbox-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.live-inbox-title,
.live-inbox-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-inbox-title {
  color: #17212b;
  font-size: 12px;
  font-weight: 700;
}

.live-inbox-text,
.live-inbox-time,
.live-inbox-empty {
  color: #70828d;
  font-size: 11px;
}

.live-inbox-empty {
  padding: 10px;
}

.telegram-dialog {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 10px;
  padding: 8px;
  text-align: left;
  background: transparent;
}

.telegram-dialog:hover {
  background: #f4f8fb;
}

.telegram-dialog.is-active {
  background: #3390ec;
  color: #ffffff;
}

.telegram-dialog.is-active .dialog-date,
.telegram-dialog.is-active .dialog-preview {
  color: rgba(255, 255, 255, 0.82);
}

.dialog-avatar {
  width: 48px;
  height: 48px;
  font-size: 14px;
  flex: 0 0 auto;
}

.dialog-main,
.dialog-row {
  min-width: 0;
}

.dialog-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 14px;
  flex: 1;
}

.dialog-date,
.dialog-preview {
  color: #70828d;
  font-size: 12px;
}

.dialog-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.unread-badge {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #35b975;
  color: #ffffff;
  font-size: 12px;
  padding: 0 6px;
}

.telegram-chat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #dbe8ef;
}

.telegram-chat-head {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid #d8e2e8;
  background: #ffffff;
}

.chat-avatar {
  width: 42px;
  height: 42px;
  font-size: 14px;
}

.chat-title-wrap {
  min-width: 0;
}

.chat-title,
.chat-empty-title {
  font-weight: 700;
  color: #17212b;
}

.chat-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-subtitle {
  margin-top: 3px;
  color: #70828d;
  font-size: 12px;
}

.telegram-messages {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 28px;
  background:
    linear-gradient(rgba(219, 232, 239, 0.86), rgba(219, 232, 239, 0.86)),
    repeating-linear-gradient(45deg, transparent 0, transparent 16px, rgba(255,255,255,0.22) 16px, rgba(255,255,255,0.22) 18px);
}

.telegram-account:focus-visible,
.telegram-dialog:focus-visible,
.telegram-icon-button:focus-visible,
.telegram-send:focus-visible,
.chat-action-button:focus-visible,
.message-actions button:focus-visible {
  outline: 2px solid #75c6ff;
  outline-offset: 2px;
}

.nav-item:focus {
  outline: none;
}

.nav-item:focus-visible {
  box-shadow: inset 3px 0 0 #59d0b5, 0 0 0 2px rgba(117, 198, 255, 0.34);
}

.telegram-empty {
  justify-self: center;
  align-self: center;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(23, 33, 43, 0.22);
  color: #ffffff;
}

.telegram-message {
  display: flex;
}

.telegram-message.incoming {
  justify-content: flex-start;
}

.telegram-message.outgoing {
  justify-content: flex-end;
}

.bubble {
  position: relative;
  max-width: min(680px, 78%);
  border-radius: 12px;
  padding: 8px 10px 18px;
  background: #ffffff;
  color: #17212b;
  box-shadow: 0 1px 1px rgba(23, 33, 43, 0.08);
}

.telegram-message.outgoing .bubble {
  background: #eeffde;
}

.message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.42;
  font-size: 14px;
}

.message-time {
  position: absolute;
  right: 9px;
  bottom: 4px;
  color: #7e8b93;
  font-size: 10px;
}

.bubble-reply {
  border-left: 3px solid #3390ec;
  padding-left: 8px;
  margin-bottom: 6px;
  color: #3390ec;
  font-size: 12px;
}

.media-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 8px;
  padding: 0 9px;
  margin-bottom: 6px;
  background: rgba(51, 144, 236, 0.13);
  color: #2474bf;
  font-size: 12px;
  font-weight: 700;
}

.message-actions {
  position: absolute;
  left: 6px;
  top: -28px;
  display: none;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(23, 33, 43, 0.14);
}

.bubble:hover .message-actions {
  display: flex;
}

.message-actions button {
  min-width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #52636f;
  font-size: 12px;
}

.message-actions button:hover {
  background: #eef3f6;
  color: #3390ec;
}

.reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 16px 8px 22px;
  border-top: 1px solid #d8e2e8;
  background: #ffffff;
  border-left: 4px solid #3390ec;
}

.reply-preview.is-hidden {
  display: none;
}

.reply-preview strong,
.reply-preview span {
  display: block;
  font-size: 13px;
}

.reply-preview span {
  margin-top: 2px;
  color: #70828d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-preview button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #70828d;
  font-size: 20px;
}

.telegram-composer {
  min-height: 60px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 42px;
  align-items: end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #d8e2e8;
  background: #ffffff;
}

.telegram-textarea {
  min-height: 40px;
  max-height: 130px;
  resize: vertical;
  border: 0;
  border-radius: 20px;
  outline: none;
  background: #f1f4f6;
  color: #17212b;
  padding: 11px 14px;
  line-height: 1.35;
}

.telegram-send {
  background: #3390ec;
  color: #ffffff;
}

.telegram-send:hover {
  background: #2583df;
}

.file-input {
  display: none;
}

.account-settings-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
}

.account-list-panel {
  min-height: 620px;
}

.account-list {
  display: grid;
  gap: 4px;
  padding: 10px;
  max-height: 620px;
  overflow: auto;
}

.account-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 10px;
  padding: 9px;
  background: transparent;
  text-align: left;
}

.account-row:hover,
.account-row.is-active {
  background: #f1f6fb;
}

.account-phone,
.account-state {
  display: block;
}

.account-phone {
  font-weight: 700;
}

.account-state {
  margin-top: 3px;
  color: #70828d;
  font-size: 12px;
}

.account-profile {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
}

.profile-avatar {
  width: 112px;
  height: 112px;
  font-size: 32px;
}

.profile-form {
  display: grid;
  gap: 12px;
}

.profile-form label {
  display: grid;
  gap: 6px;
  color: #52636f;
  font-size: 13px;
}

.profile-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.telegram-shell {
  grid-template-columns: 270px 350px minmax(0, 1fr);
  border-color: #0b121a;
  background: #0e1621;
  box-shadow: 0 22px 55px rgba(6, 15, 24, 0.22);
}

.telegram-accounts,
.telegram-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #17212b;
}

.telegram-accounts,
.telegram-left {
  border-right: 1px solid #0f1a24;
}

.telegram-accounts .telegram-accountbar {
  grid-template-columns: 36px minmax(0, 1fr);
}

.telegram-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #0f1a24;
}

.telegram-left .telegram-search {
  grid-template-columns: minmax(0, 1fr) 36px 36px;
}

.telegram-accountbar {
  border-bottom-color: #0f1a24;
  background: #17212b;
}

.telegram-icon-button {
  color: #7f91a3;
}

.telegram-icon-button:hover {
  background: #243243;
  color: #6ab3ff;
}

.telegram-search-input,
.telegram-select,
.telegram-textarea {
  background: #242f3d;
  color: #e7eef5;
}

.telegram-search-input::placeholder,
.telegram-textarea::placeholder {
  color: #7f91a3;
}

.telegram-meta {
  color: #7f91a3;
  background: #17212b;
}

.telegram-account-list,
.telegram-dialogs {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 0 10px;
}

.telegram-account {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  color: #e7eef5;
}

.telegram-account:hover,
.telegram-dialog:hover {
  background: #202b36;
}

.telegram-account.is-active,
.telegram-dialog.is-active {
  background: #2f6ea5;
  color: #ffffff;
}

.telegram-account.is-disabled {
  opacity: 0.62;
}

.account-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-phone,
.account-tail,
.account-state {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-tail {
  width: fit-content;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: #243243;
  color: #6ab3ff;
  font-size: 12px;
  font-weight: 800;
}

.telegram-account.is-active .account-tail {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.account-phone {
  color: inherit;
}

.account-state {
  color: #7f91a3;
  font-size: 12px;
}

.telegram-account.is-active .account-state,
.telegram-dialog.is-active .dialog-date,
.telegram-dialog.is-active .dialog-preview {
  color: rgba(255, 255, 255, 0.78);
}

.telegram-dialog {
  min-height: 72px;
  border-radius: 0;
  padding: 9px 12px;
  color: #e7eef5;
}

.dialog-name {
  color: inherit;
}

.dialog-date,
.dialog-preview {
  color: #7f91a3;
}

.dialog-avatar,
.chat-avatar,
.mini-avatar {
  background: linear-gradient(135deg, #4aa3ff, #2f6ea5);
}

.unread-badge {
  background: #4e9fe5;
}

.telegram-chat {
  background: #0e1621;
}

.telegram-chat-head {
  height: 58px;
  border-bottom-color: #0f1a24;
  background: #17212b;
  color: #e7eef5;
}

.chat-title,
.chat-empty-title {
  color: #e7eef5;
}

.chat-subtitle {
  color: #7f91a3;
}

.chat-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #7f91a3;
  font-size: 20px;
}

.telegram-messages {
  background:
    radial-gradient(circle at 20% 20%, rgba(42, 82, 120, 0.16), transparent 28%),
    radial-gradient(circle at 78% 66%, rgba(42, 82, 120, 0.12), transparent 30%),
    #0e1621;
}

.message-day {
  justify-self: center;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(31, 44, 58, 0.92);
  color: #c7d0d9;
  font-size: 12px;
  font-weight: 700;
}

.bubble {
  background: #182533;
  color: #e7eef5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.telegram-message.outgoing .bubble {
  background: #2b5278;
  color: #ffffff;
}

.message-time {
  color: rgba(231, 238, 245, 0.62);
}

.bubble-reply {
  color: #6ab3ff;
}

.media-chip {
  background: rgba(106, 179, 255, 0.14);
  color: #9bcaff;
}

.message-actions {
  background: #17212b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.message-actions button {
  color: #c7d0d9;
}

.message-actions button:hover {
  background: #243243;
  color: #6ab3ff;
}

.reply-preview,
.composer-notice,
.telegram-composer {
  border-top-color: #0f1a24;
  background: #17212b;
}

.reply-preview {
  color: #e7eef5;
}

.reply-preview span {
  color: #7f91a3;
}

.composer-notice {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: #c7d0d9;
  font-size: 13px;
}

.composer-notice.is-hidden {
  display: none;
}

.composer-notice.error {
  color: #ffb5ba;
  background: #271921;
}

.composer-notice.readonly {
  color: #ffd59d;
  background: #211d17;
}

.telegram-send {
  background: #2f8ee5;
}

.telegram-send:hover {
  background: #2782d5;
}

.live-inbox-list.is-hidden {
  display: none;
}

.dialog-pagination {
  display: flex;
  justify-content: center;
  padding: 12px;
  color: #7f91a3;
  font-size: 12px;
}

.dialog-pagination.is-loading,
.dialog-pagination.is-end {
  min-height: 42px;
  align-items: center;
}

.dialog-pagination .secondary-button {
  min-height: 32px;
  border-color: #2b3a49;
  background: #202b36;
  color: #c7d0d9;
}

.dialog-readonly {
  width: fit-content;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 7px;
  background: rgba(255, 213, 157, 0.14);
  color: #ffd59d;
  font-size: 11px;
  font-weight: 700;
}

.telegram-composer.is-disabled {
  opacity: 0.82;
}

@media (max-width: 1040px) {
  .shell,
  .sidebar,
  .main,
  .topbar,
  .notice,
  .content,
  .telegram-shell,
  .telegram-accounts,
  .telegram-left,
  .telegram-chat {
    min-width: 0;
    max-width: 100%;
  }

  .shell {
    overflow-x: hidden;
  }

  .sidebar,
  .main {
    width: 100%;
  }

  .nav {
    min-width: 0;
    max-width: 100%;
  }

  .telegram-shell,
  .account-settings-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .telegram-accounts {
    border-right: 0;
    border-bottom: 1px solid #0f1a24;
  }

  .telegram-left {
    border-right: 0;
    border-bottom: 1px solid #0f1a24;
  }

  .telegram-dialogs {
    max-height: 360px;
  }

  .telegram-chat {
    min-height: 600px;
  }
}

@media (max-width: 720px) {
  .telegram-messages {
    padding: 14px 10px;
  }

  .bubble {
    max-width: 92%;
  }

  .account-profile {
    grid-template-columns: 1fr;
  }
}

/* Dialogs v5 final polish: Telegram-like message meta, motion, skeletons. */
.telegram-shell {
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.telegram-shell.theme-dark {
  --tg-bubble-in: #182533;
  --tg-bubble-out: #2b5278;
}

.telegram-shell.theme-light {
  --tg-bubble-in: #ffffff;
  --tg-bubble-out: #d9fdd3;
}

.chat-title-wrap {
  overflow: hidden;
}

.chat-subtitle {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--tg-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-messages {
  align-content: start;
  gap: 3px;
}

.telegram-message {
  animation: messageEnter 180ms ease both;
  transition: margin 220ms cubic-bezier(.22, .61, .36, 1), padding 220ms cubic-bezier(.22, .61, .36, 1), opacity 140ms ease, transform 140ms ease, height 220ms cubic-bezier(.22, .61, .36, 1);
}

.telegram-message.has-direction-gap {
  margin-top: 8px;
}

.message-stack {
  max-width: min(680px, 64%);
}

.message-bubble {
  min-width: 62px;
  max-width: 100%;
  border-radius: 10px;
  padding: 8px 10px 6px;
  background: var(--tg-bubble-in);
  color: #e7eef5;
}

.telegram-message.outgoing .message-bubble {
  min-width: 82px;
  background: var(--tg-bubble-out);
  color: #ffffff;
}

.telegram-shell.theme-light .message-bubble {
  color: #182533;
}

.telegram-message.incoming.is-group-first .message-bubble,
.telegram-message.incoming.is-group-middle .message-bubble {
  border-bottom-left-radius: 10px;
}

.telegram-message.outgoing.is-group-first .message-bubble,
.telegram-message.outgoing.is-group-middle .message-bubble {
  border-bottom-right-radius: 10px;
}

.telegram-message.is-group-first .message-bubble::after,
.telegram-message.is-group-middle .message-bubble::after {
  display: none;
}

.message-text {
  overflow-wrap: anywhere;
  word-break: normal;
}

.message-footer {
  width: 100%;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  align-self: flex-end;
  margin-top: 4px;
  padding-left: 18px;
  white-space: nowrap;
  line-height: 1;
}

.message-time,
.message-ticks {
  position: static;
  inset: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  opacity: .82;
}

.message-time {
  color: rgba(231, 238, 245, .62);
}

.message-ticks {
  min-width: 15px;
  justify-content: flex-end;
  color: #8ed1ff;
  letter-spacing: -1px;
}

.telegram-shell.theme-light .message-time {
  color: #7a8a96;
}

.telegram-shell.theme-light .message-ticks {
  color: #3a9df5;
}

.message-day {
  justify-self: center;
  align-self: center;
  margin: 8px 0;
  border: 1px solid rgba(127, 145, 163, .12);
  border-radius: 999px;
  padding: 5px 11px;
}

.bubble-reply {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  border-left: 3px solid #6ab3ff;
  border-radius: 6px;
  padding: 5px 8px 5px 9px;
}

.media-card {
  min-height: 58px;
  overflow: hidden;
}

.media-card.has-thumb .media-thumb {
  background: rgba(127, 145, 163, .14);
}

.message-actions,
.reaction-picker,
.message-action-menu {
  transition: opacity 160ms ease, transform 160ms ease;
}

.message-actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(.96);
}

.telegram-message:hover .message-actions,
.telegram-message:focus-within .message-actions,
.telegram-message.is-picker-open .message-actions,
.telegram-message.is-action-menu-open .message-actions,
.message-actions:hover,
.message-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.reaction-picker,
.message-action-menu {
  transform: translateY(4px) scale(.96);
  transform-origin: top right;
}

.telegram-message.incoming .reaction-picker,
.telegram-message.incoming .message-action-menu {
  transform-origin: top left;
}

.telegram-message.is-picker-open .reaction-picker,
.telegram-message.is-action-menu-open .message-action-menu {
  transform: translateY(0) scale(1);
}

.message-reactions {
  gap: 4px;
}

.message-reaction {
  height: 24px;
  min-width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(51, 144, 236, .22);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(51, 144, 236, .16);
  color: #dceeff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  animation: reactionPop 220ms cubic-bezier(.2, .9, .25, 1.25) both;
}

.reaction-count {
  font-size: 12px;
  font-weight: 700;
}

.message-reaction.is-chosen,
.message-reaction.is-mine {
  border-color: #3390ec;
  background: rgba(51, 144, 236, .28);
}

.message-reaction.is-pending {
  opacity: .62;
}

.reaction-pending-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: reactionPending 850ms ease-in-out infinite;
}

.telegram-message.has-reaction-error .message-reaction.is-error,
.telegram-message.has-reaction-error .message-reaction.is-mine {
  border-color: #e05264;
  animation: reactionShake 260ms ease both;
}

.telegram-shell.theme-light .message-reaction {
  color: #1e5e96;
}

.telegram-message.is-delete-fading .message-bubble,
.telegram-message.is-delete-fading .message-reactions,
.telegram-message.is-delete-fading .message-reaction-error {
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transition: opacity 140ms ease, transform 140ms ease;
}

.telegram-message.is-removing {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
}

.dialog-skeleton,
.chat-skeleton span {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--tg-panel-3) 78%, transparent);
}

.dialog-skeleton::after,
.chat-skeleton span::after,
.media-card.has-thumb .media-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}

.chat-skeleton {
  min-height: 260px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 10px 4px;
}

.chat-skeleton span {
  width: min(360px, 62%);
  height: 42px;
  border-radius: 12px;
}

.chat-skeleton .is-outgoing {
  justify-self: end;
  width: min(320px, 54%);
  background: color-mix(in srgb, var(--tg-bubble-out) 74%, transparent);
}

.chat-skeleton .is-wide {
  width: min(520px, 72%);
  height: 64px;
}

.chat-skeleton .is-short {
  width: min(220px, 42%);
}

.dialog-pagination.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dialog-pagination.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(127, 145, 163, .28);
  border-top-color: var(--tg-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.telegram-composer {
  min-height: 58px;
  transition: min-height 160ms ease, opacity 160ms ease, background-color 180ms ease, border-color 180ms ease;
}

.telegram-composer .telegram-icon-button {
  width: 40px;
  height: 40px;
}

.telegram-send {
  width: 42px;
  height: 42px;
}

.telegram-send.is-sending::after {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.telegram-textarea {
  max-height: 132px;
  transition: height 160ms ease, background-color 180ms ease, border-color 180ms ease;
}

.telegram-composer.is-disabled {
  opacity: .55;
}

.telegram-composer.is-disabled .telegram-textarea::placeholder {
  color: var(--tg-muted);
}

.reply-preview {
  transition: min-height 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.reply-preview.is-hidden {
  opacity: 0;
  transform: translateY(4px);
}

@keyframes messageEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reactionPop {
  0% {
    opacity: 0;
    transform: scale(.72);
  }
  72% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reactionPending {
  0%, 100% {
    opacity: .3;
    transform: scale(.7);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reactionShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

@keyframes skeletonShimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 720px) {
  .message-stack {
    max-width: 90%;
  }

  .message-bubble {
    min-width: 58px;
  }

  .telegram-message.outgoing .message-bubble {
    min-width: 78px;
  }

  .message-footer {
    gap: 5px;
    padding-left: 14px;
  }

  .chat-subtitle {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telegram-message,
  .message-reaction,
  .reaction-pending-dot,
  .telegram-message.is-delete-fading .message-bubble,
  .telegram-message.is-removing,
  .dialog-skeleton::after,
  .chat-skeleton span::after,
  .telegram-send.is-sending::after,
  .dialog-pagination.is-loading::before {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }

  .telegram-message,
  .message-reaction,
  .telegram-message.is-delete-fading .message-bubble,
  .telegram-message.is-removing {
    transform: none !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(237, 242, 241, 0.96) 360px),
    var(--bg);
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

::selection {
  background: rgba(11, 122, 96, 0.18);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c3d0cc;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background:
    linear-gradient(180deg, rgba(19, 44, 38, 0.96), rgba(7, 19, 16, 1)),
    var(--ink);
  color: #f5fbf8;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-weight: 800;
  letter-spacing: 0;
}

.brand-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.brand-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #a9b8b3;
}

.nav {
  display: grid;
  gap: 5px;
}

.nav-item {
  position: relative;
  height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #cad7d3;
  background: transparent;
  text-align: left;
  padding: 0 12px 0 30px;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.nav-item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
  transform: translateY(-50%);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.nav-item.is-active {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: inset 3px 0 0 #59d0b5;
}

.nav-item.is-active::before {
  opacity: 1;
  background: #59d0b5;
}

.nav-item:active {
  transform: translateY(1px);
}

.main {
  min-width: 0;
  padding: 26px 24px 34px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  min-height: 64px;
  margin: -10px -4px 16px;
  padding: 10px 4px 8px;
  background: rgba(237, 242, 241, 0.92);
  backdrop-filter: blur(12px);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: 0;
}

h2 {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}

#pageSubtitle {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-pill,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-strong);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.status-pill::before,
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
}

.status-pill.ok,
.badge.online,
.badge.approved,
.badge.sent {
  color: var(--green);
  background: var(--green-soft);
  border-color: #b7dfd3;
}

.status-pill.warn,
.badge.pending_review,
.badge.paused {
  color: var(--amber);
  background: var(--amber-soft);
  border-color: #ecd3a3;
}

.status-pill.error,
.badge.disabled,
.badge.rejected,
.badge.failed,
.badge.error,
.badge.offline {
  color: var(--red);
  background: var(--red-soft);
  border-color: #efbec2;
}

.icon-button,
.primary-button,
.secondary-button,
.danger-button,
.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  min-height: 36px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.icon-button {
  width: 38px;
  padding: 0;
  font-size: 18px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.primary-button {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(11, 122, 96, 0.18);
}

.secondary-button {
  color: var(--muted-strong);
  background: #ffffff;
}

.secondary-button:hover,
.icon-button:hover,
.segment:hover {
  border-color: #8da09b;
  background: #fbfdfc;
}

.primary-button:hover {
  background: var(--green-strong);
  border-color: var(--green-strong);
}

.danger-button {
  color: var(--red);
  border-color: #e0a9ae;
  background: #fff8f8;
  font-weight: 700;
}

.danger-button:hover {
  background: #fff0f1;
}

.icon-button:active,
.primary-button:active,
.secondary-button:active,
.danger-button:active,
.segment:active {
  transform: translateY(1px);
}

.notice {
  position: relative;
  margin-bottom: 16px;
  border: 1px solid #ead1a2;
  background: #fff8e9;
  color: #61430d;
  border-radius: var(--radius);
  padding: 12px 14px 12px 42px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 8px 22px rgba(147, 98, 18, 0.08);
}

.notice::before {
  content: "!";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--amber);
  font-size: 12px;
  font-weight: 900;
}

.content {
  display: grid;
  gap: 16px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.metric-card,
.panel,
.resource-item,
.task-item {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.metric-card {
  position: relative;
  min-height: 118px;
  padding: 16px;
  overflow: hidden;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--green);
}

.metric-card:nth-child(2)::before {
  background: var(--blue);
}

.metric-card:nth-child(3)::before {
  background: var(--amber);
}

.metric-card:nth-child(4)::before {
  background: var(--violet);
}

.metric-card::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 16px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--green-soft);
}

.metric-card:nth-child(2)::after {
  background: var(--blue-soft);
}

.metric-card:nth-child(3)::after {
  background: var(--amber-soft);
}

.metric-card:nth-child(4)::after {
  background: var(--violet-soft);
}

.metric-label {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 50px);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.metric-value {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-size: 34px;
  line-height: 1;
  font-weight: 850;
}

.metric-note {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  align-items: start;
  gap: 16px;
}

.panel {
  min-width: 0;
  overflow: hidden;
}

.panel-header {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #fbfdfc);
}

.panel-tools {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.inline-form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.input,
.select,
.textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--text);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.input,
.select {
  min-height: 36px;
  padding: 0 10px;
}

.select {
  padding-right: 28px;
}

.input.compact {
  width: 100%;
}

.textarea {
  width: 100%;
  resize: vertical;
  padding: 10px 11px;
  min-height: 76px;
  line-height: 1.45;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: #9eb0ab;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--blue);
  box-shadow: var(--focus);
  background: #ffffff;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 14px;
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  background: var(--surface-muted);
}

table th:last-child,
table td:last-child {
  width: 252px;
}

tbody tr:hover {
  background: #f8fbfa;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.table-wrap .row-actions {
  flex-wrap: nowrap;
}

.activity-list,
.compact-list,
.dialog-list,
.message-list,
.resource-grid,
.task-list {
  display: grid;
}

.activity-list,
.compact-list {
  padding: 8px;
}

.activity-item,
.post-item,
.dialog-item {
  border-radius: var(--radius);
  padding: 11px 12px;
}

.activity-item + .activity-item,
.post-item + .post-item {
  border-top: 1px solid var(--line);
}

.activity-title,
.post-title,
.dialog-title,
.resource-title {
  font-weight: 800;
  line-height: 1.32;
}

.activity-meta,
.post-meta,
.dialog-meta,
.resource-meta,
.task-meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.inbox-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 16px;
  height: calc(100vh - 202px);
  min-height: 480px;
}

.dialog-panel,
.message-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dialog-list {
  overflow: auto;
  padding: 8px;
  gap: 4px;
}

.dialog-item {
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  color: var(--text);
}

.dialog-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}

.dialog-item:hover {
  border-color: var(--line);
  background: #f8fbfa;
}

.dialog-item.is-active {
  border-color: #b9d8d0;
  background: var(--green-soft);
}

.dialog-item.is-active::before {
  background: var(--green);
}

.message-head {
  min-height: 60px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #fbfdfc);
}

.message-list {
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 16px;
  flex: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(243, 247, 246, 0.92)),
    #f4f8f7;
}

.message {
  max-width: 74%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(16, 24, 23, 0.06);
}

.message.outgoing {
  justify-self: end;
  border-color: #b6ddcf;
  background: var(--green-soft);
}

.message-text {
  white-space: pre-wrap;
  line-height: 1.48;
}

.message-time {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

.reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.resource-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 12px;
}

.resource-item {
  box-shadow: none;
  padding: 14px;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.resource-item:hover {
  border-color: #b9d8d0;
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.task-list {
  gap: 10px;
  padding: 12px;
}

.task-item {
  box-shadow: none;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.task-text {
  margin-top: 8px;
  line-height: 1.48;
  font-size: 14px;
}

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.segment {
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  font-size: 13px;
  color: var(--muted-strong);
}

.segment.is-active {
  background: #ffffff;
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: 0 5px 12px rgba(16, 24, 23, 0.06);
}

.settings-list {
  margin: 0;
  padding: 12px 16px;
  display: grid;
  gap: 0;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(140px, 210px) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.settings-row:last-child {
  border-bottom: 0;
}

.settings-row dt {
  color: var(--muted);
  font-size: 13px;
}

.settings-row dd {
  margin: 0;
  word-break: break-word;
  font-size: 13px;
  color: var(--text);
}

.empty {
  color: var(--muted);
  padding: 24px;
  text-align: center;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .split-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1040px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    padding: 12px;
    gap: 12px;
  }

  .brand {
    min-height: 44px;
  }

  .nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-item {
    min-width: max-content;
    white-space: nowrap;
  }

  .main {
    padding-top: 18px;
  }

  .topbar {
    top: 68px;
  }

  .inbox-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .dialog-list,
  .message-list {
    max-height: 430px;
  }
}

@media (max-width: 720px) {
  .main {
    padding: 14px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    margin: -6px 0 14px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  h1 {
    font-size: 24px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .panel-header,
  .reply-form,
  .task-item {
    grid-template-columns: 1fr;
  }

  .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .inline-form {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .message {
    max-width: 94%;
  }

  .settings-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .row-actions {
    justify-content: flex-start;
  }

  .table-wrap .row-actions {
    flex-wrap: wrap;
  }
}

/* Dialogs benchmark: Telegram Desktop/Web-inspired workspace */
.telegram-shell {
  --tg-bg: #0e1621;
  --tg-panel: #17212b;
  --tg-panel-2: #1c2733;
  --tg-panel-3: #202b36;
  --tg-line: #0f1a24;
  --tg-line-soft: rgba(127, 145, 163, 0.18);
  --tg-text: #e7eef5;
  --tg-muted: #7f91a3;
  --tg-accent: #3390ec;
  --tg-accent-soft: rgba(51, 144, 236, 0.18);
  --tg-bubble-in: #182533;
  --tg-bubble-out: #2b5278;
  --tg-bubble-out-soft: #315f8a;
  width: 100%;
  height: min(740px, calc(100vh - 206px));
  min-height: 500px;
  display: grid;
  grid-template-columns: 220px 342px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  background: var(--tg-bg);
  box-shadow: 0 24px 70px rgba(4, 12, 20, 0.28);
}

.telegram-accounts,
.telegram-left,
.telegram-chat {
  min-width: 0;
  min-height: 0;
}

.telegram-accounts,
.telegram-left {
  display: flex;
  flex-direction: column;
  background: var(--tg-panel);
  border-right: 1px solid var(--tg-line);
}

.telegram-accountbar,
.telegram-search {
  min-height: 58px;
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--tg-panel);
  border-bottom: 1px solid var(--tg-line);
}

.telegram-accountbar {
  grid-template-columns: 36px minmax(0, 1fr);
}

.telegram-left .telegram-search {
  grid-template-columns: minmax(0, 1fr) 36px 36px;
}

.telegram-search-input,
.telegram-textarea {
  width: 100%;
  border: 1px solid transparent;
  background: #242f3d;
  color: var(--tg-text);
  outline: none;
}

.telegram-search-input {
  height: 38px;
  border-radius: 999px;
  padding: 0 14px;
}

.telegram-search-input::placeholder,
.telegram-textarea::placeholder {
  color: var(--tg-muted);
}

.telegram-search-input:focus,
.telegram-textarea:focus {
  border-color: rgba(51, 144, 236, 0.5);
  box-shadow: 0 0 0 3px var(--tg-accent-soft);
}

.telegram-icon-button,
.telegram-send,
.chat-action-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tg-muted);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.telegram-icon-button:hover,
.chat-action-button:hover {
  background: var(--tg-panel-3);
  color: #79bdff;
}

.telegram-icon-button:active,
.telegram-send:active,
.chat-action-button:active {
  transform: translateY(1px);
}

.telegram-meta {
  min-height: 27px;
  padding: 7px 12px 6px;
  color: var(--tg-muted);
  background: var(--tg-panel);
  border-bottom: 1px solid rgba(15, 26, 36, 0.65);
  font-size: 12px;
  line-height: 1.2;
}

.telegram-account-list,
.telegram-dialogs {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 0 10px;
}

.telegram-account,
.telegram-dialog {
  width: 100%;
  position: relative;
  display: grid;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tg-text);
  text-align: left;
  transition: background 120ms ease;
}

.telegram-account {
  min-height: 64px;
  grid-template-columns: 44px minmax(0, 1fr) 10px;
  gap: 10px;
  padding: 8px 10px 8px 12px;
}

.telegram-dialog {
  min-height: 78px;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 12px;
}

.telegram-account:hover,
.telegram-dialog:hover {
  background: var(--tg-panel-3);
}

.telegram-account.is-active,
.telegram-dialog.is-active {
  background: #2f6ea5;
  color: #ffffff;
}

.telegram-account.is-active::before,
.telegram-dialog.is-active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #75c6ff;
}

.telegram-account.is-disabled {
  opacity: 0.56;
}

.account-presence {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5b6b78;
}

.account-presence.is-online {
  background: #4fd08b;
  box-shadow: 0 0 0 3px rgba(79, 208, 139, 0.14);
}

.account-main,
.dialog-main {
  min-width: 0;
  display: grid;
}

.account-main {
  gap: 2px;
}

.account-phone,
.account-tail,
.account-state,
.dialog-name,
.dialog-date,
.dialog-preview,
.dialog-kind,
.dialog-username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-phone,
.dialog-name {
  color: inherit;
  font-weight: 700;
}

.account-tail {
  width: fit-content;
  min-height: 19px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 7px;
  background: #243243;
  color: #72bfff;
  font-size: 12px;
  font-weight: 800;
}

.account-state,
.dialog-date,
.dialog-preview,
.dialog-kind,
.dialog-username {
  color: var(--tg-muted);
  font-size: 12px;
}

.telegram-account.is-active .account-tail {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.telegram-account.is-active .account-state,
.telegram-dialog.is-active .dialog-date,
.telegram-dialog.is-active .dialog-preview,
.telegram-dialog.is-active .dialog-kind,
.telegram-dialog.is-active .dialog-username {
  color: rgba(255, 255, 255, 0.78);
}

.dialog-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.dialog-topline {
  justify-content: space-between;
}

.dialog-midline {
  min-height: 18px;
}

.dialog-kind {
  max-width: 92px;
  color: #6ab3ff;
}

.dialog-bottomline {
  justify-content: space-between;
  margin-top: 2px;
}

.dialog-preview {
  min-width: 0;
  line-height: 1.32;
}

.dialog-avatar,
.chat-avatar,
.mini-avatar,
.profile-avatar {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #55b3ff, #2f6ea5);
  color: #ffffff;
  font-weight: 800;
}

.dialog-avatar,
.chat-avatar {
  width: 48px;
  height: 48px;
}

.mini-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.muted-avatar {
  background: #283545;
  color: #8ea0af;
}

.unread-badge {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 7px;
  background: var(--tg-accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.live-inbox-panel {
  margin: 8px 10px 6px;
  border: 1px solid var(--tg-line-soft);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(28, 39, 51, 0.72);
}

.live-inbox-head {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: var(--tg-text);
  border-bottom: 1px solid var(--tg-line-soft);
  font-size: 12px;
  font-weight: 800;
}

.live-inbox-dot {
  color: #4fd08b;
  font-size: 10px;
}

.live-inbox-list {
  max-height: 154px;
  overflow: auto;
}

.live-inbox-item {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 0;
  padding: 8px 10px;
  background: transparent;
  color: var(--tg-text);
  text-align: left;
}

.live-inbox-item:hover {
  background: var(--tg-panel-3);
}

.live-inbox-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.live-inbox-title,
.live-inbox-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-inbox-title {
  font-size: 13px;
  font-weight: 800;
}

.live-inbox-text,
.live-inbox-time,
.live-inbox-empty {
  color: var(--tg-muted);
  font-size: 12px;
}

.live-inbox-empty {
  padding: 12px 10px;
}

.telegram-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--tg-bg);
}

.telegram-chat-head {
  height: 58px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--tg-line);
  background: var(--tg-panel);
  color: var(--tg-text);
}

.chat-title-wrap {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.chat-title,
.chat-empty-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tg-text);
  font-weight: 800;
}

.chat-subtitle {
  color: var(--tg-muted);
  font-size: 12px;
}

.chat-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.telegram-messages {
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 18px 26px;
  background-color: var(--tg-bg);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.018) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.014) 25%, transparent 25%);
  background-size: 28px 28px;
}

.message-day {
  justify-self: center;
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(31, 44, 58, 0.92);
  color: #c7d0d9;
  font-size: 12px;
  font-weight: 800;
}

.telegram-message {
  display: flex;
  position: relative;
}

.telegram-message.incoming {
  justify-content: flex-start;
}

.telegram-message.outgoing {
  justify-content: flex-end;
}

.bubble {
  position: relative;
  max-width: min(680px, 78%);
  border-radius: 10px;
  padding: 8px 10px 6px;
  background: var(--tg-bubble-in);
  color: var(--tg-text);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.telegram-message.incoming .bubble {
  border-bottom-left-radius: 4px;
}

.telegram-message.outgoing .bubble {
  border-bottom-right-radius: 4px;
  background: var(--tg-bubble-out);
  color: #ffffff;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 9px;
  height: 14px;
}

.telegram-message.incoming .bubble::after {
  left: -6px;
  background: linear-gradient(225deg, var(--tg-bubble-in) 0 50%, transparent 52%);
}

.telegram-message.outgoing .bubble::after {
  right: -6px;
  background: linear-gradient(135deg, var(--tg-bubble-out) 0 50%, transparent 52%);
}

.message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.42;
  font-size: 14px;
}

.message-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.message-time,
.message-ticks {
  color: rgba(231, 238, 245, 0.62);
  font-size: 11px;
  line-height: 1;
}

.message-ticks {
  color: #8ed1ff;
  letter-spacing: -3px;
  padding-right: 2px;
}

.bubble-reply {
  display: grid;
  gap: 2px;
  margin-bottom: 7px;
  border-left: 3px solid #6ab3ff;
  border-radius: 4px;
  padding: 5px 8px;
  background: rgba(106, 179, 255, 0.1);
}

.bubble-reply strong,
.bubble-reply span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.bubble-reply strong {
  color: #8dccff;
}

.bubble-reply span {
  color: rgba(231, 238, 245, 0.72);
}

.media-card {
  min-width: 220px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 7px;
  border-radius: 8px;
  padding: 9px;
  background: rgba(106, 179, 255, 0.13);
}

.media-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(51, 144, 236, 0.42);
  color: #ffffff;
  font-weight: 900;
}

.media-title,
.media-caption {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-title {
  font-weight: 800;
}

.media-caption {
  margin-top: 3px;
  color: rgba(231, 238, 245, 0.68);
  font-size: 12px;
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.message-reactions.is-empty {
  display: none;
}

.message-reaction {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 7px;
  background: rgba(106, 179, 255, 0.16);
  color: #d8e9f8;
  font-size: 12px;
}

.message-actions {
  position: absolute;
  top: -38px;
  right: 0;
  display: flex;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.96);
  border-radius: 999px;
  padding: 4px;
  background: var(--tg-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: opacity 140ms ease, transform 140ms ease;
}

.telegram-message.incoming .message-actions {
  left: 0;
  right: auto;
}

.telegram-message:hover .message-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.message-actions button {
  min-width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 8px;
  background: transparent;
  color: #c7d0d9;
  font-size: 12px;
}

.message-actions button:hover {
  background: var(--tg-panel-3);
  color: #79bdff;
}

.message-reply-button {
  font-weight: 800;
}

.reply-preview {
  flex: none;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--tg-line);
  padding: 8px 16px 8px 20px;
  background: var(--tg-panel);
  color: var(--tg-text);
}

.reply-preview.is-hidden {
  display: none;
}

.reply-preview-content {
  min-width: 0;
  border-left: 3px solid #6ab3ff;
  padding-left: 10px;
}

.reply-preview strong,
.reply-preview span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.reply-preview span {
  margin-top: 2px;
  color: var(--tg-muted);
}

.reply-preview button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tg-muted);
  font-size: 20px;
}

.reply-preview button:hover {
  background: var(--tg-panel-3);
  color: var(--tg-text);
}

.telegram-composer {
  flex: none;
  min-height: 60px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 42px;
  align-items: end;
  gap: 8px;
  border-top: 1px solid var(--tg-line);
  padding: 10px 14px;
  background: var(--tg-panel);
}

.telegram-composer.is-disabled {
  opacity: 0.58;
}

.telegram-textarea {
  min-height: 40px;
  max-height: 132px;
  resize: none;
  border-radius: 20px;
  padding: 10px 14px;
  line-height: 1.35;
}

.telegram-send {
  background: var(--tg-accent);
  color: #ffffff;
  font-size: 17px;
}

.telegram-send:hover {
  background: #2782d5;
}

.telegram-empty-state {
  align-self: center;
  justify-self: center;
  width: min(340px, 88%);
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 22px 18px;
  color: var(--tg-muted);
  text-align: center;
}

.telegram-dialogs .telegram-empty-state,
.telegram-account-list .telegram-empty-state {
  margin: 28px auto;
}

.telegram-empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tg-panel-3);
  color: #7abfff;
  font-weight: 900;
}

.telegram-empty-title {
  color: var(--tg-text);
  font-weight: 900;
}

.telegram-empty-text {
  max-width: 280px;
  line-height: 1.38;
  font-size: 13px;
}

.telegram-skeleton-list {
  display: grid;
}

.dialog-skeleton {
  min-height: 72px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
}

.dialog-skeleton span,
.dialog-skeleton i,
.dialog-skeleton b,
.chat-skeleton span {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #202b36, #283748, #202b36);
  background-size: 180% 100%;
  animation: telegramShimmer 1.25s linear infinite;
}

.dialog-skeleton span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.dialog-skeleton div {
  display: grid;
  gap: 9px;
}

.dialog-skeleton i {
  width: 70%;
  height: 13px;
}

.dialog-skeleton b {
  width: 92%;
  height: 11px;
}

.chat-skeleton {
  display: grid;
  gap: 10px;
  align-content: end;
  min-height: 100%;
}

.chat-skeleton span {
  width: min(520px, 78%);
  height: 38px;
  border-radius: 10px;
}

.chat-skeleton span:nth-child(even) {
  justify-self: end;
  width: min(460px, 68%);
}

@keyframes telegramShimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (max-width: 1180px) {
  .telegram-shell {
    grid-template-columns: 196px 318px minmax(0, 1fr);
  }
}

@media (max-width: 1040px) {
  .telegram-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .telegram-accounts,
  .telegram-left {
    border-right: 0;
    border-bottom: 1px solid var(--tg-line);
  }

  .telegram-account-list {
    max-height: 220px;
  }

  .telegram-dialogs {
    max-height: 380px;
  }

  .telegram-chat {
    min-height: 560px;
  }
}

@media (max-width: 720px) {
  .telegram-accountbar,
  .telegram-search,
  .telegram-chat-head,
  .telegram-composer {
    padding-left: 10px;
    padding-right: 10px;
  }

  .telegram-messages {
    padding: 14px 10px;
  }

  .bubble {
    max-width: 90%;
  }

  .message-actions {
    display: none;
  }

  .media-card {
    min-width: 0;
  }
}

/* Telegram-like Dialogs polish layer */
:root {
  --tg-bg: #0e1621;
  --tg-panel: #17212b;
  --tg-panel-2: #202b36;
  --tg-panel-3: #242f3d;
  --tg-line: #0f1a24;
  --tg-line-soft: #1e2a36;
  --tg-text: #e7eef5;
  --tg-muted: #7f91a3;
  --tg-accent: #3390ec;
  --tg-active: #2f6ea5;
  --tg-bubble-in: #182533;
  --tg-bubble-out: #2b5278;
  --tg-online: #4fd08b;
  --tg-warning: #e0a84f;
  --tg-error: #e05264;
}

.telegram-shell {
  height: var(--telegram-shell-height, calc(100vh - 222px));
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(220px, 18vw, 256px) clamp(340px, 28vw, 380px) minmax(480px, 1fr);
  overflow: hidden;
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  background: var(--tg-bg);
}

.telegram-accounts,
.telegram-left,
.telegram-chat {
  min-height: 0;
}

.telegram-accounts,
.telegram-left {
  background: var(--tg-panel);
  border-right: 1px solid var(--tg-line);
}

.telegram-account-list,
.telegram-dialogs,
.telegram-messages {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.telegram-accountbar,
.telegram-search,
.telegram-chat-head,
.telegram-composer,
.reply-preview,
.composer-notice {
  border-color: var(--tg-line);
  background: var(--tg-panel);
}

.telegram-search-input,
.telegram-textarea {
  border-radius: 20px;
  background: var(--tg-panel-3);
  color: var(--tg-text);
}

.telegram-search-input::placeholder,
.telegram-textarea::placeholder {
  color: var(--tg-muted);
}

.telegram-dialog {
  min-height: 74px;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 9px 12px 9px 9px;
  color: var(--tg-text);
}

.telegram-dialog:hover {
  background: var(--tg-panel-2);
}

.telegram-dialog.is-active {
  border-left-color: #75c6ff;
  background: var(--tg-active);
  color: #ffffff;
}

.telegram-dialog.is-active .dialog-kind,
.telegram-dialog.is-active .dialog-username,
.telegram-dialog.is-active .dialog-date,
.telegram-dialog.is-active .dialog-preview {
  color: rgba(255, 255, 255, 0.78);
}

.dialog-readonly,
.dialog-service,
.dialog-archive {
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 800;
}

.dialog-readonly {
  background: rgba(224, 168, 79, 0.14);
  color: #ffd59d;
}

.dialog-service {
  background: rgba(127, 145, 163, 0.16);
  color: #aebdca;
}

.dialog-archive {
  background: rgba(51, 144, 236, 0.12);
  color: #9bcbff;
}

.dialog-pagination {
  position: sticky;
  bottom: 0;
  min-height: 42px;
  align-items: center;
  border-top: 1px solid var(--tg-line);
  background: rgba(23, 33, 43, 0.96);
  backdrop-filter: blur(8px);
}

.dialog-pagination .secondary-button {
  min-height: 40px;
}

.telegram-chat {
  background: var(--tg-bg);
}

.telegram-chat-head {
  height: 58px;
  padding: 7px 14px;
}

.chat-back-button {
  display: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tg-muted);
  font-size: 26px;
}

.chat-back-button:hover,
.chat-action-button:hover,
.telegram-icon-button:hover {
  background: var(--tg-panel-3);
  color: #8dccff;
}

.telegram-messages {
  gap: 4px;
  padding: 18px 26px;
  background-color: var(--tg-bg);
  background-image:
    radial-gradient(circle at 18% 20%, rgba(51, 144, 236, 0.035), transparent 28%),
    radial-gradient(circle at 80% 72%, rgba(255, 255, 255, 0.018), transparent 30%);
}

.message-day {
  margin: 6px 0;
  padding: 5px 11px;
}

.telegram-message.has-direction-gap {
  margin-top: 6px;
}

.message-bubble {
  max-width: min(680px, 64%);
  border-radius: 10px;
  padding: 8px 10px 6px;
}

.telegram-message.is-group-first .message-bubble::after,
.telegram-message.is-group-middle .message-bubble::after {
  display: none;
}

.telegram-message.incoming.is-group-first .message-bubble,
.telegram-message.incoming.is-group-middle .message-bubble {
  border-bottom-left-radius: 10px;
}

.telegram-message.outgoing.is-group-first .message-bubble,
.telegram-message.outgoing.is-group-middle .message-bubble {
  border-bottom-right-radius: 10px;
}

.telegram-message.incoming.is-group-middle .message-bubble,
.telegram-message.incoming.is-group-last .message-bubble {
  border-top-left-radius: 6px;
}

.telegram-message.outgoing.is-group-middle .message-bubble,
.telegram-message.outgoing.is-group-last .message-bubble {
  border-top-right-radius: 6px;
}

.message-reactions {
  justify-content: flex-start;
}

.telegram-message.outgoing .message-reactions {
  justify-content: flex-end;
}

.message-reaction {
  height: 24px;
  border: 1px solid transparent;
  background: rgba(51, 144, 236, 0.16);
}

.message-reaction.is-mine {
  border-color: var(--tg-accent);
  background: rgba(51, 144, 236, 0.28);
}

.message-actions {
  z-index: 5;
  max-width: calc(100vw - 40px);
}

.reaction-picker {
  position: absolute;
  top: -46px;
  right: 0;
  display: none;
  grid-template-columns: repeat(10, 30px);
  gap: 2px;
  border-radius: 999px;
  padding: 5px;
  background: var(--tg-panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
}

.telegram-message.incoming .reaction-picker {
  left: 0;
  right: auto;
}

.telegram-message.is-picker-open .reaction-picker {
  display: grid;
}

.telegram-message.is-picker-open .message-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.reaction-picker button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  font-size: 17px;
}

.message-mobile-menu {
  display: none;
}

.telegram-composer {
  position: sticky;
  bottom: 0;
  z-index: 4;
}

.telegram-composer.is-disabled {
  opacity: 0.55;
}

.telegram-send.is-sending {
  position: relative;
  color: transparent;
}

.telegram-send.is-sending::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: telegramSpin 800ms linear infinite;
}

@keyframes telegramSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1280px) {
  .telegram-shell {
    grid-template-columns: 220px 340px minmax(420px, 1fr);
  }
}

@media (max-width: 1040px) {
  .telegram-shell {
    height: var(--telegram-shell-height, calc(100vh - 260px));
    min-height: 0;
    grid-template-columns: minmax(300px, 360px) minmax(360px, 1fr);
    grid-template-rows: minmax(150px, 200px) minmax(0, 1fr);
  }

  .telegram-accounts {
    grid-column: 1;
    grid-row: 1;
  }

  .telegram-left {
    grid-column: 1;
    grid-row: 2;
  }

  .telegram-chat {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .telegram-account-list {
    max-height: none;
  }

  .telegram-dialogs {
    max-height: none;
  }

  .telegram-chat {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .telegram-shell {
    display: block;
    height: var(--telegram-shell-height, calc(100vh - 132px));
    min-height: 0;
  }

  .telegram-shell:not(.is-chat-open) .telegram-chat {
    display: none;
  }

  .telegram-shell.is-chat-open .telegram-accounts,
  .telegram-shell.is-chat-open .telegram-left {
    display: none;
  }

  .telegram-chat {
    height: 100%;
    min-height: 0;
  }

  .telegram-shell:not(.is-chat-open) .telegram-accounts {
    height: 132px;
  }

  .telegram-shell:not(.is-chat-open) .telegram-left {
    height: calc(100% - 132px);
  }

  .telegram-shell:not(.is-chat-open) .telegram-account-list {
    max-height: none;
  }

  .telegram-shell:not(.is-chat-open) .live-inbox-panel {
    flex: none;
    max-height: 64px;
  }

  .telegram-shell:not(.is-chat-open) .live-inbox-list {
    max-height: 28px;
    overflow: hidden;
  }

  .chat-back-button {
    display: grid;
    place-items: center;
    flex: none;
  }

  .telegram-chat-head {
    height: 56px;
    padding: 7px 10px;
  }

  .telegram-messages {
    padding: 10px 10px 14px;
  }

  .message-bubble {
    max-width: 90%;
  }

  .message-actions {
    display: flex;
    top: auto;
    right: 4px;
    bottom: -32px;
    opacity: 1;
    pointer-events: none;
    box-shadow: none;
    background: transparent;
  }

  .message-actions .message-mobile-menu,
  .message-actions .reaction-picker.is-open,
  .message-actions .message-action-menu.is-open {
    pointer-events: auto;
  }

  .message-actions .message-reply-button,
  .message-actions .message-reaction-trigger {
    display: none;
  }

  .message-mobile-menu {
    display: inline-flex;
    background: rgba(23, 33, 43, 0.84);
  }

  .reaction-picker {
    top: auto;
    right: 0;
    bottom: 32px;
    grid-template-columns: repeat(5, 30px);
    border-radius: 18px;
  }

  .telegram-composer {
    min-height: 56px;
    padding: 8px 10px;
  }

  .telegram-textarea {
    min-height: 38px;
  }
}

/* Telegram-like visual iteration */
.telegram-shell {
  color: var(--tg-text);
  box-shadow: 0 22px 55px rgba(3, 10, 18, 0.26);
}

.telegram-shell.theme-light {
  --tg-bg: #dfe7ef;
  --tg-panel: #ffffff;
  --tg-panel-2: #eef3f7;
  --tg-panel-3: #edf3f8;
  --tg-line: #cfdae4;
  --tg-line-soft: #dfe7ee;
  --tg-text: #17212b;
  --tg-muted: #6b7f91;
  --tg-accent: #3390ec;
  --tg-active: #419fd9;
  --tg-bubble-in: #ffffff;
  --tg-bubble-out: #e3f5d4;
  --tg-online: #35b779;
  --tg-warning: #b77d25;
  --tg-error: #d94b5d;
  color: var(--tg-text);
  box-shadow: 0 22px 46px rgba(60, 76, 93, 0.16);
}

.telegram-left .telegram-search {
  grid-template-columns: minmax(0, 1fr) 36px 36px 36px;
}

.avatar {
  position: relative;
  overflow: hidden;
  background: var(--avatar-bg, linear-gradient(135deg, #55b3ff, #2f6ea5));
  background-position: center;
  background-size: cover;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
  user-select: none;
}

.avatar.has-image {
  color: transparent;
  text-shadow: none;
}

.account-avatar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--tg-panel);
  border-radius: 999px;
  background: #68798b;
}

.telegram-account:has(.account-presence.is-online) .account-avatar::after {
  background: var(--tg-online);
}

.telegram-account {
  min-height: 56px;
  grid-template-columns: 44px minmax(0, 1fr) 10px;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 0;
}

.telegram-account .dialog-avatar {
  width: 42px;
  height: 42px;
  font-size: 13px;
}

.account-phone,
.account-tail,
.account-state,
.dialog-name,
.dialog-preview,
.dialog-username,
.chat-title,
.chat-subtitle,
.live-inbox-title,
.live-inbox-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-phone {
  font-size: 13px;
  font-weight: 800;
}

.account-tail {
  color: color-mix(in srgb, var(--tg-muted) 76%, var(--tg-text));
  font-size: 12px;
}

.account-state {
  color: var(--tg-muted);
  font-size: 11px;
}

.telegram-dialog {
  min-height: 76px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  border-left-width: 3px;
  padding: 9px 11px 9px 8px;
}

.telegram-dialog .dialog-avatar {
  width: 48px;
  height: 48px;
  font-size: 15px;
}

.dialog-main {
  min-width: 0;
  gap: 2px;
}

.dialog-name {
  color: var(--tg-text);
  font-size: 14px;
  font-weight: 800;
}

.dialog-date {
  flex: none;
  max-width: 82px;
  color: var(--tg-muted);
  font-size: 11px;
}

.dialog-midline {
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
}

.dialog-kind,
.dialog-username {
  flex: 0 1 auto;
  color: color-mix(in srgb, var(--tg-muted) 84%, var(--tg-accent));
  font-size: 11px;
}

.dialog-readonly,
.dialog-service,
.dialog-archive {
  flex: none;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.dialog-preview {
  color: color-mix(in srgb, var(--tg-muted) 82%, var(--tg-text));
  font-size: 13px;
}

.telegram-dialog.is-active .dialog-name,
.telegram-dialog.is-active .dialog-kind,
.telegram-dialog.is-active .dialog-username,
.telegram-dialog.is-active .dialog-preview,
.telegram-dialog.is-active .dialog-date {
  color: rgba(255, 255, 255, 0.86);
}

.unread-badge {
  flex: none;
  min-width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2px rgba(23, 33, 43, 0.4);
}

.telegram-chat-head {
  gap: 11px;
  min-width: 0;
}

.chat-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-avatar {
  width: 42px;
  height: 42px;
  font-size: 14px;
}

.chat-title {
  font-size: 15px;
  line-height: 1.15;
}

.chat-subtitle {
  line-height: 1.2;
}

.chat-actions {
  flex: none;
  gap: 4px;
}

.chat-action-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tg-muted);
  font-size: 18px;
}

.telegram-messages {
  gap: 3px;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px),
    radial-gradient(circle at 56px 48px, rgba(51, 144, 236, 0.022) 0 1px, transparent 1px);
  background-size: 72px 72px;
}

.telegram-shell.theme-light .telegram-messages {
  background-image:
    radial-gradient(circle at 20px 20px, rgba(65, 159, 217, 0.055) 0 1px, transparent 1px),
    radial-gradient(circle at 56px 48px, rgba(23, 33, 43, 0.04) 0 1px, transparent 1px);
}

.message-day {
  margin: 8px 0 7px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}

.telegram-message {
  padding-inline: 6px;
}

.message-stack {
  position: relative;
  max-width: min(680px, 64%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.telegram-message.outgoing .message-stack {
  align-items: flex-end;
}

.message-bubble {
  max-width: 100%;
  min-width: 48px;
  display: inline-flex;
  flex-direction: column;
  padding: 8px 10px 5px;
  overflow: visible;
}

.message-text {
  color: inherit;
  line-height: 1.42;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.message-footer {
  align-self: flex-end;
  min-height: 14px;
  margin-top: 4px;
  padding-left: 14px;
  white-space: nowrap;
}

.message-time,
.message-ticks {
  font-size: 11px;
  line-height: 1;
}

.message-time {
  color: rgba(231, 238, 245, 0.64);
}

.telegram-shell.theme-light .message-time {
  color: rgba(71, 91, 108, 0.72);
}

.message-ticks {
  color: #8ed1ff;
  letter-spacing: -2px;
}

.telegram-shell.theme-light .message-ticks {
  color: #4b9ed9;
}

.message-reactions {
  max-width: 100%;
  margin-top: 3px;
  padding: 0 2px;
}

.message-reaction {
  height: 24px;
  min-width: 28px;
  justify-content: center;
  gap: 3px;
  padding: 0 8px;
  border-color: rgba(51, 144, 236, 0.2);
  color: #dceeff;
  backdrop-filter: blur(8px);
}

.telegram-shell.theme-light .message-reaction {
  background: rgba(51, 144, 236, 0.12);
  border-color: rgba(51, 144, 236, 0.22);
  color: #1e5e96;
}

.message-reaction-error {
  max-width: 100%;
  margin-top: 4px;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(224, 82, 100, 0.14);
  color: #ff9aa8;
  font-size: 11px;
  line-height: 1.2;
}

.message-reaction-error.is-hidden {
  display: none;
}

.telegram-message.outgoing .message-reaction-error {
  align-self: flex-end;
}

.telegram-shell.theme-light .message-reaction-error {
  background: rgba(217, 75, 93, 0.12);
  color: #b53749;
}

.telegram-message.outgoing .message-reactions {
  justify-content: flex-end;
}

.bubble-reply {
  max-width: 100%;
  border-left-color: #6ab3ff;
  border-radius: 6px;
  padding: 5px 8px 5px 9px;
}

.media-card {
  max-width: 100%;
  min-width: min(220px, 100%);
  border-radius: 9px;
}

.message-actions {
  top: -40px;
  right: 0;
  z-index: 12;
}

.message-bubble:hover .message-actions,
.message-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.telegram-message.incoming .message-actions {
  left: 0;
  right: auto;
}

.reaction-picker {
  z-index: 20;
  border: 1px solid rgba(127, 145, 163, 0.14);
}

.reaction-picker button {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.reaction-picker button:hover {
  background: var(--tg-panel-3);
}

.reaction-picker button:disabled {
  opacity: 0.55;
}

.reaction-picker .reaction-delete-action {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  color: #ff9aa8;
  font-size: 11px;
  font-weight: 800;
}

.reaction-picker .reaction-delete-action:hover {
  background: rgba(224, 82, 100, 0.16);
}

.reply-preview {
  min-height: 48px;
  padding-block: 7px;
}

.reply-preview-content {
  display: grid;
  gap: 1px;
}

.composer-notice {
  min-height: 30px;
  padding: 6px 16px;
  font-size: 12px;
}

.telegram-composer {
  grid-template-columns: 40px minmax(0, 1fr) 42px;
  align-items: end;
}

.telegram-textarea {
  border: 0;
  box-shadow: none;
}

.telegram-textarea:focus {
  box-shadow: 0 0 0 2px rgba(51, 144, 236, 0.24);
}

.telegram-shell.theme-light .telegram-search-input,
.telegram-shell.theme-light .telegram-textarea {
  background: #edf3f8;
  color: var(--tg-text);
}

.telegram-shell.theme-light .reply-preview,
.telegram-shell.theme-light .composer-notice,
.telegram-shell.theme-light .telegram-composer,
.telegram-shell.theme-light .telegram-chat-head,
.telegram-shell.theme-light .telegram-accountbar,
.telegram-shell.theme-light .telegram-search {
  background: var(--tg-panel);
}

.telegram-shell.theme-light .message-bubble {
  color: var(--tg-text);
  box-shadow: 0 1px 1px rgba(78, 97, 115, 0.18);
}

.telegram-shell.theme-light .telegram-message.outgoing .message-bubble {
  color: #102016;
}

.theme-toggle-button {
  font-size: 17px;
}

.telegram-composer .telegram-icon-button,
.telegram-send {
  width: 40px;
  height: 40px;
}

@media (max-width: 1040px) {
  .message-stack {
    max-width: min(620px, 76%);
  }
}

@media (max-width: 720px) {
  .telegram-shell:not(.is-chat-open) .telegram-accounts {
    height: 118px;
  }

  .telegram-shell:not(.is-chat-open) .telegram-left {
    height: calc(100% - 118px);
  }

  .telegram-shell:not(.is-chat-open) .telegram-accountbar {
    height: 50px;
    min-height: 50px;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 8px 8px;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account {
    width: 82px;
    min-width: 82px;
    min-height: 58px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    border-radius: 8px;
    padding: 5px;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account .dialog-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .telegram-shell:not(.is-chat-open) .account-main {
    align-items: center;
    text-align: center;
  }

  .telegram-shell:not(.is-chat-open) .account-phone,
  .telegram-shell:not(.is-chat-open) .account-state,
  .telegram-shell:not(.is-chat-open) .account-presence {
    display: none;
  }

  .telegram-shell:not(.is-chat-open) .account-tail {
    max-width: 70px;
    font-size: 11px;
  }

  .telegram-shell:not(.is-chat-open) .legacyAccountMeta,
  .telegram-shell:not(.is-chat-open) #accountListMeta {
    display: none;
  }

  .telegram-shell:not(.is-chat-open) .live-inbox-panel {
    margin-block: 6px;
  }

  .telegram-dialog {
    min-height: 72px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding-right: 9px;
  }

  .telegram-dialog .dialog-avatar {
    width: 44px;
    height: 44px;
  }

  .dialog-midline {
    display: none;
  }

  .dialog-date {
    max-width: 72px;
  }

  .telegram-chat-head {
    gap: 8px;
  }

  .chat-avatar {
    width: 38px;
    height: 38px;
  }

  .chat-actions {
    display: none;
  }

  .message-stack {
    max-width: 90%;
  }

  .telegram-message {
    padding-inline: 0;
  }

  .message-bubble {
    padding: 8px 9px 5px;
  }

  .message-actions {
    right: 0;
    bottom: -30px;
  }

  .telegram-message.incoming .message-actions {
    left: 0;
  }

  .reaction-picker {
    max-width: calc(100vw - 36px);
    grid-template-columns: repeat(5, 30px);
  }

  .telegram-composer {
    grid-template-columns: 38px minmax(0, 1fr) 40px;
    gap: 7px;
  }
}

/* Telegram-like backend v2 data layer */
.avatar .avatar-initials {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 160ms ease;
}

.avatar-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  transform: translateZ(0);
}

.avatar.has-image .avatar-initials {
  opacity: 0;
}

.avatar.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent),
    var(--avatar-bg, #2f6ea5);
  transform: translateX(-100%);
  animation: avatarLazyShimmer 1.1s ease-in-out infinite;
}

@keyframes avatarLazyShimmer {
  to {
    transform: translateX(100%);
  }
}

.media-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid rgba(127, 145, 163, 0.16);
  background: rgba(7, 16, 26, 0.2);
  overflow: hidden;
}

.media-card.has-thumb {
  grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) auto;
  align-items: stretch;
  padding: 6px;
}

.media-thumb {
  width: 100%;
  min-height: 82px;
  max-height: 142px;
  border-radius: 7px;
  object-fit: cover;
  object-position: center;
  background: rgba(0, 0, 0, 0.22);
}

.media-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(51, 144, 236, 0.16);
  color: #b8ddff;
  font-size: 18px;
}

.media-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.media-title,
.media-caption {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-title {
  font-size: 13px;
  font-weight: 800;
}

.media-caption {
  color: rgba(231, 238, 245, 0.62);
  font-size: 11px;
}

.media-download {
  align-self: center;
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(51, 144, 236, 0.18);
  color: #dceeff;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.media-download:hover {
  background: rgba(51, 144, 236, 0.3);
}

.media-card.is-thumb-error {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.message-delete-button {
  color: #ff9aa8;
}

.message-actions .message-delete-button:hover {
  background: rgba(224, 82, 100, 0.16);
  color: #ffd6dc;
}

.telegram-message.outgoing .message-actions {
  right: 10px;
}

.telegram-message:hover .message-actions,
.message-stack:hover .message-actions,
.message-actions:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.telegram-message.is-deleting {
  opacity: 0.65;
  pointer-events: none;
}

.telegram-message.is-deleted .message-bubble {
  background: rgba(127, 145, 163, 0.14);
  color: rgba(231, 238, 245, 0.62);
}

.message-deleted-text {
  font-style: italic;
}

.message-ticks.is-sent {
  letter-spacing: 0;
  opacity: 0.75;
}

.message-ticks.is-delivered {
  opacity: 0.82;
}

.message-ticks.is-read {
  color: #8ed1ff;
}

.message-reaction.is-chosen {
  border-color: rgba(51, 144, 236, 0.72);
  background: rgba(51, 144, 236, 0.24);
}

.telegram-shell.theme-light .media-card {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(111, 133, 153, 0.24);
}

.telegram-shell.theme-light .media-icon {
  background: rgba(51, 144, 236, 0.12);
  color: #2f79b8;
}

.telegram-shell.theme-light .media-caption {
  color: rgba(71, 91, 108, 0.72);
}

.telegram-shell.theme-light .media-download {
  background: rgba(51, 144, 236, 0.12);
  color: #206da9;
}

.telegram-shell.theme-light .message-delete-button {
  color: #b53749;
}

.telegram-shell.theme-light .telegram-message.is-deleted .message-bubble {
  background: rgba(111, 133, 153, 0.14);
  color: rgba(71, 91, 108, 0.72);
}

@media (max-width: 1280px) and (min-width: 1041px) {
  .telegram-shell {
    grid-template-columns: 210px 320px minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .telegram-message.outgoing .message-actions {
    right: 4px;
  }

  .message-actions .message-delete-button {
    display: none;
  }

  .media-card,
  .media-card.has-thumb {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .media-card.has-thumb .media-thumb {
    grid-column: 1 / -1;
    max-height: 180px;
  }

  .media-download {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Telegram-like messenger v3 polish */
.telegram-shell {
  border: 1px solid rgba(15, 26, 36, 0.96);
  background: var(--tg-bg);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  isolation: isolate;
}

.telegram-shell.theme-light {
  --tg-bg: #d8e4ee;
  --tg-panel: #ffffff;
  --tg-panel-2: #f3f7fb;
  --tg-panel-3: #e8f0f7;
  --tg-line: #ccd8e3;
  --tg-line-soft: #e1e9f0;
  --tg-text: #162331;
  --tg-muted: #667b8e;
  --tg-bubble-in: #ffffff;
  --tg-bubble-out: #dff2cf;
  --tg-active: #3f96d2;
}

.telegram-accounts,
.telegram-left,
.telegram-chat,
.telegram-accountbar,
.telegram-search,
.telegram-chat-head,
.telegram-composer,
.reply-preview,
.composer-notice {
  box-shadow: none;
}

.telegram-accountbar,
.telegram-search,
.telegram-chat-head,
.telegram-composer,
.reply-preview,
.composer-notice {
  border-color: var(--tg-line);
}

.telegram-accountbar {
  padding: 10px 10px 8px;
}

.telegram-search {
  gap: 8px;
  padding: 9px 10px;
}

.telegram-search-input {
  height: 36px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--tg-input, #242f3d);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.telegram-search-input:focus,
.telegram-textarea:focus {
  border-color: rgba(51, 144, 236, 0.48);
  box-shadow: 0 0 0 3px rgba(51, 144, 236, 0.14);
}

.telegram-icon-button,
.chat-action-button {
  transition: background-color 140ms ease, color 140ms ease, transform 120ms ease;
}

.telegram-icon-button:hover,
.chat-action-button:hover {
  background: rgba(127, 145, 163, 0.12);
  color: var(--tg-text);
}

.telegram-account-list {
  padding: 4px 6px 8px;
}

.telegram-account {
  min-height: 58px;
  margin: 0;
  border-radius: 9px;
  border-left: 0;
  transition: background-color 130ms ease, transform 120ms ease;
}

.telegram-account:hover {
  background: color-mix(in srgb, var(--tg-panel-hover, #202b36) 78%, transparent);
}

.telegram-account.is-active {
  background: rgba(51, 144, 236, 0.18);
  color: var(--tg-text);
}

.telegram-account.is-active::before {
  display: none;
}

.account-avatar::after {
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-width: 2px;
}

.account-phone {
  max-width: 100%;
  font-size: 13px;
  letter-spacing: 0;
}

.account-tail {
  font-weight: 700;
}

.telegram-dialogs {
  padding: 0;
}

.telegram-dialog {
  min-height: 74px;
  border-left: 0;
  border-radius: 0;
  padding: 9px 12px;
  transition: background-color 120ms ease;
}

.telegram-dialog:hover {
  background: var(--tg-panel-hover, #202b36);
}

.telegram-dialog.is-active {
  background: var(--tg-active);
}

.telegram-dialog.is-active::before {
  display: none;
}

.dialog-main {
  display: grid;
  grid-template-rows: 19px 17px 19px;
  align-content: center;
}

.dialog-topline,
.dialog-midline,
.dialog-bottomline {
  min-width: 0;
}

.dialog-name {
  font-size: 14px;
  line-height: 18px;
}

.dialog-date {
  font-size: 11px;
  line-height: 18px;
}

.dialog-kind,
.dialog-username,
.dialog-preview {
  line-height: 16px;
}

.dialog-readonly,
.dialog-service,
.dialog-archive {
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 6px;
  background: rgba(224, 168, 79, 0.12);
  color: #e0a84f;
  line-height: 16px;
}

.telegram-dialog.is-active .dialog-readonly,
.telegram-dialog.is-active .dialog-service,
.telegram-dialog.is-active .dialog-archive {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.86);
}

.unread-badge {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
}

.live-inbox-panel {
  margin: 8px;
  border-color: var(--tg-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--tg-panel-2) 78%, transparent);
}

.live-inbox-item {
  border-radius: 8px;
}

.telegram-chat-head {
  height: 58px;
  padding: 8px 14px;
}

.chat-avatar {
  width: 44px;
  height: 44px;
}

.chat-title {
  font-weight: 800;
}

.chat-subtitle {
  color: var(--tg-muted);
  font-size: 12px;
}

.telegram-messages {
  padding: 18px 24px 18px;
  gap: 2px;
  scroll-behavior: auto;
}

.message-day {
  align-self: center;
  border: 1px solid rgba(127, 145, 163, 0.12);
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(31, 44, 58, 0.9);
  color: rgba(231, 238, 245, 0.78);
  font-size: 12px;
  line-height: 1;
}

.telegram-shell.theme-light .message-day {
  background: rgba(255, 255, 255, 0.86);
  color: #617587;
  box-shadow: 0 1px 6px rgba(83, 101, 119, 0.14);
}

.message-stack {
  max-width: min(660px, 66%);
}

.telegram-message.has-direction-gap {
  margin-top: 7px;
}

.message-bubble {
  border-radius: 10px;
  padding: 8px 10px 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}

.telegram-message.incoming .message-bubble {
  background: var(--tg-bubble-in);
}

.telegram-message.outgoing .message-bubble {
  background: var(--tg-bubble-out);
}

.message-text {
  font-size: 14px;
  line-height: 1.42;
}

.message-footer {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 3px;
  padding-left: 18px;
  line-height: 1;
}

.message-ticks {
  letter-spacing: -1px;
}

.bubble-reply {
  display: grid;
  gap: 1px;
  margin-bottom: 6px;
  border-left: 3px solid #6ab3ff;
  background: rgba(51, 144, 236, 0.1);
}

.bubble-reply strong,
.bubble-reply span,
.reply-preview strong,
.reply-preview span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.message-reaction {
  border: 1px solid rgba(51, 144, 236, 0.22);
  background: rgba(51, 144, 236, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.message-reaction.is-chosen {
  border-color: rgba(51, 144, 236, 0.9);
  background: rgba(51, 144, 236, 0.3);
}

.message-actions {
  gap: 4px;
  border: 1px solid rgba(127, 145, 163, 0.14);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  opacity: 0.38;
  pointer-events: auto;
}

.message-actions button {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border-radius: 999px;
}

.message-actions .message-reply-button,
.message-actions .message-delete-button {
  max-width: 0;
  padding-inline: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 140ms ease, padding 140ms ease, opacity 140ms ease;
}

.telegram-message:hover .message-actions .message-reply-button,
.telegram-message:hover .message-actions .message-delete-button,
.message-actions:hover .message-reply-button,
.message-actions:hover .message-delete-button,
.message-actions:focus-within .message-reply-button,
.message-actions:focus-within .message-delete-button {
  max-width: 76px;
  padding-inline: 8px;
  opacity: 1;
}

.message-delete-button {
  opacity: 0.78;
}

.reaction-picker {
  gap: 4px;
  padding: 7px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tg-panel) 92%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.reaction-picker button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  font-size: 18px;
}

.media-card {
  border-radius: 10px;
  background: rgba(9, 20, 33, 0.2);
}

.media-card.has-thumb {
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto;
}

.media-thumb {
  min-height: 96px;
  max-height: 168px;
}

.reply-preview {
  min-height: 46px;
  border-top: 1px solid var(--tg-line);
  padding: 7px 12px;
}

.reply-preview-content {
  min-width: 0;
  border-left: 3px solid #6ab3ff;
  padding-left: 9px;
}

.reply-preview button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
}

.composer-notice {
  min-height: 0;
  padding: 6px 14px;
}

.telegram-composer {
  min-height: 58px;
  padding: 9px 12px;
  gap: 8px;
}

.telegram-composer .telegram-icon-button,
.telegram-send {
  flex: none;
  border-radius: 999px;
}

.telegram-textarea {
  min-height: 40px;
  border-radius: 21px;
  padding: 10px 15px;
  resize: none;
}

.telegram-composer.is-disabled {
  opacity: 0.62;
}

.telegram-shell.theme-light .telegram-account.is-active {
  background: rgba(51, 144, 236, 0.14);
}

.telegram-shell.theme-light .telegram-dialog:hover {
  background: #edf3f8;
}

.telegram-shell.theme-light .telegram-dialog.is-active {
  background: var(--tg-active);
}

.telegram-shell.theme-light .media-card {
  background: rgba(255, 255, 255, 0.74);
}

@media (max-width: 1040px) {
  .telegram-shell {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }

  .message-stack {
    max-width: min(620px, 78%);
  }
}

@media (max-width: 720px) {
  .telegram-shell:not(.is-chat-open) .telegram-accounts {
    height: 112px;
  }

  .telegram-shell:not(.is-chat-open) .telegram-left {
    height: calc(100% - 112px);
  }

  .telegram-shell:not(.is-chat-open) .telegram-accountbar {
    height: 46px;
    min-height: 46px;
    padding: 8px 10px 4px;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account-list {
    padding: 4px 8px 7px;
    gap: 7px;
    scroll-snap-type: x proximity;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account {
    width: 74px;
    min-width: 74px;
    min-height: 56px;
    scroll-snap-align: start;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account .dialog-avatar {
    width: 34px;
    height: 34px;
  }

  .telegram-dialog {
    min-height: 76px;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 10px 11px;
  }

  .telegram-dialog .dialog-avatar {
    width: 48px;
    height: 48px;
  }

  .dialog-main {
    grid-template-rows: 20px 0 20px;
  }

  .dialog-bottomline {
    margin-top: 3px;
  }

  .telegram-chat-head {
    height: 56px;
    padding: 7px 10px;
  }

  .chat-avatar {
    width: 40px;
    height: 40px;
  }

  .telegram-messages {
    padding: 10px 10px 12px;
  }

  .message-stack {
    max-width: 90%;
  }

  .message-bubble {
    padding: 8px 9px 6px;
  }

  .message-actions {
    bottom: -31px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
  }

  .message-mobile-menu {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(23, 33, 43, 0.78);
    backdrop-filter: blur(8px);
  }

  .reaction-picker {
    right: 0;
    max-width: calc(100vw - 28px);
    grid-template-columns: repeat(5, 32px);
    z-index: 80;
  }

  .media-card,
  .media-card.has-thumb {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .media-card.has-thumb .media-thumb {
    grid-column: 1 / -1;
    min-height: 160px;
    max-height: 220px;
  }

  .reply-preview {
    min-height: 44px;
    padding: 6px 10px;
  }

  .telegram-composer {
    min-height: 56px;
    padding: 8px 9px;
  }

  .telegram-textarea {
    min-height: 38px;
    padding: 9px 13px;
  }
}

/* Dialogs v4: account usernames, search results, quieter message actions. */
.telegram-account .account-main {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.account-username {
  min-width: 0;
  overflow: hidden;
  color: var(--tg-muted);
  font-size: 11px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-account.is-active .account-username {
  color: rgba(231, 238, 245, 0.76);
}

.telegram-shell.theme-light .telegram-account.is-active .account-username {
  color: rgba(22, 35, 49, 0.66);
}

.dialog-search-section {
  display: grid;
  gap: 2px;
  padding: 6px 0 8px;
}

.dialog-search-title {
  padding: 5px 14px 4px;
  color: var(--tg-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dialog-search-status {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 10px;
  border-radius: 10px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--tg-panel-2) 78%, transparent);
  color: var(--tg-muted);
  font-size: 12px;
}

.dialog-search-status.is-error {
  border: 1px solid rgba(224, 82, 100, 0.24);
  background: rgba(224, 82, 100, 0.1);
  color: #ff9aa8;
}

.small-spinner {
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid rgba(127, 145, 163, 0.28);
  border-top-color: var(--tg-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.telegram-dialog.is-external-result {
  background: linear-gradient(90deg, rgba(51, 144, 236, 0.14), transparent 72%);
}

.dialog-source-badge {
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 6px;
  background: rgba(127, 145, 163, 0.14);
  color: var(--tg-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  white-space: nowrap;
}

.dialog-source-badge.is-external {
  background: rgba(51, 144, 236, 0.18);
  color: #8ed1ff;
}

.telegram-dialog.is-active .dialog-source-badge {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.message-actions {
  opacity: 0;
  pointer-events: none;
}

.telegram-message:hover .message-actions,
.telegram-message:focus-within .message-actions,
.telegram-message.is-picker-open .message-actions,
.telegram-message.is-action-menu-open .message-actions,
.message-actions:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.message-actions .message-reply-button {
  max-width: 0;
  padding-inline: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 140ms ease, padding 140ms ease, opacity 140ms ease;
}

.telegram-message:hover .message-actions .message-reply-button,
.message-actions:hover .message-reply-button,
.message-actions:focus-within .message-reply-button,
.telegram-message.is-action-menu-open .message-actions .message-reply-button {
  max-width: 76px;
  padding-inline: 8px;
  opacity: 1;
}

.message-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.message-action-menu {
  position: absolute;
  top: 38px;
  right: 0;
  width: min(218px, calc(100vw - 32px));
  display: none;
  gap: 2px;
  border: 1px solid rgba(127, 145, 163, 0.16);
  border-radius: 12px;
  padding: 6px;
  background: color-mix(in srgb, var(--tg-panel) 96%, transparent);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.telegram-message.incoming .message-action-menu {
  left: 0;
  right: auto;
}

.telegram-message.is-action-menu-open .message-action-menu {
  display: grid;
}

.message-action-menu button {
  width: 100%;
  min-width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 0 10px;
  color: var(--tg-text);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.message-action-menu button:hover {
  background: var(--tg-panel-3);
  color: var(--tg-text);
}

.message-action-menu button:disabled {
  cursor: default;
  opacity: 0.48;
}

.message-action-menu button span {
  margin-left: auto;
  color: var(--tg-muted);
  font-size: 10px;
  font-weight: 700;
}

.message-action-menu .is-danger {
  color: #ff9aa8;
}

.message-action-separator {
  height: 1px;
  margin: 3px 2px;
  background: var(--tg-line);
}

.message-mobile-menu {
  display: none;
}

.telegram-message.is-removing {
  overflow: hidden;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease, height 220ms ease, margin 220ms ease;
}

@media (max-width: 720px) {
  .telegram-shell:not(.is-chat-open) .account-username {
    display: none;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account .account-tail {
    max-width: 52px;
  }

  .dialog-search-title {
    padding-inline: 12px;
  }

  .message-actions {
    display: flex;
    opacity: 1;
    pointer-events: none;
    transform: none;
  }

  .message-actions .message-mobile-menu,
  .message-actions .reaction-picker.is-open,
  .message-actions .message-action-menu.is-open {
    pointer-events: auto;
  }

  .message-actions .message-reply-button,
  .message-actions .message-reaction-trigger,
  .message-actions .message-menu-trigger {
    display: none;
  }

  .message-mobile-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .message-action-menu {
    top: auto;
    right: 0;
    bottom: 34px;
    z-index: 80;
  }

  .telegram-message.incoming .message-action-menu {
    left: 0;
    right: auto;
  }

  .telegram-message.outgoing .message-action-menu {
    left: auto;
    right: 0;
  }

  .telegram-message:hover .message-actions,
  .telegram-message:focus-within .message-actions,
  .telegram-message.is-picker-open .message-actions,
  .telegram-message.is-action-menu-open .message-actions,
  .message-actions:hover,
  .message-actions:focus-within {
    transform: none;
  }
}

/* Dialogs v5 cascade guard: keep final messenger polish above older layers. */
.telegram-shell.theme-dark {
  --tg-bubble-in: #182533;
  --tg-bubble-out: #2b5278;
}

.telegram-shell.theme-light {
  --tg-bubble-in: #ffffff;
  --tg-bubble-out: #d9fdd3;
}

.chat-subtitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-stack {
  max-width: min(680px, 64%);
}

.message-bubble {
  min-width: 62px;
  border-radius: 10px;
  padding: 8px 10px 6px;
}

.telegram-message.outgoing .message-bubble {
  min-width: 82px;
}

.message-text {
  overflow-wrap: anywhere;
  word-break: normal;
}

.message-footer {
  width: 100%;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  align-self: flex-end;
  margin-top: 4px;
  padding-left: 18px;
  white-space: nowrap;
  line-height: 1;
}

.message-time,
.message-ticks {
  position: static;
  inset: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  opacity: .82;
}

.message-time {
  color: rgba(231, 238, 245, .62);
}

.message-ticks {
  min-width: 15px;
  justify-content: flex-end;
  color: #8ed1ff;
  letter-spacing: -1px;
  padding-right: 0;
}

.telegram-shell.theme-light .message-time {
  color: #7a8a96;
}

.telegram-shell.theme-light .message-ticks {
  color: #3a9df5;
}

.message-reaction {
  height: 24px;
  min-width: 30px;
  gap: 4px;
  border: 1px solid rgba(51, 144, 236, .22);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  animation: reactionPop 220ms cubic-bezier(.2, .9, .25, 1.25) both;
}

.message-reaction.is-chosen,
.message-reaction.is-mine {
  border-color: #3390ec;
  background: rgba(51, 144, 236, .28);
}

.message-reaction.is-pending {
  opacity: .62;
}

.telegram-message.has-reaction-error .message-reaction.is-error,
.telegram-message.has-reaction-error .message-reaction.is-mine {
  border-color: #e05264;
  animation: reactionShake 260ms ease both;
}

.reaction-picker,
.message-action-menu {
  transition: opacity 160ms ease, transform 160ms ease;
}

.telegram-message.is-picker-open .reaction-picker,
.telegram-message.is-action-menu-open .message-action-menu {
  transform: translateY(0) scale(1);
}

.telegram-message.is-delete-fading .message-bubble,
.telegram-message.is-delete-fading .message-reactions,
.telegram-message.is-delete-fading .message-reaction-error {
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transition: opacity 140ms ease, transform 140ms ease;
}

.telegram-message.is-removing {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transition: opacity 180ms ease, transform 180ms ease, height 220ms cubic-bezier(.22, .61, .36, 1), margin 220ms cubic-bezier(.22, .61, .36, 1), padding 220ms cubic-bezier(.22, .61, .36, 1);
}

.dialog-skeleton,
.chat-skeleton span {
  position: relative;
  overflow: hidden;
}

.dialog-skeleton::after,
.chat-skeleton span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}

.chat-skeleton {
  min-height: 260px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 10px 4px;
}

.chat-skeleton span {
  width: min(360px, 62%);
  height: 42px;
  border-radius: 12px;
}

.chat-skeleton .is-outgoing {
  justify-self: end;
  width: min(320px, 54%);
  background: color-mix(in srgb, var(--tg-bubble-out) 74%, transparent);
}

.chat-skeleton .is-wide {
  width: min(520px, 72%);
  height: 64px;
}

.chat-skeleton .is-short {
  width: min(220px, 42%);
}

.telegram-send.is-sending::after,
.dialog-pagination.is-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.telegram-textarea {
  max-height: 132px;
  transition: height 160ms ease, background-color 180ms ease, border-color 180ms ease;
}

.telegram-composer.is-disabled {
  opacity: .55;
}

@media (max-width: 720px) {
  .message-stack {
    max-width: 90%;
  }

  .message-footer {
    gap: 5px;
    padding-left: 14px;
  }

  .reaction-picker,
  .message-action-menu {
    z-index: 80;
  }
}

/* Presence lifecycle polish for Dialogs account rail. */
.account-tail-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.telegram-account .account-tail {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

.account-status-chip {
  max-width: 88px;
  min-height: 18px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 6px;
  overflow: hidden;
  color: var(--tg-muted);
  background: rgba(127, 145, 163, .12);
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-status-chip.is-online,
.account-status-chip.is-listener {
  color: #74dba4;
  background: rgba(79, 208, 139, .13);
}

.account-status-chip.is-listener {
  color: #8ed1ff;
  background: rgba(51, 144, 236, .14);
}

.account-status-chip.is-connecting {
  color: #8ed1ff;
  background: rgba(51, 144, 236, .14);
}

.account-status-chip.is-idle {
  color: #e0a84f;
  background: rgba(224, 168, 79, .13);
}

.account-status-chip.is-error {
  color: #ff7d8c;
  background: rgba(224, 82, 100, .13);
}

.account-presence {
  background: #68798b;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.account-presence.is-online {
  background: #4fd08b;
  box-shadow: 0 0 0 3px rgba(79, 208, 139, .14);
}

.account-presence.is-listener {
  background: #6ab3ff;
  box-shadow: 0 0 0 3px rgba(51, 144, 236, .14);
}

.account-presence.is-connecting {
  background: #6ab3ff;
  animation: presencePulse 1.1s ease-in-out infinite;
}

.account-presence.is-idle {
  background: #e0a84f;
}

.account-presence.is-error {
  background: #e05264;
  box-shadow: 0 0 0 3px rgba(224, 82, 100, .14);
}

.telegram-account.is-connection-online .account-avatar::after {
  background: #4fd08b;
}

.telegram-account.is-connection-listener .account-avatar::after,
.telegram-account.is-connection-connecting .account-avatar::after {
  background: #6ab3ff;
}

.telegram-account.is-connection-idle .account-avatar::after {
  background: #e0a84f;
}

.telegram-account.is-connection-error .account-avatar::after {
  background: #e05264;
}

.telegram-account.is-connection-connecting .account-avatar::after {
  animation: presencePulse 1.1s ease-in-out infinite;
}

.telegram-account.is-active .account-status-chip {
  border-color: rgba(117, 198, 255, .24);
}

.telegram-shell.theme-light .account-status-chip {
  background: rgba(78, 104, 126, .1);
  color: #6a7d8c;
}

.telegram-shell.theme-light .account-status-chip.is-online,
.telegram-shell.theme-light .account-status-chip.is-listener {
  color: #16784b;
}

.telegram-shell.theme-light .account-status-chip.is-connecting {
  color: #1f79bc;
}

.telegram-shell.theme-light .account-status-chip.is-idle {
  color: #9a6b16;
}

.telegram-shell.theme-light .account-status-chip.is-error {
  color: #c83c4d;
}

@keyframes presencePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(106, 179, 255, .3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(106, 179, 255, 0);
    transform: scale(.92);
  }
}

@media (max-width: 720px) {
  .telegram-shell:not(.is-chat-open) .account-status-chip {
    display: none;
  }

  .telegram-shell:not(.is-chat-open) .account-tail-row {
    justify-content: center;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account .account-tail {
    max-width: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-presence.is-connecting,
  .telegram-account.is-connection-connecting .account-avatar::after {
    animation: none;
  }
}

/* Dialogs v4 account rail: quieter lifecycle states and compact mobile details. */
.telegram-account {
  transition: background-color 140ms ease, color 140ms ease, transform 120ms ease;
}

.account-username,
.account-tail,
.account-status-chip,
.account-presence {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.account-status-chip {
  max-width: 72px;
  min-height: 16px;
  border-color: rgba(127, 145, 163, .12);
  padding-inline: 5px;
  font-size: 9.5px;
  line-height: 16px;
  opacity: .88;
}

.account-status-chip.is-idle,
.telegram-shell.theme-light .account-status-chip.is-idle {
  color: #7f91a3;
  background: rgba(127, 145, 163, .1);
}

.account-presence.is-idle,
.telegram-account.is-connection-idle .account-avatar::after {
  background: #7f91a3;
}

.account-presence.is-offline,
.telegram-account.is-connection-offline .account-avatar::after {
  background: #5f7080;
}

.telegram-account.is-active .account-status-chip {
  opacity: 1;
}

.telegram-account.is-connection-connecting .account-status-chip {
  opacity: .96;
}

.telegram-account.is-connection-error .account-tail-row {
  color: #ff7d8c;
}

.telegram-shell.theme-light .account-presence.is-idle,
.telegram-shell.theme-light .telegram-account.is-connection-idle .account-avatar::after,
.telegram-shell.theme-light .account-presence.is-offline,
.telegram-shell.theme-light .telegram-account.is-connection-offline .account-avatar::after {
  background: #9aa8b3;
}

@media (max-width: 720px) {
  .telegram-shell:not(.is-chat-open) .telegram-account.is-active {
    width: 104px;
    min-width: 104px;
    background: rgba(51, 144, 236, .16);
  }

  .telegram-shell:not(.is-chat-open) .telegram-account.is-active .account-main {
    width: 100%;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account.is-active .account-tail {
    max-width: 92px;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account.is-active .account-username {
    display: block;
    max-width: 92px;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account:not(.is-active) .account-username {
    display: none;
  }
}

/* Dialogs v4.1: pinned accounts and top unread strip */
.telegram-inbox-stack {
  --tg-bg: #0e1621;
  --tg-panel: #17212b;
  --tg-panel-2: #1b2835;
  --tg-panel-hover: #202b36;
  --tg-line: #0f1a24;
  --tg-line-soft: rgba(127, 145, 163, .16);
  --tg-text: #e7eef5;
  --tg-muted: #7f91a3;
  --tg-input: #242f3d;
  --tg-accent: #3390ec;
  --tg-pin: #6ab3ff;
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
  color: var(--tg-text);
  position: relative;
}

.telegram-inbox-stack.theme-light {
  --tg-bg: #d8e4ee;
  --tg-panel: #ffffff;
  --tg-panel-2: #f3f7fb;
  --tg-panel-hover: #f2f6f9;
  --tg-line: #ccd8e3;
  --tg-line-soft: #e1e9f0;
  --tg-text: #162331;
  --tg-muted: #667b8e;
  --tg-input: #edf3f8;
  --tg-accent: #2f8ee5;
  --tg-pin: #2f8ee5;
}

.account-section-divider {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 5px 10px 3px;
  color: var(--tg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .78;
}

.telegram-account {
  position: relative;
  grid-template-columns: 44px minmax(0, 1fr) 24px 10px;
  cursor: pointer;
  user-select: none;
}

.telegram-account.is-pinned {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--tg-pin) 72%, transparent);
}

.account-pin-button {
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tg-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  opacity: .18;
  transform: scale(.98);
  transition: color 140ms ease, opacity 140ms ease, background-color 140ms ease, transform 160ms cubic-bezier(.2,.9,.25,1.25);
}

.telegram-account:hover .account-pin-button,
.telegram-account:focus-within .account-pin-button,
.account-pin-button:focus-visible,
.account-pin-button.is-pinned {
  opacity: .95;
}

.account-pin-button:hover,
.account-pin-button:focus-visible {
  background: rgba(106, 179, 255, .13);
  color: var(--tg-pin);
  outline: none;
  transform: scale(1.08);
}

.account-pin-button.is-pinned {
  color: var(--tg-pin);
  animation: pinPop 180ms cubic-bezier(.2,.9,.25,1.25);
}

.live-inbox-top-panel {
  min-height: 48px;
  max-height: 110px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  background: var(--tg-panel);
  box-shadow: none;
}

.live-inbox-top-panel .live-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--tg-line-soft);
  color: var(--tg-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.live-inbox-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notification-sound-toggle {
  width: 26px;
  height: 26px;
  min-width: 26px;
  color: var(--tg-muted);
  transform: scale(1);
  transition: color 140ms ease, background-color 140ms ease, transform 160ms cubic-bezier(.2,.9,.25,1.25);
}

.notification-sound-toggle:hover,
.notification-sound-toggle:focus-visible {
  color: var(--tg-accent);
  transform: scale(1.04);
}

.notification-sound-toggle.is-muted {
  opacity: .62;
}

.live-inbox-top-panel .live-inbox-dot {
  color: var(--tg-accent);
  font-size: 10px;
}

.live-inbox-top-panel .live-inbox-list {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 58px;
  max-height: 76px;
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.live-inbox-top-panel .live-inbox-item {
  position: relative;
  display: grid;
  flex: 0 0 clamp(260px, 29vw, 320px);
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tg-text);
  cursor: pointer;
  text-align: left;
  animation: liveInboxEnter 200ms cubic-bezier(.22,.61,.36,1);
  transition: background-color 140ms ease, opacity 180ms ease, transform 180ms ease;
}

.live-inbox-top-panel .live-inbox-item:hover,
.live-inbox-top-panel .live-inbox-item:focus-visible {
  background: var(--tg-panel-hover);
  outline: none;
}

.live-inbox-top-panel .live-inbox-item.is-active {
  background: color-mix(in srgb, var(--tg-accent) 18%, transparent);
}

.live-inbox-top-panel .live-inbox-item.is-handled {
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
}

.telegram-dialog.is-read-pending .unread-badge,
.unread-badge.is-read-pending,
.live-inbox-top-panel .live-inbox-item.is-read-pending .live-inbox-count,
.live-inbox-top-panel .live-inbox-item.is-read-pending .live-inbox-unread-dot {
  opacity: .62;
  animation: readPulse 900ms ease-in-out infinite;
}

.telegram-dialog.is-read-pending {
  background: color-mix(in srgb, var(--tg-accent) 7%, transparent);
}

.live-inbox-top-panel .live-inbox-item.is-read-pending {
  background: color-mix(in srgb, var(--tg-accent) 10%, transparent);
  cursor: progress;
}

.live-inbox-top-panel .live-inbox-avatar {
  width: 40px;
  height: 40px;
}

.live-inbox-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.live-inbox-top-panel .live-inbox-title,
.live-inbox-top-panel .live-inbox-subtitle,
.live-inbox-top-panel .live-inbox-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-inbox-top-panel .live-inbox-title {
  color: var(--tg-text);
  font-size: 13px;
  font-weight: 800;
}

.live-inbox-top-panel .live-inbox-subtitle,
.live-inbox-top-panel .live-inbox-text {
  color: var(--tg-muted);
  font-size: 12px;
}

.live-inbox-unread-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tg-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-accent) 16%, transparent);
}

.live-inbox-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tg-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.live-inbox-side {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 44px;
}

.live-inbox-top-panel .live-inbox-time {
  color: var(--tg-muted);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.live-account-chip {
  max-width: 64px;
  overflow: hidden;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(51, 144, 236, .14);
  color: var(--tg-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-inbox-top-panel .live-inbox-empty {
  display: flex;
  align-items: center;
  min-width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--tg-muted);
  font-size: 12px;
}

.live-inbox-skeleton {
  pointer-events: none;
}

.inbox-toast-layer {
  position: fixed;
  z-index: 42;
  left: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.inbox-toast {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 8px 32px;
  gap: 10px;
  align-items: center;
  min-height: 72px;
  padding: 10px 10px 10px 12px;
  border: 1px solid rgba(127,145,163,.22);
  border-radius: 10px;
  background: var(--tg-panel);
  color: var(--tg-text);
  box-shadow:
    0 16px 40px rgba(0,0,0,.32),
    0 0 0 1px rgba(51,144,236,.12),
    0 0 28px rgba(51,144,236,.35);
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
  animation: toastEnter 210ms cubic-bezier(.22,.61,.36,1), toastGlowPulse 900ms ease-out 1;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 160ms ease, opacity 180ms ease, transform 180ms ease;
}

.telegram-inbox-stack.theme-light .inbox-toast {
  border-color: #d8e2e8;
  background: #ffffff;
  box-shadow:
    0 14px 34px rgba(23,33,43,.14),
    0 0 0 1px rgba(51,144,236,.08),
    0 0 24px rgba(51,144,236,.22);
}

.inbox-toast:hover,
.inbox-toast:focus-visible {
  background: var(--tg-panel-hover);
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(51,144,236,.22),
    0 0 36px rgba(51,144,236,.48);
  outline: none;
}

.telegram-inbox-stack.theme-light .inbox-toast:hover,
.telegram-inbox-stack.theme-light .inbox-toast:focus-visible {
  box-shadow:
    0 16px 36px rgba(23,33,43,.16),
    0 0 0 1px rgba(51,144,236,.14),
    0 0 30px rgba(51,144,236,.3);
}

.inbox-toast-avatar {
  width: 40px;
  height: 40px;
}

.inbox-toast-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.inbox-toast-topline,
.inbox-toast-meta,
.inbox-toast-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.inbox-toast-title {
  min-width: 0;
  overflow: hidden;
  color: var(--tg-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-toast-time,
.inbox-toast-meta {
  color: var(--tg-muted);
  font-size: 11px;
  line-height: 14px;
}

.inbox-toast-time {
  flex: 0 0 auto;
  margin-left: auto;
}

.inbox-toast-account,
.inbox-toast-peer,
.inbox-toast-count {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-toast-count {
  flex: 0 0 auto;
  color: var(--tg-accent);
  font-weight: 800;
}

.inbox-toast-preview {
  color: var(--tg-text);
  font-size: 13px;
  line-height: 17px;
}

.inbox-toast-preview > span:first-child {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.inbox-toast-media {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(51,144,236,.16);
  color: var(--tg-accent);
  font-size: 11px;
  font-weight: 800;
}

.telegram-inbox-stack.theme-light .inbox-toast-media {
  background: #e5f2ff;
}

.inbox-toast-unread {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4aa3ff;
  box-shadow: 0 0 0 4px rgba(74,163,255,.15);
}

.inbox-toast.is-updated .inbox-toast-unread,
.inbox-toast.is-updated .inbox-toast-count {
  animation: toastPulse 240ms ease;
}

.inbox-toast-close {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tg-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.inbox-toast-close:hover,
.inbox-toast-close:focus-visible {
  background: rgba(127,145,163,.14);
  color: var(--tg-text);
  outline: none;
}

.inbox-toast-summary,
.inbox-toast-hint {
  grid-template-columns: 1fr;
  min-height: 40px;
  padding: 10px 12px;
  color: var(--tg-muted);
  font-size: 12px;
  font-weight: 800;
}

.inbox-toast-hint {
  border-style: dashed;
  color: var(--tg-accent);
}

.skeleton-circle,
.skeleton-line {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--tg-muted) 16%, transparent);
}

.skeleton-circle {
  border-radius: 999px;
}

.skeleton-line {
  display: block;
  height: 10px;
  border-radius: 999px;
}

.skeleton-line.is-title {
  width: 72%;
}

.skeleton-line.is-time {
  width: 38px;
}

.skeleton-circle::after,
.skeleton-line::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-100%);
  animation: skeletonShimmer 1.2s infinite;
}

@keyframes pinPop {
  0% { transform: scale(.85); }
  64% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes liveInboxEnter {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastEnter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastGlowPulse {
  0% {
    box-shadow:
      0 12px 30px rgba(0,0,0,.26),
      0 0 0 1px rgba(51,144,236,.08),
      0 0 0 rgba(51,144,236,0);
  }
  42% {
    box-shadow:
      0 18px 42px rgba(0,0,0,.34),
      0 0 0 1px rgba(51,144,236,.2),
      0 0 42px rgba(51,144,236,.5);
  }
  100% {
    box-shadow:
      0 16px 40px rgba(0,0,0,.32),
      0 0 0 1px rgba(51,144,236,.12),
      0 0 28px rgba(51,144,236,.35);
  }
}

@keyframes toastPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@keyframes skeletonShimmer {
  100% { transform: translateX(100%); }
}

@keyframes readPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.86); }
}

@media (max-width: 720px) {
  .telegram-inbox-stack {
    gap: 6px;
  }

  .inbox-toast-layer {
    top: auto;
    right: 10px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    gap: 6px;
  }

  .telegram-inbox-stack.is-chat-open .inbox-toast-layer {
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
  }

  .inbox-toast {
    grid-template-columns: 36px minmax(0, 1fr) 8px 32px;
    min-height: 70px;
    max-height: 84px;
    padding: 8px 8px 8px 10px;
  }

  .inbox-toast-avatar {
    width: 36px;
    height: 36px;
  }

  .inbox-toast-title {
    font-size: 13px;
    line-height: 17px;
  }

  .inbox-toast-preview {
    font-size: 12px;
    line-height: 16px;
  }

  .live-inbox-top-panel {
    max-height: 88px;
    border-radius: 7px;
  }

  .telegram-inbox-stack.is-chat-open .live-inbox-top-panel {
    min-height: 40px;
    max-height: 44px;
  }

  .telegram-inbox-stack.is-chat-open .live-inbox-top-panel .live-inbox-list {
    display: none;
  }

  .telegram-inbox-stack.is-chat-open .live-inbox-top-panel .live-inbox-head {
    min-height: 40px;
    border-bottom: 0;
  }

  .live-inbox-top-panel .live-inbox-list {
    max-height: 58px;
    padding: 6px 8px;
  }

  .live-inbox-top-panel .live-inbox-item {
    flex-basis: 272px;
    min-height: 52px;
    padding: 6px 8px;
  }

  .account-section-divider {
    display: none;
  }

  .telegram-shell:not(.is-chat-open) .telegram-account {
    grid-template-columns: 1fr;
    padding-top: 8px;
  }

  .telegram-shell:not(.is-chat-open) .account-pin-button {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    font-size: 13px;
    opacity: .28;
  }

  .telegram-shell:not(.is-chat-open) .account-pin-button.is-pinned {
    opacity: .95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-pin-button,
  .live-inbox-top-panel .live-inbox-item,
  .inbox-toast,
  .inbox-toast.is-updated .inbox-toast-unread,
  .inbox-toast.is-updated .inbox-toast-count,
  .telegram-dialog.is-read-pending .unread-badge,
  .unread-badge.is-read-pending,
  .skeleton-circle::after,
  .skeleton-line::after {
    animation: none;
    transition-duration: 1ms;
  }
}

/* Overview command center */
.overview-command-center {
  --ov-bg: #0f1720;
  --ov-panel: #17212b;
  --ov-hover: #202d3a;
  --ov-border: rgba(127,145,163,.22);
  --ov-text: #eef4f8;
  --ov-muted: #8fa1b2;
  --ov-blue: #3390ec;
  --ov-green: #4fd08b;
  --ov-amber: #f6b84b;
  --ov-red: #ff6b6b;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding-bottom: 18px;
  color: var(--ov-text);
}

.overview-command-center.theme-light {
  --ov-bg: #f4f7fa;
  --ov-panel: #ffffff;
  --ov-hover: #eef6ff;
  --ov-border: #dbe5ec;
  --ov-text: #17212b;
  --ov-muted: #6f8190;
  --ov-blue: #2481cc;
  --ov-green: #1fa463;
  --ov-amber: #b7791f;
  --ov-red: #d64545;
}

.overview-hero,
.overview-panel,
.overview-health-card {
  border: 1px solid var(--ov-border);
  border-radius: 10px;
  background: var(--ov-panel);
  box-shadow: none;
}

.overview-hero {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.overview-hero-main {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.overview-status-dot {
  width: 14px;
  height: 14px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--ov-green);
  box-shadow: 0 0 0 5px rgba(79,208,139,.13);
}

.overview-status-dot.is-attention {
  background: var(--ov-amber);
  box-shadow: 0 0 0 5px rgba(246,184,75,.15);
}

.overview-status-dot.is-critical {
  background: var(--ov-red);
  box-shadow: 0 0 0 5px rgba(255,107,107,.14);
}

.overview-hero-title {
  font-size: 25px;
  line-height: 30px;
  font-weight: 850;
}

.overview-hero-meta,
.overview-reasons,
.overview-updated,
.overview-row-meta {
  color: var(--ov-muted);
  font-size: 12px;
  line-height: 16px;
}

.overview-hero-meta,
.overview-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 5px;
}

.overview-stale,
.overview-badge,
.overview-filter-chip,
.overview-button {
  border-radius: 999px;
}

.overview-stale {
  color: var(--ov-amber);
}

.overview-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 260px;
}

.overview-button {
  min-height: 32px;
  border: 1px solid var(--ov-border);
  background: transparent;
  color: var(--ov-text);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.overview-button:hover,
.overview-button:focus-visible {
  background: var(--ov-hover);
  border-color: color-mix(in srgb, var(--ov-blue) 42%, var(--ov-border));
  outline: none;
}

.overview-button.primary {
  border-color: transparent;
  background: var(--ov-blue);
  color: #fff;
}

.overview-button.small {
  align-self: center;
  white-space: nowrap;
}

.overview-filter-strip {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.overview-filter-chip {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--ov-border);
  background: var(--ov-panel);
  color: var(--ov-muted);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.overview-filter-chip.is-active {
  color: #fff;
  background: var(--ov-blue);
  border-color: var(--ov-blue);
}

.overview-filter-chip:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.overview-health-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.overview-health-card {
  min-height: 78px;
  padding: 13px;
}

.overview-card-label {
  color: var(--ov-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
}

.overview-card-value {
  margin-top: 8px;
  color: var(--ov-text);
  font-size: 24px;
  font-weight: 850;
  line-height: 28px;
}

.overview-card-value.is-muted {
  color: var(--ov-muted);
  font-size: 15px;
}

.overview-health-card.is-danger .overview-card-value {
  color: var(--ov-red);
}

.overview-health-card.is-warning .overview-card-value {
  color: var(--ov-amber);
}

.overview-health-card.is-accent .overview-card-value {
  color: var(--ov-blue);
}

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .85fr);
  gap: 14px;
  align-items: start;
}

.overview-main,
.overview-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.overview-panel {
  min-width: 0;
  padding: 14px;
}

.overview-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.overview-panel-head h2 {
  margin: 0;
  font-size: 15px;
  line-height: 19px;
}

.overview-panel-head p {
  margin: 3px 0 0;
  color: var(--ov-muted);
  font-size: 12px;
}

.overview-list {
  display: grid;
  gap: 8px;
}

.overview-list.compact {
  gap: 7px;
}

.overview-risk-row,
.overview-live-row,
.overview-error-card,
.overview-audit-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--ov-border);
  border-radius: 8px;
  background: transparent;
  color: var(--ov-text);
  padding: 10px;
}

.overview-live-row {
  cursor: pointer;
  text-align: left;
}

.overview-live-row:hover,
.overview-live-row:focus-visible,
.overview-risk-row:hover {
  background: var(--ov-hover);
  outline: none;
}

.overview-row-avatar {
  width: 42px;
  height: 42px;
}

.overview-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.overview-row-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ov-text);
  font-size: 14px;
  font-weight: 850;
}

.overview-row-title > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
}

.overview-risk-row p,
.overview-error-card p {
  margin: 0;
  color: var(--ov-muted);
  font-size: 12px;
  line-height: 16px;
}

.overview-next-step {
  color: var(--ov-text);
  font-size: 12px;
  line-height: 16px;
}

.overview-badge,
.overview-code {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(51,144,236,.14);
  color: var(--ov-blue);
  font-size: 11px;
  font-weight: 850;
}

.overview-badge.is-critical,
.overview-badge.is-danger,
.overview-badge.is-error {
  color: var(--ov-red);
  background: rgba(255,107,107,.13);
}

.overview-badge.is-warning {
  color: var(--ov-amber);
  background: rgba(246,184,75,.14);
}

.overview-badge.is-stable,
.overview-badge.is-ok {
  color: var(--ov-green);
  background: rgba(79,208,139,.13);
}

.overview-live-preview {
  min-width: 0;
  overflow: hidden;
  color: var(--ov-text);
  font-size: 13px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-live-row.is-handled {
  opacity: .62;
}

.overview-kv-list {
  display: grid;
  gap: 7px;
}

.overview-kv-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ov-muted);
  font-size: 12px;
}

.overview-kv-list strong {
  color: var(--ov-text);
}

.overview-mini-list {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  color: var(--ov-amber);
  font-size: 12px;
}

.overview-insights {
  display: grid;
  gap: 7px;
}

.overview-insight,
.overview-empty-state {
  border: 1px solid var(--ov-border);
  border-radius: 8px;
  color: var(--ov-muted);
  padding: 10px;
  font-size: 13px;
}

.overview-audit-row,
.overview-error-card {
  grid-template-columns: 1fr;
}

.overview-audit-row.is-error {
  border-color: rgba(255,107,107,.3);
}

.overview-error-state {
  display: grid;
  gap: 8px;
  color: var(--ov-muted);
}

.overview-error-state strong {
  color: var(--ov-text);
  font-size: 18px;
}

.overview-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ov-muted) 14%, transparent);
}

.overview-skeleton.hero {
  min-height: 108px;
}

.overview-skeleton.card {
  min-height: 78px;
}

.overview-skeleton.row {
  min-height: 66px;
}

.overview-skeleton::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-100%);
  animation: skeletonShimmer 1.2s infinite;
}

.overview-command-center.is-updating .overview-hero {
  opacity: .82;
}

@media (max-width: 1280px) {
  .overview-health-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .overview-layout {
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
  }
}

@media (max-width: 900px) {
  .overview-layout {
    grid-template-columns: 1fr;
  }

  .overview-health-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .overview-command-center {
    gap: 10px;
  }

  .overview-hero {
    min-height: auto;
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .overview-hero-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .overview-hero-title {
    font-size: 22px;
    line-height: 27px;
  }

  .overview-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .overview-health-card {
    min-height: 70px;
    padding: 11px;
  }

  .overview-card-value {
    font-size: 21px;
  }

  .overview-risk-row,
  .overview-live-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .overview-risk-row .overview-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .overview-row-avatar {
    width: 38px;
    height: 38px;
  }
}

/* Premium operations shell v5 */
:root {
  --ops-bg: #05040a;
  --ops-bg-soft: #080613;
  --ops-bg-raised: #0d0a18;
  --ops-bg-strong: #11101a;
  --ops-panel: rgba(18, 16, 28, 0.72);
  --ops-panel-strong: rgba(24, 20, 38, 0.82);
  --ops-panel-hover: rgba(38, 31, 58, 0.78);
  --ops-border: rgba(255, 255, 255, 0.08);
  --ops-border-strong: rgba(192, 132, 252, 0.22);
  --ops-text: #f6f0ff;
  --ops-text-secondary: #b8aecf;
  --ops-muted: #746b8b;
  --ops-violet: #7c3aed;
  --ops-violet-2: #8b5cf6;
  --ops-violet-3: #a855f7;
  --ops-violet-soft: rgba(168, 85, 247, 0.14);
  --ops-cyan: #22d3ee;
  --ops-green: #22c55e;
  --ops-amber: #f59e0b;
  --ops-red: #f87171;
  --ops-radius-sm: 8px;
  --ops-radius: 10px;
  --ops-radius-lg: 16px;
  --ops-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --ops-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.28);
  --ops-glow: 0 0 34px rgba(124, 58, 237, 0.24);
  --ops-transition: 160ms cubic-bezier(.22,.61,.36,1);

  --bg: var(--ops-bg);
  --bg-soft: var(--ops-bg-soft);
  --surface: var(--ops-panel);
  --surface-muted: rgba(255, 255, 255, 0.045);
  --surface-strong: var(--ops-panel-strong);
  --line: var(--ops-border);
  --line-strong: var(--ops-border-strong);
  --text: var(--ops-text);
  --muted: var(--ops-text-secondary);
  --muted-strong: var(--ops-text-secondary);
  --ink: var(--ops-bg);
  --ink-2: var(--ops-bg-raised);
  --green: var(--ops-green);
  --green-strong: #16a34a;
  --green-soft: rgba(34, 197, 94, 0.13);
  --blue: var(--ops-cyan);
  --blue-soft: rgba(34, 211, 238, 0.12);
  --amber: var(--ops-amber);
  --amber-soft: rgba(245, 158, 11, 0.14);
  --red: var(--ops-red);
  --red-soft: rgba(248, 113, 113, 0.13);
  --violet: var(--ops-violet-2);
  --violet-soft: var(--ops-violet-soft);
  --radius: var(--ops-radius);
  --shadow: var(--ops-shadow);
  --shadow-soft: var(--ops-shadow-soft);
  --focus: 0 0 0 3px rgba(168, 85, 247, 0.24);
}

html {
  background: var(--ops-bg);
}

body {
  color: var(--ops-text);
  background:
    radial-gradient(circle at 14% 4%, rgba(124, 58, 237, 0.26), transparent 29rem),
    radial-gradient(circle at 88% 0%, rgba(34, 211, 238, 0.10), transparent 24rem),
    linear-gradient(135deg, #05040a 0%, #080613 45%, #0d0a18 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

body::selection,
::selection {
  color: #ffffff;
  background: rgba(168, 85, 247, 0.34);
}

::-webkit-scrollbar-thumb {
  background: rgba(184, 174, 207, 0.28);
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(192, 132, 252, 0.46);
  border: 3px solid transparent;
  background-clip: padding-box;
}

.shell {
  position: relative;
  isolation: isolate;
  grid-template-columns: 276px minmax(0, 1fr);
  min-height: 100vh;
}

.shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.68), transparent 72%);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(18, 16, 28, 0.90), rgba(8, 6, 19, 0.96)),
    rgba(8, 6, 19, 0.92);
  border-right: 1px solid var(--ops-border);
  box-shadow: 18px 0 50px rgba(0, 0, 0, 0.30);
  color: var(--ops-text);
  padding: 22px 16px;
  backdrop-filter: blur(18px);
}

.brand {
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ops-radius-lg);
  background: rgba(255, 255, 255, 0.035);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(192, 132, 252, 0.42);
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, var(--ops-violet), var(--ops-violet-3));
  box-shadow:
    0 12px 30px rgba(124, 58, 237, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.brand-title {
  color: #ffffff;
  font-size: 15px;
  letter-spacing: .01em;
}

.brand-subtitle {
  color: var(--ops-muted);
}

.nav {
  gap: 6px;
}

.nav-item {
  height: 42px;
  border-radius: 12px;
  color: var(--ops-text-secondary);
  padding-left: 34px;
  background: transparent;
  transition:
    color var(--ops-transition),
    background var(--ops-transition),
    border-color var(--ops-transition),
    box-shadow var(--ops-transition),
    transform var(--ops-transition);
}

.nav-item::before {
  left: 14px;
  width: 6px;
  height: 6px;
  color: inherit;
  opacity: .38;
}

.nav-item:hover,
.nav-item:focus-visible {
  color: var(--ops-text);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.07);
  outline: none;
}

.nav-item.is-active {
  color: #ffffff;
  border-color: rgba(192, 132, 252, 0.30);
  background:
    linear-gradient(90deg, rgba(124, 58, 237, 0.26), rgba(168, 85, 247, 0.08)),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 3px 0 0 var(--ops-violet-3),
    0 10px 30px rgba(124, 58, 237, 0.18),
    0 0 0 1px rgba(124, 58, 237, 0.06);
}

.nav-item.is-active::before {
  background: #ffffff;
  box-shadow: 0 0 15px rgba(192, 132, 252, 0.90);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

body:not(.role-admin) .admin-sidebar-footer {
  display: none;
}

.sidebar-gear-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, 0.20);
  border-radius: 14px;
  color: var(--ops-text-secondary);
  background:
    radial-gradient(circle at 35% 20%, rgba(192, 132, 252, 0.16), transparent 46%),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    color var(--ops-transition),
    border-color var(--ops-transition),
    background var(--ops-transition),
    box-shadow var(--ops-transition),
    transform var(--ops-transition);
}

.sidebar-gear-button:hover,
.sidebar-gear-button:focus-visible,
.sidebar-gear-button[aria-expanded="true"] {
  color: #ffffff;
  border-color: rgba(192, 132, 252, 0.42);
  background: rgba(124, 58, 237, 0.18);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.10),
    0 12px 28px rgba(124, 58, 237, 0.22);
  outline: none;
}

.sidebar-gear-button:active {
  transform: translateY(1px) scale(.98);
}

.admin-account-menu {
  z-index: 920;
  width: 248px;
  padding: 7px;
  border: 1px solid rgba(192, 132, 252, 0.22);
  border-radius: 14px;
  color: var(--ops-text);
  background:
    linear-gradient(180deg, rgba(24, 20, 38, 0.96), rgba(13, 10, 24, 0.97)),
    rgba(24, 20, 38, 0.96);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 30px rgba(124, 58, 237, 0.16);
  transform-origin: left bottom;
  animation: dialogMenuIn 160ms cubic-bezier(.2, .9, .2, 1) both;
}

.admin-account-menu.is-closing {
  animation: dialogMenuOut 140ms ease both;
}

.admin-account-menu button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 10px;
  color: #cfe4f5;
  background: transparent;
  padding: 0 11px;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.admin-account-menu button:hover,
.admin-account-menu button:focus-visible {
  background: rgba(42, 171, 238, 0.14);
  outline: none;
}

.admin-account-menu button.is-logout {
  color: #ffb7c0;
}

.admin-account-menu button.is-logout:hover,
.admin-account-menu button.is-logout:focus-visible {
  background: rgba(224, 82, 100, 0.14);
}

.overview-account-card.is-search-hidden {
  display: none !important;
}

.main {
  min-width: 0;
  padding: 22px 24px 34px;
}

.topbar {
  top: 14px;
  min-height: 68px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius-lg);
  background:
    linear-gradient(180deg, rgba(24, 20, 38, 0.86), rgba(18, 16, 28, 0.74));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

h1 {
  color: var(--ops-text);
  font-size: 26px;
  letter-spacing: 0;
}

h2 {
  color: var(--ops-text);
}

#pageSubtitle {
  color: var(--ops-text-secondary);
}

.topbar-actions {
  gap: 8px;
}

.status-pill,
.badge {
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ops-text-secondary);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.status-pill.ok,
.badge.online,
.badge.approved,
.badge.sent {
  color: var(--ops-green);
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
}

.status-pill.warn,
.badge.pending_review,
.badge.paused {
  color: var(--ops-amber);
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.24);
}

.status-pill.error,
.badge.disabled,
.badge.rejected,
.badge.failed,
.badge.error,
.badge.offline {
  color: var(--ops-red);
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.24);
}

.icon-button,
.primary-button,
.secondary-button,
.danger-button,
.segment {
  border-color: rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: var(--ops-text);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
  transition:
    transform var(--ops-transition),
    border-color var(--ops-transition),
    background var(--ops-transition),
    box-shadow var(--ops-transition),
    color var(--ops-transition);
}

.icon-button {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
}

.primary-button {
  border-color: rgba(168, 85, 247, 0.55);
  background: linear-gradient(135deg, var(--ops-violet), var(--ops-violet-3));
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.24);
}

.secondary-button,
.segment {
  color: var(--ops-text-secondary);
}

.secondary-button:hover,
.icon-button:hover,
.segment:hover {
  color: #ffffff;
  border-color: rgba(192, 132, 252, 0.28);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: var(--ops-glow);
}

.primary-button:hover {
  border-color: rgba(216, 180, 254, 0.66);
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
}

.danger-button {
  color: var(--ops-red);
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.10);
}

.danger-button:hover {
  background: rgba(248, 113, 113, 0.16);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.notice {
  margin-bottom: 14px;
  border-color: rgba(245, 158, 11, 0.20);
  border-radius: var(--ops-radius-lg);
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.10), rgba(124, 58, 237, 0.08)),
    rgba(18, 16, 28, 0.66);
  color: #f6d79e;
  box-shadow: none;
}

.notice::before {
  color: #120b04;
  background: var(--ops-amber);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.26);
}

.content {
  gap: 14px;
}

.metric-card,
.panel,
.resource-item,
.task-item {
  border-color: var(--ops-border);
  background:
    linear-gradient(180deg, rgba(24, 20, 38, 0.82), rgba(18, 16, 28, 0.70));
  box-shadow: var(--ops-shadow-soft);
  backdrop-filter: blur(14px);
}

.panel-header,
.resource-header,
.task-header {
  border-color: rgba(255, 255, 255, 0.07);
}

.input,
.textarea,
.telegram-select,
select {
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--ops-text);
  background: rgba(255, 255, 255, 0.055);
}

.input::placeholder,
.textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(184, 174, 207, 0.70);
}

.empty,
.dialog-meta,
.settings-row dt {
  color: var(--ops-text-secondary);
}

.settings-row,
.resource-item,
.task-item {
  border-color: rgba(255, 255, 255, 0.08);
}

.settings-row dd {
  color: var(--ops-text);
}

.skeleton-line,
.overview-skeleton {
  background: rgba(184, 174, 207, 0.13);
}

.skeleton-line::after,
.overview-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(216, 180, 254, 0.16), transparent);
}

.inbox-toast {
  border-color: rgba(192, 132, 252, 0.24);
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(24, 20, 38, 0.92), rgba(18, 16, 28, 0.88));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(192, 132, 252, 0.10),
    0 0 36px rgba(124, 58, 237, 0.34);
  backdrop-filter: blur(16px);
}

.inbox-toast:hover,
.inbox-toast:focus-visible {
  background:
    radial-gradient(circle at 10% 0%, rgba(168, 85, 247, 0.30), transparent 58%),
    linear-gradient(180deg, rgba(30, 24, 48, 0.95), rgba(22, 18, 34, 0.92));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(216, 180, 254, 0.18),
    0 0 44px rgba(168, 85, 247, 0.42);
}

.message-overlay-portal {
  position: fixed;
  inset: 0;
  z-index: 960;
  overflow: visible;
  pointer-events: none;
}

.message-overlay-portal .reaction-picker,
.message-overlay-portal .message-action-menu {
  pointer-events: auto;
}

.reaction-picker.is-portaled,
.message-action-menu.is-portaled {
  position: fixed;
  margin: 0;
  transform: translateY(0) scale(1);
}

.reaction-picker.is-open {
  display: grid;
}

.message-action-menu.is-open {
  display: grid;
}

/* Premium overview command center */
.overview-command-center {
  --ov-bg: var(--ops-bg);
  --ov-panel: rgba(18, 16, 28, 0.74);
  --ov-panel-strong: rgba(24, 20, 38, 0.86);
  --ov-hover: rgba(43, 34, 64, 0.82);
  --ov-border: rgba(255,255,255,.08);
  --ov-border-strong: rgba(192,132,252,.22);
  --ov-text: #f6f0ff;
  --ov-muted: #b8aecf;
  --ov-blue: #8b5cf6;
  --ov-green: #22c55e;
  --ov-amber: #f59e0b;
  --ov-red: #f87171;
  gap: 12px;
}

.overview-command-center.theme-light {
  --ov-bg: #f5f3ff;
  --ov-panel: rgba(255,255,255,.88);
  --ov-panel-strong: #ffffff;
  --ov-hover: #f1ecff;
  --ov-border: #ddd6fe;
  --ov-border-strong: #c4b5fd;
  --ov-text: #211832;
  --ov-muted: #716483;
  --ov-blue: #7c3aed;
  --ov-green: #1fa463;
  --ov-amber: #b7791f;
  --ov-red: #d64545;
}

.overview-hero,
.overview-panel,
.overview-health-card {
  border-color: var(--ov-border);
  background:
    linear-gradient(180deg, var(--ov-panel-strong, var(--ov-panel)), var(--ov-panel));
  box-shadow:
    0 18px 48px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(14px);
}

.overview-command-center.theme-light .overview-hero,
.overview-command-center.theme-light .overview-panel,
.overview-command-center.theme-light .overview-health-card {
  box-shadow:
    0 18px 42px rgba(33, 24, 50, 0.10),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.overview-hero {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  border-color: var(--ov-border-strong);
}

.overview-hero::after {
  content: "";
  position: absolute;
  inset: -120px -80px auto auto;
  width: 310px;
  height: 230px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.26), transparent 68%);
  pointer-events: none;
}

.overview-status-dot {
  background: var(--ov-green);
  box-shadow:
    0 0 0 5px rgba(34, 197, 94, 0.13),
    0 0 24px rgba(34, 197, 94, 0.28);
}

.overview-status-dot.is-attention {
  background: var(--ov-amber);
  box-shadow:
    0 0 0 5px rgba(245, 158, 11, 0.15),
    0 0 24px rgba(245, 158, 11, 0.24);
}

.overview-status-dot.is-critical {
  background: var(--ov-red);
  box-shadow:
    0 0 0 5px rgba(248, 113, 113, 0.15),
    0 0 24px rgba(248, 113, 113, 0.26);
}

.overview-hero-title {
  color: var(--ov-text);
  font-size: 26px;
  letter-spacing: 0;
}

.overview-hero-meta span,
.overview-reasons span,
.overview-updated {
  color: var(--ov-muted);
}

.overview-button,
.overview-filter-chip {
  border-color: var(--ov-border);
  color: var(--ov-text);
  background: rgba(255,255,255,.045);
  transition:
    background var(--ops-transition),
    border-color var(--ops-transition),
    color var(--ops-transition),
    box-shadow var(--ops-transition),
    transform var(--ops-transition);
}

.overview-button:hover,
.overview-button:focus-visible,
.overview-filter-chip:hover:not(:disabled),
.overview-filter-chip:focus-visible {
  background: var(--ov-hover);
  border-color: var(--ov-border-strong);
  box-shadow: 0 0 24px rgba(124,58,237,.16);
}

.overview-button.primary,
.overview-filter-chip.is-active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: rgba(216, 180, 254, 0.42);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(124,58,237,.22);
}

.overview-health-card {
  position: relative;
  overflow: hidden;
}

.overview-health-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(184, 174, 207, 0.22);
}

.overview-health-card.is-accent::before {
  background: var(--ov-blue);
}

.overview-health-card.is-warning::before {
  background: var(--ov-amber);
}

.overview-health-card.is-danger::before {
  background: var(--ov-red);
}

.overview-card-label {
  color: var(--ov-muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.overview-card-value {
  color: var(--ov-text);
}

.overview-risk-row,
.overview-live-row,
.overview-error-card,
.overview-audit-row,
.overview-insight,
.overview-empty-state {
  border-color: var(--ov-border);
  background: rgba(255,255,255,.035);
}

.overview-live-row:hover,
.overview-live-row:focus-visible,
.overview-risk-row:hover {
  background: var(--ov-hover);
  border-color: var(--ov-border-strong);
}

.overview-badge,
.overview-code {
  color: #c4b5fd;
  background: rgba(124,58,237,.16);
}

.overview-badge.is-stable,
.overview-badge.is-ok {
  color: var(--ov-green);
  background: rgba(34,197,94,.13);
}

.overview-badge.is-warning {
  color: var(--ov-amber);
  background: rgba(245,158,11,.14);
}

.overview-badge.is-critical,
.overview-badge.is-danger,
.overview-badge.is-error {
  color: var(--ov-red);
  background: rgba(248,113,113,.13);
}

.overview-live-preview,
.overview-next-step,
.overview-kv-list strong {
  color: var(--ov-text);
}

.overview-mini-list {
  color: var(--ov-amber);
}

/* Overview dashboard layout like an operational command center */
.sidebar {
  background:
    linear-gradient(180deg, rgba(8, 18, 32, 0.96), rgba(5, 10, 20, 0.98)),
    #07111f;
  border-right-color: rgba(51, 144, 236, 0.16);
}

.brand {
  border-color: rgba(51, 144, 236, 0.18);
  background: rgba(51, 144, 236, 0.055);
}

.brand-mark {
  border-color: rgba(51, 144, 236, 0.42);
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, #2481cc, #3390ec);
  box-shadow:
    0 12px 30px rgba(51, 144, 236, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.nav-item.is-active {
  border-color: rgba(51, 144, 236, 0.32);
  background:
    linear-gradient(90deg, rgba(51, 144, 236, 0.24), rgba(51, 144, 236, 0.08)),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 3px 0 0 #3390ec,
    0 10px 28px rgba(51, 144, 236, 0.16);
}

.topbar {
  border-color: rgba(51, 144, 236, 0.14);
  background:
    linear-gradient(180deg, rgba(13, 24, 38, 0.88), rgba(8, 16, 28, 0.82)),
    rgba(9, 16, 28, 0.86);
}

.overview-command-center {
  --ov-panel: rgba(15, 30, 46, 0.82);
  --ov-panel-strong: rgba(18, 37, 56, 0.92);
  --ov-hover: rgba(32, 52, 72, 0.92);
  --ov-border: rgba(127, 145, 163, 0.18);
  --ov-border-strong: rgba(51, 144, 236, 0.26);
  --ov-blue: #3390ec;
  gap: 12px;
}

.overview-health-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.overview-health-card {
  min-height: 96px;
  padding: 15px 16px;
}

.overview-card-note {
  margin-top: 5px;
  color: var(--ov-muted);
  font-size: 11px;
  line-height: 14px;
}

.overview-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 14px;
  align-items: start;
}

.overview-dashboard-main,
.overview-dashboard-side,
.overview-bottom-grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.overview-dashboard-side {
  align-content: start;
}

.overview-accounts-panel {
  min-height: 520px;
}

.overview-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px;
  min-width: 0;
}

.overview-account-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--ov-border);
  border-radius: 12px;
  padding: 12px;
  background:
    radial-gradient(circle at 92% 12%, rgba(51, 144, 236, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.035);
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.overview-account-card:hover {
  border-color: var(--ov-border-strong);
  background: var(--ov-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.overview-account-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.overview-account-avatar {
  width: 44px;
  height: 44px;
}

.overview-account-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.overview-account-title strong,
.overview-account-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-account-title strong {
  color: var(--ov-text);
  font-size: 14px;
  line-height: 18px;
}

.overview-account-title span {
  color: var(--ov-muted);
  font-size: 12px;
}

.overview-account-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--ov-muted);
  background: rgba(127, 145, 163, 0.10);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.overview-account-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.overview-account-status.is-online,
.overview-account-status.is-listener {
  color: var(--ov-green);
  background: rgba(34, 197, 94, 0.12);
}

.overview-account-status.is-connecting,
.overview-account-status.is-idle {
  color: var(--ov-amber);
  background: rgba(245, 158, 11, 0.12);
}

.overview-account-status.is-error {
  color: var(--ov-red);
  background: rgba(248, 113, 113, 0.12);
}

.overview-account-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.overview-account-stats div {
  min-width: 0;
  display: grid;
  gap: 2px;
  border-radius: 8px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.035);
}

.overview-account-stats span {
  color: var(--ov-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.overview-account-stats b {
  min-width: 0;
  overflow: hidden;
  color: var(--ov-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-account-card .overview-button {
  justify-self: start;
}

.overview-live-panel .overview-list,
#overviewAuditFeed {
  max-height: 330px;
  overflow-y: auto;
  padding-right: 2px;
}

.overview-bottom-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr) minmax(240px, .8fr) minmax(260px, .9fr);
}

.overview-skeleton.account {
  min-height: 158px;
}

@media (max-width: 1400px) {
  .overview-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    top: 0;
    z-index: 30;
    height: auto;
    padding: 10px 12px;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--ops-border);
  }

  .brand {
    width: fit-content;
    max-width: 100%;
  }

  .nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 3px;
  }

  .nav-item {
    min-width: max-content;
    padding: 0 14px 0 30px;
  }

  .main {
    padding: 16px;
  }

  .overview-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .overview-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    top: 74px;
  }
}

@media (max-width: 720px) {
  .main {
    padding: 12px;
  }

  .brand {
    min-height: 46px;
    padding: 6px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 13px;
  }

  .brand-title {
    font-size: 14px;
  }

  .brand-subtitle {
    font-size: 11px;
  }

  .nav-item {
    height: 40px;
  }

  .topbar {
    top: 104px;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
  }

  .topbar-actions {
    gap: 8px;
  }

  .overview-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-account-grid,
  .overview-bottom-grid {
    grid-template-columns: 1fr;
  }

  .overview-accounts-panel {
    min-height: auto;
  }

  h1 {
    font-size: 22px;
  }

  #pageSubtitle {
    font-size: 12px;
  }

  .status-pill {
    min-width: 0;
    max-width: calc(100vw - 78px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .notice {
    padding: 10px 12px 10px 38px;
    font-size: 12px;
  }

  .overview-hero {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .topbar,
  .icon-button,
  .primary-button,
  .secondary-button,
  .danger-button,
  .segment,
  .overview-button,
  .overview-filter-chip,
  .inbox-toast {
    transition-duration: 1ms !important;
  }
}

/* Dialogs all-private mode */
.dialog-mode-button {
  position: relative;
}

.dialog-mode-menu,
.all-dialog-context-menu {
  position: fixed;
  z-index: 260;
  width: 220px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(192, 132, 252, 0.24);
  border-radius: 12px;
  padding: 6px;
  background:
    radial-gradient(circle at 15% 0%, rgba(124, 58, 237, 0.20), transparent 55%),
    rgba(18, 16, 28, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.40), 0 0 28px rgba(124, 58, 237, 0.20);
  color: var(--ops-text, #f6f0ff);
  backdrop-filter: blur(16px);
}

.dialog-mode-menu button,
.all-dialog-context-menu button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 9px;
  padding: 0 10px;
  color: inherit;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.dialog-mode-menu button:hover,
.dialog-mode-menu button:focus-visible,
.all-dialog-context-menu button:hover,
.all-dialog-context-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.dialog-mode-menu button b {
  opacity: 0;
  color: #c084fc;
}

.dialog-mode-menu button.is-active {
  color: #ffffff;
  background: rgba(124, 58, 237, 0.22);
}

.dialog-mode-menu button.is-active b {
  opacity: 1;
}

.all-dialog-context-menu button:disabled {
  opacity: .45;
}

.all-dialog-context-menu .is-danger {
  color: #f87171;
}

.telegram-inbox-stack.is-all-dialogs-mode .live-inbox-top-panel {
  display: none;
}

.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: clamp(320px, 32vw, 440px) minmax(420px, 1fr);
  height: var(--telegram-shell-height, calc(100vh - 132px));
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: none;
}

.telegram-shell.is-all-dialogs-mode .telegram-left .telegram-search {
  grid-template-columns: minmax(0, 1fr) 36px 36px;
}

.telegram-shell.is-all-dialogs-mode #dialogSearch {
  opacity: 1;
  color: var(--tg-text);
  font-weight: 800;
  text-align: left;
}

.all-dialogs-meta {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  color: var(--tg-muted);
  font-size: 11px;
}

.all-dialogs-mobile-tabs {
  display: none;
}

.all-dialog-row {
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  gap: 10px;
}

.all-dialog-row.is-pinned {
  box-shadow: inset 2px 0 0 var(--tg-pin, #6ab3ff);
}

.all-dialog-actions {
  display: grid;
  gap: 4px;
  align-self: center;
}

.all-dialog-pin,
.all-dialog-menu-trigger {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--tg-muted);
  opacity: .5;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.all-dialog-pin:hover,
.all-dialog-pin:focus-visible,
.all-dialog-menu-trigger:hover,
.all-dialog-menu-trigger:focus-visible {
  color: var(--tg-text);
  background: rgba(127, 145, 163, 0.14);
  opacity: 1;
  outline: none;
}

.all-dialog-pin.is-pinned,
.dialog-pinned {
  color: var(--tg-pin, #6ab3ff);
}

.dialog-pinned {
  height: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 6px;
  background: rgba(106, 179, 255, 0.15);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.all-dialog-notice {
  margin: 8px;
  border: 1px solid rgba(245, 158, 11, .24);
  border-radius: 8px;
  padding: 8px 10px;
  color: #f6d79e;
  background: rgba(245, 158, 11, .09);
  font-size: 12px;
}

.all-incoming-list {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.telegram-shell.is-all-dialogs-mode .telegram-left .live-inbox-item {
  min-height: 68px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.telegram-shell.is-all-dialogs-mode .telegram-left .live-inbox-item:hover,
.telegram-shell.is-all-dialogs-mode .telegram-left .live-inbox-item:focus-visible {
  background: var(--tg-panel-hover);
}

.all-dialog-row.is-removing {
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

@media (max-width: 1280px) {
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 320px minmax(360px, 1fr);
  }
}

@media (max-width: 720px) {
  .telegram-shell.is-all-dialogs-mode {
    display: block;
    overflow-x: hidden;
  }

  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) .telegram-accounts {
    height: 100%;
    overflow-x: hidden;
  }

  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) .telegram-left {
    display: none;
  }

  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) .telegram-account-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    align-content: start;
    height: calc(100% - 92px);
    max-height: none;
    width: 100%;
    min-width: 0;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px 8px 10px;
    scroll-snap-type: none;
  }

  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) #accountListMeta {
    display: grid;
  }

  .all-dialogs-meta {
    display: grid;
    gap: 6px;
  }

  .all-dialogs-mobile-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  .all-dialogs-mobile-tabs button {
    flex: 1 0 auto;
    min-height: 30px;
    border: 1px solid var(--tg-line-soft);
    border-radius: 999px;
    padding: 0 10px;
    color: var(--tg-muted);
    background: transparent;
    font-size: 12px;
    font-weight: 800;
  }

  .all-dialogs-mobile-tabs button.is-active {
    color: #ffffff;
    border-color: var(--tg-accent);
    background: var(--tg-accent);
  }

  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) #inboxAccountList > .all-dialog-row {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 76px;
    grid-template-columns: 46px minmax(0, 1fr) 28px;
    justify-self: stretch;
    scroll-snap-align: none;
  }

  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) .all-dialog-row .dialog-main,
  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) .all-dialog-row .dialog-title,
  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) .all-dialog-row .dialog-preview,
  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) .all-dialog-row .dialog-subline {
    min-width: 0;
  }

  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) .all-dialog-row .all-dialog-actions {
    min-width: 28px;
  }

  .telegram-shell.is-all-dialogs-mode:not(.is-chat-open) .all-incoming-list {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .dialog-mode-menu,
  .all-dialog-context-menu {
    width: min(236px, calc(100vw - 20px));
  }
}

/* Dialogs v6 final order-sensitive overrides. */
.theme-toggle-button {
  display: none !important;
}

.dialog-mode-menu {
  min-width: 216px;
  padding: 7px;
  border: 1px solid rgba(127, 145, 163, .24);
  border-radius: 12px;
  background: rgba(23, 33, 43, .98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38), 0 0 0 1px rgba(51, 144, 236, .08);
  transform-origin: top left;
  animation: dialogMenuEnter 150ms cubic-bezier(.22,.61,.36,1) both;
  z-index: 240;
}

.dialog-mode-menu.is-closing {
  animation: dialogMenuExit 140ms ease both;
  pointer-events: none;
}

.dialog-mode-menu button {
  min-height: 40px;
  border-radius: 9px;
  color: #dce7f2;
  font-size: 14px;
  font-weight: 750;
  transition: background-color 130ms ease, color 130ms ease, transform 110ms ease;
}

.dialog-mode-menu button span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.dialog-mode-menu button i {
  width: 20px;
  display: inline-grid;
  place-items: center;
  color: #7f91a3;
  font-style: normal;
}

.dialog-mode-menu button:hover,
.dialog-mode-menu button:focus-visible {
  color: #ffffff;
  background: rgba(51, 144, 236, .14);
}

.dialog-mode-menu button.is-active {
  color: #ffffff;
  background: rgba(51, 144, 236, .24);
}

.dialog-mode-menu button.is-active i,
.dialog-mode-menu button.is-active b {
  color: #8ed1ff;
}

.telegram-loader-state {
  width: 100%;
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--tg-muted, #7f91a3);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.telegram-loader-state.is-inline {
  min-height: 34px;
  display: inline-flex;
  justify-content: center;
  width: auto;
  padding: 4px 0;
}

.telegram-loader-spinner,
.small-spinner {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 3px solid rgba(51, 144, 236, .16);
  border-top-color: #3390ec;
  border-right-color: #3390ec;
  animation: telegramCircularLoader 760ms cubic-bezier(.42, .12, .28, .94) infinite;
}

.telegram-loader-state.is-inline .telegram-loader-spinner,
.small-spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.composer-emoji-picker {
  position: fixed;
  z-index: 230;
  width: min(360px, calc(100vw - 20px));
  max-height: min(430px, calc(100vh - 20px));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(127, 145, 163, .24);
  border-radius: 14px;
  background: rgba(23, 33, 43, .99);
  color: #e7eef5;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .42), 0 0 0 1px rgba(51, 144, 236, .08);
  animation: emojiPickerEnter 160ms cubic-bezier(.22,.61,.36,1) both;
  overflow: hidden;
}

.composer-emoji-picker.is-closing {
  animation: emojiPickerExit 140ms ease both;
  pointer-events: none;
}

.composer-emoji-search {
  width: 100%;
  height: 36px;
  border: 1px solid rgba(127, 145, 163, .18);
  border-radius: 999px;
  padding: 0 13px;
  color: #e7eef5;
  background: #242f3d;
  outline: none;
  font: inherit;
  font-size: 13px;
}

.composer-emoji-categories {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.composer-emoji-categories button,
.composer-emoji-grid button {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease, transform 110ms ease;
}

.composer-emoji-categories button {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 17px;
}

.composer-emoji-categories button:hover,
.composer-emoji-categories button:focus-visible,
.composer-emoji-categories button.is-active {
  background: rgba(51, 144, 236, .18);
  outline: none;
}

.composer-emoji-title {
  color: #7f91a3;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.composer-emoji-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  overflow-y: auto;
  padding-right: 2px;
}

.composer-emoji-grid button {
  height: 36px;
  border-radius: 9px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 22px;
  line-height: 1;
}

.composer-emoji-grid button:hover,
.composer-emoji-grid button:focus-visible {
  background: rgba(127, 145, 163, .16);
  transform: scale(1.08);
  outline: none;
}

.composer-emoji-empty {
  grid-column: 1 / -1;
  padding: 22px 10px;
  color: #7f91a3;
  text-align: center;
  font-size: 13px;
}

.message-reaction {
  animation: reactionPop 220ms cubic-bezier(.2,.9,.25,1.25) both;
}

.message-reaction.is-pending {
  opacity: .66;
  border-color: rgba(51, 144, 236, .28);
  background: rgba(51, 144, 236, .12);
}

.message-actions {
  z-index: 260;
}

.telegram-message.is-picker-open,
.telegram-message.is-action-menu-open {
  position: relative;
  z-index: 275;
}

.reaction-picker,
.message-action-menu {
  z-index: 270;
  pointer-events: auto;
}

.telegram-message.has-reaction-error .message-reaction.is-error {
  border-color: #e05264;
  box-shadow: 0 0 0 2px rgba(224, 82, 100, .16);
}

.all-dialog-row.is-activity-pulse {
  animation: allDialogActivityPulse 820ms ease-out both;
}

.all-dialog-pin.is-pinned {
  animation: pinPop 180ms cubic-bezier(.2,.9,.25,1.25);
}

.telegram-message {
  animation: messageAppear 180ms cubic-bezier(.22,.61,.36,1) both;
}

@media (max-width: 720px) {
  .composer-emoji-picker {
    width: calc(100vw - 20px) !important;
    max-height: min(360px, calc(100vh - 132px));
  }

  .composer-emoji-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* Dialogs v7 auth, dark-only and messenger interaction polish. */
body {
  background: #0e1621;
}

body.auth-login-active {
  overflow: hidden;
}

body.auth-login-active #appShell {
  display: none;
}

body.role-worker .sidebar,
body.role-worker .topbar,
body.role-worker #safetyNotice {
  display: none !important;
}

body.role-worker .shell {
  grid-template-columns: 1fr;
  min-height: 100vh;
}

body.role-worker .main {
  min-width: 0;
  padding: 0;
}

body.role-worker .content {
  min-height: 100vh;
  padding: 0;
}

body.role-worker .telegram-inbox-stack {
  min-height: 100vh;
}

body.role-worker .telegram-shell {
  height: var(--telegram-shell-height, 100vh);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.dialog-mode-separator {
  display: block;
  height: 1px;
  margin: 6px 3px;
  background: rgba(127, 145, 163, .18);
}

.dialog-mode-menu button.is-logout {
  color: #ffb7c0;
}

.dialog-mode-menu button.is-logout:hover,
.dialog-mode-menu button.is-logout:focus-visible {
  background: rgba(224, 82, 100, .14);
}

.panel-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .38);
  animation: overlayFadeIn 150ms ease both;
}

.panel-confirm-card {
  width: min(340px, calc(100vw - 36px));
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(127, 145, 163, .24);
  border-radius: 14px;
  color: #e7eef5;
  background: rgba(23, 33, 43, .98);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .46);
  animation: menuScaleIn 160ms cubic-bezier(.22,.61,.36,1) both;
}

.panel-confirm-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.panel-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.panel-confirm-actions button {
  min-width: 74px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  color: #e7eef5;
  background: rgba(127, 145, 163, .16);
  cursor: pointer;
  font-weight: 850;
}

.panel-confirm-actions .panel-confirm-yes {
  color: #fff;
  background: #e05264;
}

.global-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 980;
  max-width: min(340px, calc(100vw - 36px));
  padding: 11px 14px;
  border: 1px solid rgba(127, 145, 163, .24);
  border-radius: 12px;
  color: #e7eef5;
  background: rgba(23, 33, 43, .98);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .36);
  animation: toastEnter 180ms ease both;
  font-size: 13px;
  font-weight: 800;
}

.global-toast.error {
  border-color: rgba(224, 82, 100, .32);
}

.global-toast.is-hiding {
  animation: toastExit 180ms ease both;
}

.telegram-composer {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px 42px;
  align-items: end;
  gap: 8px;
  flex-wrap: nowrap;
}

.telegram-textarea {
  min-width: 0;
}

.telegram-composer .telegram-icon-button,
.telegram-composer .telegram-send {
  flex: 0 0 auto;
  align-self: end;
}

.composer-emoji-button {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.composer-sticker-disabled {
  grid-column: 1 / -1;
  min-height: 136px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 18px;
  border: 1px dashed rgba(127, 145, 163, .24);
  border-radius: 12px;
  color: #7f91a3;
  text-align: center;
}

.composer-sticker-disabled strong {
  color: #e7eef5;
  font-size: 14px;
}

.composer-sticker-disabled span {
  font-size: 12px;
  line-height: 1.4;
}

.composer-sticker-disabled button {
  justify-self: center;
  height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 13px;
  color: #ffffff;
  background: #3390ec;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.composer-sticker-disabled.is-error {
  border-color: rgba(224, 82, 100, .32);
  color: #ffdce2;
}

.composer-sticker-panel {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.composer-sticker-packs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.composer-sticker-packs button {
  flex: 0 0 96px;
  height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border-radius: 12px;
  padding: 6px;
  background: rgba(127, 145, 163, .1);
  text-align: left;
}

.composer-sticker-packs button.is-active,
.composer-sticker-packs button:hover,
.composer-sticker-packs button:focus-visible {
  background: rgba(51, 144, 236, .18);
  outline: none;
}

.composer-sticker-packs img,
.composer-sticker-packs span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  object-fit: contain;
  display: grid;
  place-items: center;
  background: rgba(51, 144, 236, .12);
}

.composer-sticker-packs b {
  min-width: 0;
  overflow: hidden;
  color: #dce7f2;
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-sticker-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  overflow-y: auto;
  padding-right: 2px;
}

.composer-sticker-item {
  position: relative;
  aspect-ratio: 1;
  min-height: 54px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(127, 145, 163, .08);
}

.composer-sticker-item:hover,
.composer-sticker-item:focus-visible {
  background: rgba(51, 144, 236, .15);
  transform: scale(1.03);
  outline: none;
}

.composer-sticker-item img,
.composer-sticker-item video,
.sticker-fallback {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: contain;
}

.composer-sticker-item video {
  z-index: 2;
  border-radius: 10px;
}

.sticker-fallback {
  display: grid;
  place-items: center;
  color: #8ed1ff;
  font-size: 24px;
}

.sticker-animated-placeholder {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #8ed1ff;
  background:
    radial-gradient(circle at 35% 24%, rgba(142, 209, 255, .28), transparent 34%),
    linear-gradient(135deg, rgba(51, 144, 236, .18), rgba(23, 33, 43, .32));
  box-shadow: inset 0 0 0 1px rgba(142, 209, 255, .16);
}

.sticker-animated-placeholder::before,
.sticker-animated-placeholder::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.sticker-animated-placeholder::before {
  width: 46%;
  height: 46%;
  border: 2px solid rgba(142, 209, 255, .34);
  border-top-color: rgba(142, 209, 255, .82);
  animation: telegramCircularLoader 920ms cubic-bezier(.42, .12, .28, .94) infinite;
}

.sticker-animated-placeholder::after {
  inset: 7px;
  border: 1px dashed rgba(142, 209, 255, .20);
}

.sticker-animated-placeholder span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 24px;
}

.sticker-kind {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 4;
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 5px;
  color: #d6edff;
  background: rgba(15, 26, 36, .72);
  border: 1px solid rgba(142, 209, 255, .20);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.composer-sticker-item.is-sending::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #ffffff;
  animation: telegramCircularLoader 760ms cubic-bezier(.42, .12, .28, .94) infinite;
}

.composer-sticker-loading {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
}

.all-dialog-row.is-removing {
  opacity: 0;
  transform: scale(.98) translateY(-4px);
  max-height: 0;
  margin-block: 0;
  padding-block: 0;
  overflow: hidden;
  transition: opacity 140ms ease, transform 140ms ease, max-height 220ms cubic-bezier(.22,.61,.36,1), margin 220ms ease, padding 220ms ease;
}

@keyframes loginCardEnter {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes menuScaleIn {
  from { opacity: 0; transform: translateY(4px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastExit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .login-card,
  .panel-confirm-overlay,
  .panel-confirm-card,
  .global-toast,
  .all-dialog-row.is-removing {
    animation: none !important;
    transition: opacity 120ms ease !important;
  }
}

/* Overview: Russian admin dashboard, real command-center metrics only */
.overview-command-center {
  --ov-bg: #0E1621;
  --ov-panel: #17212B;
  --ov-panel-strong: #1C2733;
  --ov-hover: #202B36;
  --ov-border: rgba(127, 145, 163, .22);
  --ov-border-strong: rgba(51, 144, 236, .32);
  --ov-text: #E7EEF5;
  --ov-muted: #7F91A3;
  --ov-blue: #3390EC;
  --ov-green: #4FD08B;
  --ov-amber: #E0A84F;
  --ov-red: #E05264;
  gap: 12px;
}

.overview-command-center.theme-light {
  --ov-bg: #0E1621;
  --ov-panel: #17212B;
  --ov-panel-strong: #1C2733;
  --ov-hover: #202B36;
  --ov-border: rgba(127, 145, 163, .22);
  --ov-border-strong: rgba(51, 144, 236, .32);
  --ov-text: #E7EEF5;
  --ov-muted: #7F91A3;
  --ov-blue: #3390EC;
  --ov-green: #4FD08B;
  --ov-amber: #E0A84F;
  --ov-red: #E05264;
}

.overview-hero,
.overview-panel,
.overview-health-card {
  border-color: var(--ov-border);
  background: linear-gradient(180deg, var(--ov-panel-strong), var(--ov-panel));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .045);
  backdrop-filter: none;
}

.overview-hero {
  min-height: 122px;
}

.overview-project-health {
  min-width: 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.overview-health-ring {
  --score: 0;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--ov-panel) 55%, transparent 57%),
    conic-gradient(var(--ov-green) calc(var(--score) * 1%), rgba(127, 145, 163, .18) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.overview-project-health.is-attention .overview-health-ring {
  background:
    radial-gradient(circle at center, var(--ov-panel) 55%, transparent 57%),
    conic-gradient(var(--ov-amber) calc(var(--score) * 1%), rgba(127, 145, 163, .18) 0);
}

.overview-project-health.is-critical .overview-health-ring {
  background:
    radial-gradient(circle at center, var(--ov-panel) 55%, transparent 57%),
    conic-gradient(var(--ov-red) calc(var(--score) * 1%), rgba(127, 145, 163, .18) 0);
}

.overview-health-ring span {
  color: var(--ov-text);
  font-size: 22px;
  font-weight: 900;
}

.overview-hero-kicker {
  color: var(--ov-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.overview-hero::after {
  display: none;
}

.overview-button.primary,
.overview-filter-chip.is-active {
  border-color: var(--ov-blue);
  background: var(--ov-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(51, 144, 236, .22);
}

.overview-button:hover,
.overview-button:focus-visible,
.overview-filter-chip:hover:not(:disabled),
.overview-filter-chip:focus-visible {
  background: var(--ov-hover);
  border-color: var(--ov-border-strong);
  box-shadow: 0 0 0 3px rgba(51, 144, 236, .10);
}

.overview-health-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.overview-dashboard-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}

.overview-dashboard-main {
  grid-template-rows: auto auto;
}

.overview-account-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.overview-account-search {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--ov-muted);
  font-size: 11px;
  font-weight: 850;
}

.overview-account-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--ov-border);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--ov-text);
  background: #242F3D;
  outline: none;
}

.overview-account-search input:focus {
  border-color: var(--ov-blue);
  box-shadow: 0 0 0 3px rgba(51, 144, 236, .12);
}

.overview-account-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.overview-accounts-panel {
  min-height: auto;
}

.overview-account-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.overview-account-card {
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}

.overview-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.overview-button.danger {
  color: #ffd7dd;
  border-color: rgba(224, 82, 100, .34);
  background: rgba(224, 82, 100, .10);
}

.overview-hitlin {
  display: grid;
  gap: 6px;
}

.overview-hitlin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ov-muted);
  font-size: 11px;
  font-weight: 850;
}

.overview-hitlin-head b {
  color: var(--ov-text);
  font-size: 12px;
}

.overview-hitlin-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(127, 145, 163, .18);
}

.overview-hitlin-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ov-muted);
}

.overview-hitlin-bar.is-online span {
  background: var(--ov-green);
}

.overview-hitlin-bar.is-idle span {
  background: var(--ov-amber);
}

.overview-hitlin-bar.is-error span {
  background: var(--ov-red);
}

.overview-load-more {
  display: flex;
  justify-content: center;
  min-height: 0;
  padding-top: 10px;
}

.overview-chart-panel {
  min-height: 300px;
}

.overview-activity-chart {
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.overview-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--ov-muted);
  font-size: 12px;
  font-weight: 800;
}

.overview-chart-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: currentColor;
}

.overview-chart-legend .is-sent {
  color: #3390EC;
}

.overview-chart-legend .is-received {
  color: #4FD08B;
}

.overview-chart-svg {
  width: 100%;
  height: auto;
  min-height: 220px;
  overflow: visible;
}

.overview-chart-svg .overview-chart-grid line {
  stroke: rgba(127, 145, 163, .15);
  stroke-width: 1;
}

.overview-chart-svg .overview-chart-grid text {
  fill: var(--ov-muted);
  font-size: 11px;
}

.overview-chart-svg polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.overview-chart-svg polyline[data-series="sent"] {
  stroke: #3390EC;
}

.overview-chart-svg polyline[data-series="received"] {
  stroke: #4FD08B;
}

.overview-chart-points circle {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.overview-chart-points circle:hover {
  fill: var(--ov-text);
}

.overview-chart-points circle.is-sent:hover {
  stroke: #3390EC;
}

.overview-chart-points circle.is-received:hover {
  stroke: #4FD08B;
}

.overview-activity-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--ov-border);
  border-radius: 9px;
  padding: 10px;
  background: rgba(255, 255, 255, .035);
}

.overview-event-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--ov-blue);
}

.overview-event-dot.is-stable {
  background: var(--ov-green);
}

.overview-event-dot.is-warning {
  background: var(--ov-amber);
}

.overview-event-dot.is-critical {
  background: var(--ov-red);
}

.overview-bottom-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.overview-risk-panel .overview-list {
  max-height: 360px;
  overflow-y: auto;
}

.overview-sources-panel {
  align-self: start;
}

.overview-skeleton.chart {
  min-height: 250px;
}

#overviewPostActions {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}

#overviewPostActions .overview-audit-row {
  min-height: 62px;
}

.overview-add-account-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 10, 16, .72);
  animation: overlayFadeIn 140ms ease;
}

.overview-add-account-modal {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
  border: 1px solid rgba(51, 144, 236, .22);
  border-radius: 16px;
  padding: 26px;
  color: var(--ov-text);
  background:
    radial-gradient(circle at 50% -12%, rgba(51, 144, 236, .24), transparent 34%),
    #17212B;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .46);
  animation: menuScaleIn 160ms ease;
}

.overview-add-accounts-modal {
  width: min(460px, calc(100vw - 32px));
}

.overview-modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  color: var(--ov-muted);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
}

.overview-modal-close:hover,
.overview-modal-close:focus-visible {
  color: var(--ov-text);
  background: rgba(255, 255, 255, .08);
  outline: none;
}

.overview-modal-mark {
  width: 64px;
  height: 64px;
  margin: 4px auto 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.30), transparent 28%),
    linear-gradient(135deg, #2481CC, #3390EC);
  box-shadow: 0 14px 32px rgba(51, 144, 236, .28);
}

.overview-modal-title {
  color: var(--ov-text);
  text-align: center;
  font-size: 22px;
  font-weight: 900;
}

.overview-modal-subtitle {
  color: var(--ov-muted);
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

.overview-add-account-form {
  display: grid;
  gap: 12px;
}

.overview-add-account-form label {
  display: grid;
  gap: 6px;
  color: var(--ov-muted);
  font-size: 12px;
  font-weight: 850;
}

.overview-add-account-form input {
  height: 44px;
  border: 1px solid var(--ov-border);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--ov-text);
  background: #242F3D;
  outline: none;
  font-size: 15px;
}

.overview-account-import-dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  min-height: 178px;
  padding: 22px 18px;
  border: 1px dashed rgba(51, 144, 236, .45);
  border-radius: 14px;
  color: var(--ov-muted);
  text-align: center;
  background: rgba(36, 47, 61, .58);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.overview-account-import-dropzone.is-dragging {
  border-color: rgba(51, 144, 236, .92);
  background: rgba(51, 144, 236, .16);
}

.overview-account-import-dropzone.is-loading {
  border-style: solid;
  cursor: progress;
}

.overview-account-import-input {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.overview-account-import-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(51, 144, 236, .34);
  background:
    linear-gradient(180deg, rgba(51, 144, 236, .24), rgba(51, 144, 236, .08)),
    #202b36;
}

.overview-account-import-dropzone strong {
  color: var(--ov-text);
  font-size: 14px;
  font-weight: 900;
}

.overview-account-import-dropzone span {
  max-width: 340px;
  font-size: 12px;
  line-height: 1.45;
}

.overview-account-import-result {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(46, 204, 113, .28);
  border-radius: 12px;
  color: var(--ov-muted);
  background: rgba(46, 204, 113, .08);
  font-size: 12px;
}

.overview-account-import-result strong {
  color: var(--ov-text);
  font-size: 13px;
}

.overview-password-wrap {
  position: relative;
  display: block;
}

.overview-password-wrap input {
  width: 100%;
  padding-right: 46px;
}

.overview-password-wrap button {
  position: absolute;
  right: 7px;
  top: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
}

.overview-password-wrap button::before {
  content: "••";
  color: var(--ov-muted);
  font-weight: 900;
}

.overview-modal-error {
  border: 1px solid rgba(224, 82, 100, .30);
  border-radius: 10px;
  padding: 9px 10px;
  color: #ffd6dc;
  background: rgba(224, 82, 100, .12);
  font-size: 12px;
}

.overview-modal-done {
  border: 1px solid rgba(79, 208, 139, .30);
  border-radius: 12px;
  padding: 14px;
  color: #d9ffe9;
  background: rgba(79, 208, 139, .12);
  text-align: center;
  font-weight: 900;
}

@media (min-width: 1500px) {
  .overview-account-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .overview-health-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .overview-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .overview-dashboard-layout,
  .overview-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .overview-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .overview-hero-actions {
    min-width: 0;
    justify-content: flex-start;
  }

  .overview-health-grid {
    grid-template-columns: 1fr;
  }

  .overview-account-filters {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .overview-account-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .overview-account-grid {
    grid-template-columns: 1fr;
  }

  .overview-chart-svg {
    min-width: 520px;
  }

  .overview-activity-chart {
    overflow-x: auto;
  }
}

/* Dialogs final polish: emoji-only picker, photos, native notification affordance. */
.composer-tools-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 0;
  padding: 0 12px 4px;
}

.telegram-composer {
  grid-template-columns: 40px minmax(0, 1fr) 40px 42px !important;
  align-items: end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.telegram-composer .telegram-icon-button,
.telegram-composer .telegram-send {
  min-width: 40px;
  min-height: 40px;
  align-self: end !important;
}

.telegram-composer .telegram-send {
  min-width: 42px;
}

.composer-emoji-picker {
  width: min(430px, calc(100vw - 20px)) !important;
  height: min(430px, calc(100vh - 24px));
  max-height: min(440px, calc(100vh - 24px)) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  transform-origin: bottom right;
  animation: emojiPickerEnter 150ms cubic-bezier(.22,.61,.36,1) both;
}

.composer-emoji-grid {
  grid-template-columns: repeat(9, minmax(34px, 1fr));
}

.composer-emoji-grid button {
  min-width: 36px;
  min-height: 36px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.composer-sticker-panel,
.composer-sticker-grid,
.composer-sticker-packs,
.composer-sticker-disabled,
.composer-sticker-loading {
  display: none !important;
}

.native-notification-button.is-active {
  color: #8ed1ff;
  background: rgba(51, 144, 236, .18);
  box-shadow: 0 0 0 2px rgba(51, 144, 236, .14);
}

.native-notification-button.is-denied {
  color: #e05264;
}

.all-dialogs-blank-column {
  width: 100%;
  min-height: 100%;
  background:
    radial-gradient(circle at 22px 22px, rgba(255,255,255,.018) 0 1px, transparent 1px),
    radial-gradient(circle at 58px 54px, rgba(51,144,236,.018) 0 1px, transparent 1px);
  background-size: 74px 74px;
}

.telegram-photo-card {
  max-width: min(460px, 100%);
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(15, 26, 36, .58);
}

.telegram-photo-card.is-placeholder {
  min-width: 180px;
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 18px;
}

.telegram-photo-button {
  width: 100%;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.telegram-photo-button img {
  display: block;
  width: 100%;
  max-height: min(420px, 52vh);
  aspect-ratio: var(--media-ratio, auto);
  object-fit: cover;
  background: #0f1a24;
}

.telegram-photo-caption {
  padding: 8px 10px 7px;
  color: inherit;
  font-size: 14px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.photo-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 12px;
  padding: 22px;
  background: rgba(3, 8, 14, .92);
  animation: overlayFadeIn 150ms ease both;
}

.photo-viewer-stage {
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

.photo-viewer-frame {
  max-width: min(94vw, 1180px);
  max-height: calc(100vh - 118px);
  margin: 0;
  display: grid;
  gap: 8px;
  animation: photoViewerEnter 160ms cubic-bezier(.22,.61,.36,1) both;
}

.photo-viewer-frame img {
  max-width: 100%;
  max-height: calc(100vh - 156px);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
}

.photo-viewer-frame figcaption {
  max-width: min(94vw, 760px);
  justify-self: center;
  color: #d7e3ee;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.photo-viewer-close,
.photo-viewer-download {
  position: fixed;
  border: 1px solid rgba(127,145,163,.24);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(23,33,43,.88);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.photo-viewer-close {
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.photo-viewer-download {
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

@keyframes photoViewerEnter {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
  .composer-tools-row {
    padding: 0 8px 4px;
  }

  .telegram-composer {
    grid-template-columns: 40px minmax(0, 1fr) 40px 42px !important;
    gap: 6px !important;
  }

  .telegram-composer .telegram-icon-button,
  .telegram-composer .telegram-send {
    min-width: 40px;
    min-height: 40px;
  }

  .telegram-shell.is-all-dialogs-mode #inboxAccountList {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-snap-type: none !important;
  }

  .telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  .composer-emoji-picker {
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: calc(100vw - 20px) !important;
    height: 52vh !important;
    max-height: 55vh !important;
    border-radius: 16px 16px 12px 12px;
    transform-origin: bottom center;
  }

  .composer-emoji-grid {
    grid-template-columns: repeat(7, minmax(34px, 1fr));
  }

  .telegram-photo-card {
    max-width: 100%;
  }

  .telegram-photo-button img {
    max-height: 44vh;
  }

  .photo-viewer-overlay {
    padding: 12px;
  }

  .photo-viewer-frame,
  .photo-viewer-frame img {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 116px);
  }

  .photo-viewer-close {
    top: 12px;
    right: 12px;
  }

  .photo-viewer-download {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-viewer-overlay,
  .photo-viewer-frame,
  .composer-emoji-picker {
    animation-duration: 1ms !important;
  }
}

/* Dialogs handoff-spec polish: Telegram dark layout + motion system. */
.telegram-inbox-stack,
.telegram-shell,
.telegram-shell.theme-dark,
.telegram-shell.theme-light {
  --tg-bg: #0e1621;
  --tg-bg-deep: #0b111a;
  --tg-panel: #17212b;
  --tg-panel-2: #1b2733;
  --tg-hover: #202b36;
  --tg-input: #242f3d;
  --tg-divider: #0f1a24;
  --tg-blue: #3390ec;
  --tg-blue-active: #2f6ea5;
  --tg-incoming: #182533;
  --tg-outgoing: #2b5278;
  --tg-text: #e7eef5;
  --tg-secondary: #a6b6c5;
  --tg-muted: #7f91a3;
  --tg-green: #4fd08b;
  --tg-warning: #e0a84f;
  --tg-error: #e05264;
  color: var(--tg-text);
}

.telegram-shell,
.telegram-shell.theme-light,
.telegram-shell.theme-dark {
  background: var(--tg-bg) !important;
  color: var(--tg-text) !important;
  box-shadow: none !important;
}

.telegram-shell {
  grid-template-columns: 256px 380px minmax(0, 1fr) !important;
  border: 1px solid var(--tg-divider);
  overflow: hidden;
}

.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: minmax(330px, 440px) minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: none !important;
}

.telegram-accounts,
.telegram-left,
.telegram-chat-head,
.telegram-composer,
.telegram-accountbar,
.telegram-search {
  background: var(--tg-panel) !important;
  border-color: var(--tg-divider) !important;
}

.telegram-accounts,
.telegram-left {
  border-right: 1px solid var(--tg-divider) !important;
}

.telegram-chat {
  background:
    radial-gradient(circle at 18px 18px, rgba(231,238,245,.025) 0 1px, transparent 1px),
    radial-gradient(circle at 54px 50px, rgba(51,144,236,.018) 0 1px, transparent 1px),
    var(--tg-bg) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
}

.telegram-search-input,
.telegram-textarea,
.composer-emoji-search input {
  background: var(--tg-input) !important;
  border-color: transparent !important;
  color: var(--tg-text) !important;
}

.telegram-search-input::placeholder,
.telegram-textarea::placeholder,
.composer-emoji-search input::placeholder {
  color: var(--tg-muted) !important;
}

.telegram-account,
.telegram-dialog,
.all-dialog-row {
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 26, 36, .82) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transition: background-color 140ms cubic-bezier(.2,.8,.2,1), transform 90ms cubic-bezier(.2,.8,.2,1);
}

.telegram-account {
  min-height: 60px !important;
  padding: 9px 10px !important;
}

.telegram-dialog,
.all-dialog-row {
  min-height: 74px !important;
  padding: 9px 12px !important;
}

.telegram-account:hover,
.telegram-dialog:hover,
.all-dialog-row:hover,
.telegram-account:focus-visible,
.telegram-dialog:focus-visible,
.all-dialog-row:focus-visible {
  background: var(--tg-hover) !important;
  outline: none !important;
}

.telegram-account.is-active,
.telegram-dialog.is-active,
.all-dialog-row.is-active {
  background: var(--tg-blue-active) !important;
  color: #fff !important;
}

.telegram-account.is-pinned,
.all-dialog-row.is-pinned,
.telegram-dialog.is-pinned {
  box-shadow: inset 2px 0 0 var(--tg-blue) !important;
}

.telegram-account .dialog-avatar,
.telegram-dialog .dialog-avatar,
.all-dialog-row .dialog-avatar,
.telegram-chat-avatar,
.live-inbox-avatar,
.inbox-toast-avatar {
  object-fit: cover;
  box-shadow: none !important;
  border: 0 !important;
}

.telegram-dialog .dialog-title,
.all-dialog-row .dialog-title,
.telegram-account .account-phone,
.telegram-chat-title {
  color: var(--tg-text) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

.telegram-dialog.is-active .dialog-title,
.telegram-dialog.is-active .dialog-preview,
.telegram-dialog.is-active .dialog-time,
.all-dialog-row.is-active .dialog-title,
.all-dialog-row.is-active .dialog-preview,
.all-dialog-row.is-active .dialog-time {
  color: #fff !important;
}

.dialog-preview,
.dialog-subline,
.dialog-time,
.account-tail,
.account-username,
.telegram-chat-subtitle {
  color: var(--tg-muted) !important;
}

.dialog-unread,
.live-inbox-count,
.inbox-toast-count {
  background: var(--tg-blue) !important;
  color: #fff !important;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 850;
}

.dialog-mode-menu {
  width: min(248px, calc(100vw - 24px)) !important;
  padding: 6px !important;
  border: 1px solid rgba(127,145,163,.18) !important;
  border-radius: 12px !important;
  background: var(--tg-panel-2) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
  transform-origin: top left;
  animation: tgMenuOpen 160ms cubic-bezier(.2,.8,.2,1) both;
}

.dialog-mode-menu.is-closing {
  animation: tgMenuClose 120ms ease-in both;
}

.dialog-mode-menu button {
  min-height: 42px !important;
  border-radius: 9px !important;
  color: var(--tg-text) !important;
  background: transparent !important;
  transition: background-color 140ms cubic-bezier(.2,.8,.2,1), color 140ms cubic-bezier(.2,.8,.2,1), transform 90ms cubic-bezier(.2,.8,.2,1);
}

.dialog-mode-menu button:hover,
.dialog-mode-menu button:focus-visible {
  background: var(--tg-hover) !important;
  outline: none !important;
}

.dialog-mode-menu button:active,
.telegram-icon-button:active,
.telegram-send:active,
.secondary-button:active {
  transform: scale(.96);
}

.dialog-mode-menu button.is-active {
  color: #8ed1ff !important;
  box-shadow: inset 2px 0 0 var(--tg-blue);
}

.composer-tools-row {
  min-height: 0 !important;
  padding: 0 12px 4px !important;
  justify-content: flex-end !important;
}

.telegram-composer {
  min-height: 64px !important;
  padding: 10px 12px !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px 44px !important;
  align-items: end !important;
  gap: 8px !important;
}

.telegram-textarea {
  min-height: 40px !important;
  max-height: 132px !important;
  border-radius: 20px !important;
  line-height: 1.38 !important;
}

.telegram-send {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: var(--tg-blue) !important;
  color: #fff !important;
}

.telegram-send.is-sending::after,
.message-status-spinner,
.telegram-loader-spinner {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(142,209,255,.35);
  border-top-color: #8ed1ff;
  border-radius: 999px;
  animation: tgSpin .78s linear infinite;
}

.message-bubble {
  max-width: min(520px, 64%) !important;
  border-radius: 12px !important;
  padding: 8px 10px 6px !important;
  box-shadow: none !important;
  animation: tgMessageAppear 180ms cubic-bezier(.2,.8,.2,1) both;
}

.telegram-message.incoming .message-bubble {
  background: var(--tg-incoming) !important;
  color: var(--tg-text) !important;
}

.telegram-message.outgoing .message-bubble {
  background: var(--tg-outgoing) !important;
  color: #fff !important;
}

.message-footer,
.message-meta {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.message-time {
  color: rgba(231,238,245,.68) !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.message-ticks {
  display: inline-flex !important;
  align-items: center;
  color: #8ed1ff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: -2px;
}

.message-ticks.is-sent {
  letter-spacing: 0;
  animation: tgTickIn 140ms cubic-bezier(.2,.8,.2,1) both;
}

.message-ticks.is-read {
  animation: tgTickIn 160ms cubic-bezier(.2,.8,.2,1) both;
}

.message-status-failed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-error);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  animation: tgFailedIn 150ms cubic-bezier(.34,1.56,.64,1) both;
}

.message-day {
  background: var(--tg-input) !important;
  color: var(--tg-secondary) !important;
  border-radius: 999px !important;
  min-height: 24px !important;
  padding: 5px 11px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

.message-reaction {
  background: var(--tg-panel-2) !important;
  border-color: rgba(51,144,236,.22) !important;
  animation: tgReactionPop 220ms cubic-bezier(.34,1.56,.64,1) both;
}

.message-reaction.is-chosen {
  border-color: var(--tg-blue) !important;
  background: rgba(51,144,236,.18) !important;
}

.composer-emoji-picker {
  width: 360px !important;
  height: 420px !important;
  border: 1px solid rgba(127,145,163,.18) !important;
  border-radius: 14px !important;
  background: var(--tg-panel-2) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34) !important;
  animation: tgEmojiOpen 180ms cubic-bezier(.2,.8,.2,1) both !important;
}

.composer-emoji-tabs button,
.composer-emoji-grid button {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.telegram-photo-card {
  border-radius: 12px !important;
  background: rgba(15,26,36,.48) !important;
}

.photo-viewer-overlay {
  animation: tgOverlayFade 200ms cubic-bezier(.2,.8,.2,1) both !important;
}

.photo-viewer-frame {
  animation: tgPhotoIn 200ms cubic-bezier(.2,.8,.2,1) both !important;
}

.inbox-toast-layer {
  right: 18px !important;
  left: auto !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  flex-direction: column-reverse !important;
  z-index: 52 !important;
}

.inbox-toast {
  border-color: rgba(127,145,163,.18) !important;
  background: var(--tg-panel-2) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.32), -3px 0 0 rgba(51,144,236,.9) !important;
  animation: tgToastIn 220ms cubic-bezier(.2,.8,.2,1) both;
}

.inbox-toast.is-hiding {
  animation: tgToastOut 160ms ease-in both;
}

.telegram-loader-state {
  color: var(--tg-muted) !important;
}

.telegram-loader-spinner {
  width: 30px !important;
  height: 30px !important;
  border-width: 3px !important;
  border-color: rgba(51,144,236,.22) !important;
  border-top-color: var(--tg-blue) !important;
}

.telegram-loader-state.is-inline .telegram-loader-spinner {
  width: 18px !important;
  height: 18px !important;
  border-width: 2px !important;
}

@keyframes tgMenuOpen {
  from { opacity: 0; transform: translateY(-4px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tgMenuClose {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.98); }
}

@keyframes tgEmojiOpen {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tgMessageAppear {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tgReactionPop {
  0% { opacity: 0; transform: scale(.6); }
  72% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes tgTickIn {
  from { opacity: 0; transform: translateX(-2px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tgFailedIn {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tgSpin {
  to { transform: rotate(360deg); }
}

@keyframes tgOverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tgPhotoIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tgToastIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tgToastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(18px); }
}

@media (max-width: 1280px) and (min-width: 721px) {
  .telegram-shell {
    grid-template-columns: 224px 336px minmax(0, 1fr) !important;
  }

  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: minmax(300px, 386px) minmax(0, 1fr) !important;
  }

  .telegram-dialog,
  .all-dialog-row {
    min-height: 68px !important;
  }
}

@media (max-width: 720px) {
  .telegram-shell,
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell.is-all-dialogs-mode .telegram-left {
    display: none !important;
  }

  .dialog-mode-menu {
    left: 12px !important;
    width: calc(100vw - 24px) !important;
  }

  .telegram-dialog,
  .all-dialog-row {
    min-height: 72px !important;
  }

  .message-bubble {
    max-width: 90% !important;
  }

  .composer-emoji-picker {
    left: 0 !important;
    right: 0 !important;
    bottom: max(0px, env(safe-area-inset-bottom)) !important;
    width: 100vw !important;
    height: 60vh !important;
    max-height: 60vh !important;
    border-radius: 18px 18px 0 0 !important;
    animation: tgEmojiSheetOpen 180ms cubic-bezier(.2,.8,.2,1) both !important;
  }

  .composer-emoji-picker::before {
    content: "";
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(127,145,163,.45);
    justify-self: center;
    margin-top: 8px;
  }

  .inbox-toast-layer {
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  .telegram-inbox-stack.is-chat-open .inbox-toast-layer {
    bottom: max(86px, calc(env(safe-area-inset-bottom) + 86px)) !important;
  }

  @keyframes tgEmojiSheetOpen {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-mode-menu,
  .composer-emoji-picker,
  .message-bubble,
  .message-reaction,
  .message-ticks,
  .message-status-failed,
  .photo-viewer-overlay,
  .photo-viewer-frame,
  .inbox-toast {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Urgent Dialogs follow-up: clean composer, real photo bubbles, outline emoji, header menu. */
.composer-tools-row {
  display: none !important;
}

.composer-emoji-button {
  position: relative;
  display: grid !important;
  place-items: center !important;
  border: 1px solid transparent !important;
  color: #8fa1b2 !important;
  background: transparent !important;
}

.emoji-face-icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  border: 0 !important;
}

.emoji-face-icon::before {
  content: none !important;
}

.emoji-face-icon::after {
  content: none !important;
}

.emoji-face-icon .emoji-eye {
  fill: currentColor;
  stroke: none;
}

.emoji-face-icon .emoji-smile {
  fill: none;
  stroke-width: 1.9;
}

.composer-emoji-button:hover,
.composer-emoji-button:focus-visible,
.composer-emoji-button.is-open {
  color: #8ed1ff !important;
  background: rgba(51,144,236,.12) !important;
  border-color: rgba(51,144,236,.22) !important;
}

.telegram-message.has-photo-media .message-bubble {
  position: relative;
  width: fit-content !important;
  max-width: min(420px, 78vw) !important;
  padding: 3px !important;
  overflow: hidden;
  background: rgba(24,37,51,.92) !important;
}

.telegram-message.has-photo-media.outgoing .message-bubble {
  background: rgba(43,82,120,.94) !important;
}

.telegram-message.has-photo-media .telegram-photo-card {
  width: min(420px, 78vw) !important;
  max-width: 100% !important;
  min-width: min(320px, 70vw);
  margin: 0 !important;
  border-radius: 12px !important;
  background: #0f1a24 !important;
}

.telegram-message.has-photo-media .telegram-photo-button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--media-ratio, 4 / 5);
  max-height: min(520px, 62vh);
  overflow: hidden;
  border-radius: 11px;
  background: #0f1a24;
}

.telegram-message.has-photo-media .telegram-photo-button img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  min-height: 190px;
  max-height: min(520px, 62vh) !important;
  aspect-ratio: var(--media-ratio, 4 / 5);
  object-fit: cover !important;
  border-radius: 11px;
}

.telegram-photo-progressive-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 11px;
  background-position: center;
  background-size: cover;
  filter: blur(12px);
  opacity: .42;
  transform: scale(1.03);
}

.telegram-photo-card.is-full-loaded .telegram-photo-progressive-thumb {
  opacity: 0;
}

.telegram-photo-card.is-thumb-fallback .telegram-photo-button img {
  object-fit: contain !important;
  image-rendering: auto;
}

.telegram-photo-card.is-thumbnail-only .telegram-photo-button img {
  object-fit: contain !important;
}

.telegram-message.is-photo-only .message-footer {
  position: absolute;
  right: 9px;
  bottom: 8px;
  z-index: 2;
  min-height: 20px;
  padding: 4px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(3,8,14,.72), rgba(3,8,14,.42));
  color: #fff !important;
  backdrop-filter: blur(2px);
}

.telegram-message.has-photo-caption .message-footer,
.telegram-message.has-photo-media:not(.is-photo-only) .message-footer {
  padding: 4px 8px 6px;
}

.telegram-message.has-photo-media .message-text {
  padding: 7px 8px 0;
}

.telegram-photo-caption {
  padding: 8px 9px 2px !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1.38 !important;
}

.telegram-photo-card.is-placeholder,
.telegram-photo-card.is-thumb-error .telegram-photo-fallback {
  width: min(420px, 78vw);
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--tg-muted);
  background:
    radial-gradient(circle at 50% 34%, rgba(51,144,236,.16), transparent 36%),
    #13202c !important;
}

.dialog-pagination.is-autoload {
  min-height: 8px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.telegram-photo-fallback {
  min-height: 220px;
  font-size: 13px;
  font-weight: 800;
}

.photo-viewer-frame img {
  max-width: calc(100vw - 160px) !important;
  max-height: calc(100vh - 130px) !important;
}

.photo-viewer-download {
  z-index: 2;
  right: 24px !important;
  bottom: max(24px, env(safe-area-inset-bottom)) !important;
  background: rgba(23,33,43,.94) !important;
}

.chat-header-menu {
  position: fixed;
  z-index: 86;
  width: 248px;
  padding: 6px;
  border: 1px solid rgba(127,145,163,.18);
  border-radius: 12px;
  background: var(--tg-panel-2, #1b2733);
  box-shadow: 0 14px 36px rgba(0,0,0,.34);
  animation: tgMenuOpen 150ms cubic-bezier(.2,.8,.2,1) both;
}

.chat-header-menu button {
  width: 100%;
  min-height: 42px;
  display: grid;
  gap: 2px;
  justify-items: start;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  color: #ffb8c2;
  background: transparent;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.chat-header-menu button:hover,
.chat-header-menu button:focus-visible {
  background: rgba(224,82,100,.12);
  outline: none;
}

.chat-header-menu button:disabled {
  color: var(--tg-muted, #7f91a3);
  cursor: not-allowed;
}

.chat-header-menu button small {
  color: var(--tg-muted, #7f91a3);
  font-size: 11px;
  font-weight: 650;
}

.all-dialog-pin-indicator {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: #8ed1ff;
  opacity: .9;
  pointer-events: none;
}

@media (max-width: 720px) {
  .telegram-message.has-photo-media .message-bubble {
    max-width: 84vw !important;
  }

  .telegram-message.has-photo-media .telegram-photo-card {
    width: 78vw !important;
    min-width: 72vw;
  }

  .telegram-message.has-photo-media .telegram-photo-button img {
    min-height: 170px;
    max-height: 54vh !important;
  }

  .photo-viewer-frame img {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 118px) !important;
  }

  .chat-header-menu {
    width: min(248px, calc(100vw - 20px));
  }
}

/* Dialogs v7 motion system: Telegram-like, action-driven micro-interactions. */
:root {
  --motion-instant: 80ms;
  --motion-micro: 100ms;
  --motion-small: 140ms;
  --motion-medium: 190ms;
  --motion-large: 260ms;
  --motion-viewer: 320ms;
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-pop: cubic-bezier(.2,.9,.25,1.12);
  --ease-collapse: cubic-bezier(.4,0,.2,1);
  --ease-out-soft: cubic-bezier(.16,1,.3,1);
}

.telegram-inbox-stack,
.telegram-shell {
  transition:
    background-color var(--motion-medium) var(--ease-standard),
    border-color var(--motion-medium) var(--ease-standard),
    color var(--motion-small) var(--ease-standard);
}

.dialog-mode-menu,
.all-dialog-context-menu,
.chat-header-menu {
  transform-origin: top left;
  will-change: opacity, transform;
}

.dialog-mode-menu.is-opening,
.all-dialog-context-menu.is-opening,
.chat-header-menu.is-opening {
  animation: motionMenuOpen var(--motion-small) var(--ease-standard) both !important;
}

.dialog-mode-menu.is-closing,
.all-dialog-context-menu.is-closing,
.chat-header-menu.is-closing {
  animation: motionMenuClose var(--motion-micro) var(--ease-standard) both !important;
  pointer-events: none;
}

.dialog-mode-menu button,
.all-dialog-context-menu button,
.chat-header-menu button {
  transition:
    background-color var(--motion-micro) var(--ease-standard),
    color var(--motion-micro) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard),
    opacity var(--motion-micro) var(--ease-standard);
}

.dialog-mode-menu button.is-pressing,
.all-dialog-context-menu button.is-pressing,
.chat-header-menu button.is-pressing,
.telegram-icon-button.is-pressing,
.chat-action-button.is-pressing,
.telegram-send.is-pressing,
.message-reply-button.is-pressing,
.message-reaction-trigger.is-pressing,
.message-menu-trigger.is-pressing,
.message-mobile-menu.is-pressing,
.inbox-toast.is-pressing {
  transform: scale(.94) !important;
}

.dialog-mode-menu button.is-active b {
  animation: motionCheckPop var(--motion-small) var(--ease-pop) both;
}

.motion-mode-switch .telegram-accounts,
.motion-mode-switch .telegram-dialogs {
  animation: motionColumnSwitch var(--motion-large) var(--ease-out-soft) both;
}

.motion-column-enter {
  animation: motionColumnEnter var(--motion-medium) var(--ease-standard) both;
}

.motion-mobile-chat-enter .telegram-messages,
.motion-mobile-chat-enter .telegram-shell,
.motion-mobile-chat-enter .telegram-dialogs {
  animation: motionMobileChatEnter 220ms var(--ease-out-soft) both;
}

.motion-mobile-list-enter .telegram-accounts,
.motion-mobile-list-enter .telegram-dialogs {
  animation: motionMobileListEnter var(--motion-medium) var(--ease-out-soft) both;
}

.telegram-account,
.telegram-dialog,
.all-dialog-row {
  transition:
    background-color var(--motion-small) var(--ease-standard),
    color var(--motion-micro) var(--ease-standard),
    border-color var(--motion-small) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard),
    opacity var(--motion-small) var(--ease-standard);
}

.telegram-account.is-pressing,
.telegram-dialog.is-pressing,
.all-dialog-row.is-pressing {
  transform: scale(.995);
}

.telegram-account.motion-row-enter,
.telegram-dialog.motion-row-enter,
.all-dialog-row.motion-row-enter {
  animation: motionRowEnter var(--motion-medium) var(--ease-standard) both;
  animation-delay: calc(var(--motion-index, 0) * 12ms);
}

.telegram-account.is-active::before,
.telegram-dialog.is-active::before,
.all-dialog-row.is-active::before {
  animation: motionAccentGrow 170ms var(--ease-standard) both;
}

.account-pin-button,
.all-dialog-pin-indicator,
.dialog-pinned {
  transition: opacity var(--motion-micro) var(--ease-standard), transform var(--motion-small) var(--ease-standard);
}

.motion-pin-pop .account-pin-button,
.motion-pin-pop .all-dialog-pin-indicator,
.motion-pin-pop .dialog-pinned,
.telegram-account.motion-pin-pop,
.all-dialog-row.motion-pin-pop {
  animation: motionPinPop var(--motion-medium) var(--ease-pop) both;
}

.account-presence,
.account-avatar::after {
  transition:
    background-color var(--motion-small) var(--ease-standard),
    border-color var(--motion-small) var(--ease-standard),
    opacity var(--motion-small) var(--ease-standard),
    box-shadow var(--motion-large) var(--ease-standard);
}

.telegram-account.is-connection-online .account-avatar::after,
.telegram-account.is-connection-listener .account-avatar::after {
  animation: motionStatusPulse 700ms var(--ease-out-soft) 1;
}

.unread-badge,
.live-inbox-count {
  transition:
    opacity var(--motion-small) var(--ease-standard),
    transform var(--motion-small) var(--ease-pop),
    background-color var(--motion-small) var(--ease-standard);
}

.unread-badge.motion-badge-pop,
.live-inbox-count.motion-badge-pop {
  animation: motionBadgePop 170ms var(--ease-pop) both;
}

.telegram-dialog.is-activity-pulse,
.all-dialog-row.is-activity-pulse {
  animation: motionUnreadFlash 900ms var(--ease-standard) both !important;
}

.motion-chat-header-enter {
  animation: motionChatHeaderEnter var(--motion-small) var(--ease-standard) both;
}

.motion-chat-list-enter {
  animation: motionChatListEnter var(--motion-small) var(--ease-standard) both;
}

.telegram-message.motion-message-enter {
  animation: motionMessageEnter 170ms var(--ease-standard) both;
  animation-delay: calc(var(--motion-index, 0) * 12ms);
}

.telegram-message.motion-message-enter .message-bubble {
  animation: none !important;
}

.message-bubble,
.message-footer,
.message-status-spinner,
.message-ticks,
.message-status-failed {
  transition:
    opacity var(--motion-small) var(--ease-standard),
    color var(--motion-small) var(--ease-standard),
    transform var(--motion-small) var(--ease-pop);
}

.telegram-message.is-status-pending .message-bubble {
  opacity: .74;
}

.telegram-message.is-status-failed .message-bubble {
  animation: motionTinyShake 190ms var(--ease-standard) both;
}

.message-status-spinner {
  animation: motionSpinner 700ms linear infinite !important;
}

.message-ticks.is-sent,
.message-ticks.is-read {
  animation: motionTickIn var(--motion-small) var(--ease-pop) both !important;
}

.message-ticks.is-read::after {
  animation: motionSecondTick 150ms var(--ease-pop) 60ms both;
}

.message-status-failed {
  animation: motionFailedIn var(--motion-small) var(--ease-pop) both !important;
}

.message-reaction {
  transition:
    transform var(--motion-micro) var(--ease-standard),
    background-color var(--motion-small) var(--ease-standard),
    border-color var(--motion-small) var(--ease-standard),
    opacity var(--motion-small) var(--ease-standard);
}

.message-reaction.motion-reaction-pop,
.message-reaction:not(.is-pending):not(.is-error) {
  animation: motionReactionPop 220ms var(--ease-pop) both;
}

.message-reaction.is-pending {
  opacity: .62;
}

.message-reaction.is-pending::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: .55;
  animation: motionPendingDot 850ms ease-in-out infinite;
}

.message-reaction.is-error,
.motion-reaction-error .message-reaction,
.telegram-message.motion-reaction-error .message-bubble {
  animation: motionTinyShake 180ms var(--ease-standard) both;
}

.reaction-picker,
.message-action-menu {
  transform-origin: var(--overlay-origin, center);
  transition: opacity var(--motion-small) var(--ease-standard), transform var(--motion-small) var(--ease-standard);
}

.reaction-picker.motion-picker-enter,
.message-action-menu.motion-picker-enter,
.telegram-message.is-picker-open .reaction-picker,
.telegram-message.is-action-menu-open .message-action-menu,
.reaction-picker.is-portaled.is-open,
.message-action-menu.is-portaled.is-open {
  animation: motionPickerOpen var(--motion-small) var(--ease-standard) both;
}

.reaction-picker button {
  transition: background-color var(--motion-micro) var(--ease-standard), transform var(--motion-micro) var(--ease-pop);
}

.reaction-picker button:hover,
.reaction-picker button:focus-visible {
  transform: scale(1.16);
}

.telegram-message.is-delete-fading {
  animation: motionDeleteFade var(--motion-small) var(--ease-collapse) both;
}

.telegram-message.is-removing,
.all-dialog-row.is-removing {
  overflow: hidden;
  animation: motionDeleteCollapse 240ms var(--ease-collapse) both;
}

.panel-confirm-overlay {
  animation: motionBackdropIn var(--motion-small) var(--ease-standard) both;
}

.panel-confirm-overlay.is-closing {
  animation: motionBackdropOut var(--motion-micro) var(--ease-standard) both;
}

.panel-confirm-card {
  animation: motionModalIn 170ms var(--ease-standard) both;
}

.panel-confirm-overlay.is-closing .panel-confirm-card {
  animation: motionModalOut var(--motion-micro) var(--ease-standard) both;
}

.composer-emoji-picker.is-opening,
.composer-emoji-picker.is-open {
  animation: motionEmojiOpen 150ms var(--ease-standard) both !important;
}

.composer-emoji-picker.is-closing {
  animation: motionEmojiClose var(--motion-micro) var(--ease-standard) both !important;
}

.composer-emoji-grid.motion-emoji-grid-enter {
  animation: motionEmojiGridEnter var(--motion-small) var(--ease-standard) both;
}

.composer-emoji-grid button:hover,
.composer-emoji-grid button:focus-visible {
  transform: scale(1.15);
}

.composer-emoji-grid button:active {
  transform: scale(.96);
}

.telegram-composer,
.composer-row,
.telegram-textarea,
.composer-notice {
  transition:
    opacity var(--motion-small) var(--ease-standard),
    transform var(--motion-small) var(--ease-standard),
    border-color var(--motion-small) var(--ease-standard),
    background-color var(--motion-small) var(--ease-standard),
    height 120ms var(--ease-standard);
}

.composer-notice:not(.is-hidden) {
  animation: motionNoticeIn var(--motion-small) var(--ease-standard) both;
}

#replyForm.motion-composer-error .telegram-textarea,
#replyForm.motion-composer-error #replyText {
  animation: motionComposerError 700ms var(--ease-standard) both;
}

.telegram-send.is-sending {
  animation: motionSendPending 900ms ease-in-out infinite;
}

.telegram-send.is-sending::after,
.telegram-loader-spinner,
.small-spinner {
  animation: motionSpinner 700ms linear infinite !important;
}

.telegram-photo-card {
  transition: opacity var(--motion-small) var(--ease-standard), background-color var(--motion-small) var(--ease-standard);
}

.telegram-photo-card.is-loading-full .telegram-photo-progressive-thumb {
  animation: motionPhotoThumbIn var(--motion-medium) var(--ease-standard) both;
}

.telegram-photo-card.is-full-loaded .telegram-photo-image {
  animation: motionPhotoFullIn var(--motion-medium) var(--ease-standard) both;
}

.photo-viewer-overlay.is-opening,
.photo-viewer-overlay.is-open {
  animation: motionPhotoBackdropIn 180ms var(--ease-standard) both !important;
}

.photo-viewer-overlay.is-closing {
  animation: motionPhotoBackdropOut var(--motion-small) var(--ease-standard) both !important;
  pointer-events: none;
}

.photo-viewer-overlay.is-opening .photo-viewer-frame,
.photo-viewer-overlay.is-open .photo-viewer-frame {
  animation: motionPhotoViewerIn var(--motion-medium) var(--ease-out-soft) both !important;
}

.photo-viewer-overlay.is-closing .photo-viewer-frame {
  animation: motionPhotoViewerOut var(--motion-small) var(--ease-standard) both !important;
}

.photo-viewer-download {
  animation: motionDownloadIn var(--motion-small) var(--ease-standard) 80ms both;
}

.inbox-toast {
  transition:
    opacity var(--motion-small) var(--ease-standard),
    transform var(--motion-small) var(--ease-standard),
    height var(--motion-medium) var(--ease-collapse),
    background-color var(--motion-small) var(--ease-standard);
}

.inbox-toast:not(.is-hiding) {
  animation: motionToastIn 180ms var(--ease-standard) both !important;
}

.inbox-toast.is-hiding {
  animation: motionToastOut 160ms var(--ease-standard) both !important;
}

.inbox-toast.is-updated .inbox-toast-unread,
.inbox-toast.is-updated .inbox-toast-count {
  animation: motionBadgePop 190ms var(--ease-pop) both !important;
}

@keyframes motionMenuOpen {
  from { opacity: 0; transform: translateY(-4px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motionMenuClose {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-3px) scale(.98); }
}

@keyframes motionCheckPop {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes motionColumnSwitch {
  0% { opacity: 1; transform: translateY(0); }
  42% { opacity: .55; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes motionColumnEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionMobileChatEnter {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes motionMobileListEnter {
  from { opacity: .82; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes motionRowEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionAccentGrow {
  from { opacity: 0; transform: scaleY(.2); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes motionPinPop {
  0% { opacity: 0; transform: scale(.72); }
  72% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes motionStatusPulse {
  0% { box-shadow: 0 0 0 0 rgba(79,208,139,.42); }
  100% { box-shadow: 0 0 0 6px rgba(79,208,139,0); }
}

@keyframes motionBadgePop {
  0% { opacity: 0; transform: scale(.78); }
  76% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes motionUnreadFlash {
  0%, 100% { background-color: transparent; }
  18%, 72% { background-color: rgba(51,144,236,.14); }
}

@keyframes motionChatHeaderEnter {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionChatListEnter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionMessageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionTickIn {
  from { opacity: 0; transform: translateX(-2px) scale(.86); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes motionSecondTick {
  from { opacity: 0; transform: translateX(-2px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes motionFailedIn {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes motionTinyShake {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-2px); }
  58% { transform: translateX(2px); }
}

@keyframes motionReactionPop {
  0% { opacity: 0; transform: scale(.72); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes motionPendingDot {
  0%, 100% { opacity: .25; transform: scale(.84); }
  50% { opacity: .8; transform: scale(1); }
}

@keyframes motionPickerOpen {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motionDeleteFade {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-4px) scale(.985); }
}

@keyframes motionDeleteCollapse {
  from { opacity: .2; transform: translateY(-4px) scale(.985); }
  to { opacity: 0; transform: translateY(-4px) scale(.985); }
}

@keyframes motionBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motionBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes motionModalIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motionModalOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(.98); }
}

@keyframes motionEmojiOpen {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motionEmojiClose {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(.98); }
}

@keyframes motionEmojiGridEnter {
  from { opacity: .65; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes motionNoticeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionComposerError {
  0%, 100% { box-shadow: none; border-color: transparent; }
  14%, 72% { box-shadow: 0 0 0 3px rgba(224,82,100,.15); border-color: rgba(224,82,100,.55); }
}

@keyframes motionSendPending {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.96); }
}

@keyframes motionSpinner {
  to { transform: rotate(360deg); }
}

@keyframes motionPhotoThumbIn {
  from { opacity: 0; }
  to { opacity: .42; }
}

@keyframes motionPhotoFullIn {
  from { opacity: .82; transform: scale(1.012); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes motionPhotoBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motionPhotoBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes motionPhotoViewerIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes motionPhotoViewerOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.97); }
}

@keyframes motionDownloadIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionToastIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motionToastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(.98); }
}

@media (max-width: 720px) {
  .composer-emoji-picker.is-opening,
  .composer-emoji-picker.is-open {
    animation: motionEmojiSheetIn 240ms var(--ease-out-soft) both !important;
  }

  .composer-emoji-picker.is-closing {
    animation: motionEmojiSheetOut var(--motion-medium) var(--ease-standard) both !important;
  }

  .photo-viewer-download {
    animation: motionMobileBarIn var(--motion-small) var(--ease-standard) 80ms both;
  }
}

@keyframes motionEmojiSheetIn {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionEmojiSheetOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(100%); }
}

@keyframes motionMobileBarIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-mode-menu,
  .all-dialog-context-menu,
  .chat-header-menu,
  .composer-emoji-picker,
  .telegram-account,
  .telegram-dialog,
  .all-dialog-row,
  .telegram-message,
  .message-bubble,
  .message-reaction,
  .reaction-picker,
  .message-action-menu,
  .panel-confirm-overlay,
  .panel-confirm-card,
  .photo-viewer-overlay,
  .photo-viewer-frame,
  .inbox-toast,
  .composer-notice,
  .telegram-textarea {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transform: none !important;
  }

  .telegram-loader-spinner,
  .small-spinner,
  .message-status-spinner,
  .telegram-send.is-sending::after {
    animation: motionSpinner 900ms linear infinite !important;
  }
}

/* Final Telegram-like photo viewer and bubble polish. */
.photo-viewer-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 980 !important;
  display: grid !important;
  place-items: center !important;
  padding: 44px 48px 34px !important;
  background: rgba(0, 0, 0, .78) !important;
}

.photo-viewer-shell {
  width: min(72vw, 1380px);
  height: min(84vh, 900px);
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 92px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  background: #0e1621;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
}

.photo-viewer-overlay.is-opening .photo-viewer-shell,
.photo-viewer-overlay.is-open .photo-viewer-shell {
  animation: motionPhotoViewerIn var(--motion-viewer) var(--ease-out-soft) both !important;
}

.photo-viewer-overlay.is-closing .photo-viewer-shell {
  animation: motionPhotoViewerOut var(--motion-small) var(--ease-standard) both !important;
}

.photo-viewer-stage {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  display: grid !important;
  place-items: center !important;
  overflow: auto !important;
  padding: 24px !important;
  background: #0e1621 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 145, 163, .55) transparent;
}

.photo-viewer-stage::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.photo-viewer-stage::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(127, 145, 163, .48);
}

.photo-viewer-stage::-webkit-scrollbar-track {
  background: transparent;
}

.photo-viewer-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.photo-viewer-overlay.is-opening .photo-viewer-frame,
.photo-viewer-overlay.is-open .photo-viewer-frame,
.photo-viewer-overlay.is-closing .photo-viewer-frame {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.photo-viewer-frame img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  image-rendering: auto !important;
}

.photo-viewer-frame figcaption {
  max-width: min(720px, 90%);
  margin-top: 12px;
  color: #c8d3dc;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.photo-viewer-controls {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  background: #111b26;
}

.photo-viewer-close {
  position: fixed !important;
  top: clamp(22px, 5vh, 58px) !important;
  right: clamp(22px, 4vw, 64px) !important;
  z-index: 982 !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 50% !important;
  background: rgba(23, 33, 43, .92) !important;
  color: #e7eef5 !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .36) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  transition: background-color var(--motion-small) var(--ease-standard), transform var(--motion-micro) var(--ease-standard), color var(--motion-micro) var(--ease-standard) !important;
}

.photo-viewer-close:hover,
.photo-viewer-close:focus-visible {
  background: rgba(32, 43, 54, .98) !important;
  color: #8ed1ff !important;
  outline: none !important;
}

.photo-viewer-download {
  position: static !important;
  z-index: 1 !important;
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(127, 145, 163, .28) !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  background: #1c2733 !important;
  color: #e7eef5 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background-color var(--motion-small) var(--ease-standard), border-color var(--motion-small) var(--ease-standard), transform var(--motion-micro) var(--ease-standard) !important;
}

.photo-viewer-download:hover,
.photo-viewer-download:focus-visible {
  border-color: rgba(51, 144, 236, .5) !important;
  background: #202b36 !important;
  color: #fff !important;
  outline: none !important;
}

.message-bubble {
  max-width: min(520px, 62%) !important;
  border-radius: 12px !important;
  padding: 7px 9px 5px !important;
  background: #182533 !important;
  box-shadow: none !important;
}

.telegram-message.incoming .message-bubble {
  background: #182533 !important;
}

.telegram-message.outgoing .message-bubble {
  background: #2b5278 !important;
}

.message-text {
  color: #e7eef5;
  font-size: 14px;
  line-height: 1.38;
  letter-spacing: 0;
}

.message-footer {
  min-height: 14px;
  margin-top: 3px;
  gap: 5px;
  line-height: 1;
}

.message-time {
  color: rgba(231, 238, 245, .62) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

.message-ticks {
  color: #8ed1ff !important;
  font-size: 12px !important;
  letter-spacing: -1.5px;
  line-height: 1;
}

.message-reactions {
  gap: 4px !important;
  margin-top: 3px !important;
}

.message-reaction {
  min-height: 20px !important;
  height: 20px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  background: rgba(127, 145, 163, .18) !important;
  border-color: rgba(127, 145, 163, .18) !important;
}

.message-reaction.is-chosen {
  background: rgba(51, 144, 236, .22) !important;
  border-color: rgba(142, 209, 255, .55) !important;
}

.telegram-message.has-photo-media .message-bubble {
  max-width: min(420px, 78vw) !important;
  padding: 3px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #182533 !important;
}

.telegram-message.has-photo-media.outgoing .message-bubble {
  background: #2b5278 !important;
}

.telegram-message.has-photo-media .telegram-photo-card {
  width: min(420px, 78vw) !important;
  min-width: min(320px, 70vw) !important;
  border-radius: 13px !important;
  background: #0f1a24 !important;
}

.telegram-message.has-photo-media .telegram-photo-button {
  border-radius: 12px !important;
  background: #0f1a24 !important;
}

.telegram-message.has-photo-media .telegram-photo-button img {
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #0f1a24 !important;
  image-rendering: auto !important;
}

.telegram-message.is-photo-only .message-footer {
  right: 8px !important;
  bottom: 8px !important;
  padding: 4px 7px !important;
  background: rgba(3, 8, 14, .58) !important;
  backdrop-filter: none !important;
}

.telegram-photo-caption {
  padding: 8px 9px 3px !important;
}

.chat-header-menu [data-block-action="unblock"],
.all-dialog-context-menu [data-block-action="unblock"] {
  color: #8ed1ff !important;
}

.chat-header-menu [data-block-action="unblock"]:hover,
.chat-header-menu [data-block-action="unblock"]:focus-visible,
.all-dialog-context-menu [data-block-action="unblock"]:hover,
.all-dialog-context-menu [data-block-action="unblock"]:focus-visible {
  background: rgba(51, 144, 236, .12) !important;
}

.all-dialog-context-menu button small {
  color: var(--tg-muted, #7f91a3);
  font-size: 11px;
  font-weight: 650;
}

@media (min-width: 1600px) {
  .telegram-chat {
    background: #0e1621 !important;
  }

  .telegram-message-list {
    padding-inline: max(26px, 4vw) !important;
  }
}

@media (max-width: 720px) {
  .photo-viewer-overlay {
    padding: 10px !important;
  }

  .photo-viewer-shell {
    width: 100% !important;
    height: calc(100vh - 24px) !important;
    max-width: none;
    max-height: none;
    border-radius: 11px;
  }

  .photo-viewer-stage {
    padding: 10px !important;
  }

  .photo-viewer-close {
    top: 18px !important;
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .photo-viewer-controls {
    justify-content: center;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .photo-viewer-download {
    width: min(240px, 70vw);
  }

  .message-bubble {
    max-width: 88vw !important;
  }

  .telegram-message.has-photo-media .message-bubble,
  .telegram-message.has-photo-media .telegram-photo-card {
    max-width: 84vw !important;
    width: 80vw !important;
    min-width: 72vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-viewer-overlay,
  .photo-viewer-shell,
  .photo-viewer-frame,
  .photo-viewer-download,
  .message-bubble,
  .message-reaction {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    transform: none !important;
  }
}

/* Telegram reference chat-area polish: compact dark conversation, small reactions, native-feeling composer. */
.telegram-chat {
  background: #0d1622 !important;
  color: #dce7f0 !important;
  border-color: #0f1a24 !important;
}

.telegram-chat::before {
  opacity: .035 !important;
}

.telegram-chat-head {
  background: #111b26 !important;
  border-bottom: 1px solid rgba(15, 26, 36, .92) !important;
  box-shadow: none !important;
}

.telegram-messages {
  position: relative;
  flex: 1 1 auto;
  padding: 10px 18px 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(51, 144, 236, .025), transparent 28%),
    #0d1622 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 145, 163, .52) transparent;
}

.telegram-messages::-webkit-scrollbar {
  width: 6px;
}

.telegram-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(127, 145, 163, .46);
}

.telegram-messages::-webkit-scrollbar-track {
  background: transparent;
}

.telegram-message {
  width: 100%;
  margin: 2px 0 !important;
}

.telegram-message.has-direction-gap {
  margin-top: 9px !important;
}

.telegram-message.incoming {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 7px;
  align-items: end;
  justify-content: start !important;
}

.telegram-message.outgoing {
  display: flex !important;
  justify-content: flex-end !important;
}

.message-author-avatar {
  width: 28px;
  height: 28px;
  align-self: end;
  margin-bottom: 1px;
  opacity: 1;
}

.message-author-avatar.is-hidden {
  visibility: hidden;
}

.message-inline-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

.message-stack {
  width: fit-content !important;
  max-width: min(460px, 58vw) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.telegram-message.outgoing .message-stack {
  align-items: flex-end !important;
  max-width: min(460px, 58vw) !important;
}

.message-bubble {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 11px !important;
  padding: 6px 8px 4px !important;
  background: #182533 !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12) !important;
}

.telegram-message.incoming .message-bubble {
  background: #182533 !important;
  color: #e7eef5 !important;
}

.telegram-message.outgoing .message-bubble {
  background: #2b5278 !important;
  color: #f3f8fc !important;
}

.telegram-message.incoming.is-group-first .message-bubble {
  border-bottom-left-radius: 5px !important;
}

.telegram-message.incoming.is-group-middle .message-bubble {
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}

.telegram-message.incoming.is-group-last .message-bubble {
  border-top-left-radius: 5px !important;
}

.telegram-message.outgoing.is-group-first .message-bubble {
  border-bottom-right-radius: 5px !important;
}

.telegram-message.outgoing.is-group-middle .message-bubble {
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.telegram-message.outgoing.is-group-last .message-bubble {
  border-top-right-radius: 5px !important;
}

.message-text {
  max-width: 100%;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.32 !important;
  font-weight: 500 !important;
  overflow-wrap: anywhere;
}

.message-footer {
  min-height: 12px !important;
  margin-top: 2px !important;
  gap: 4px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  line-height: 1 !important;
}

.message-time {
  color: rgba(216, 229, 239, .55) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

.telegram-message.outgoing .message-time {
  color: rgba(213, 235, 252, .62) !important;
}

.message-ticks {
  display: inline-flex !important;
  align-items: center;
  color: #86c9ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
  transform: translateY(.5px);
}

.message-status-failed {
  color: #e05264 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.message-day {
  width: fit-content !important;
  min-height: 20px !important;
  margin: 9px auto !important;
  padding: 4px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(40, 55, 70, .78) !important;
  color: rgba(231, 238, 245, .82) !important;
  box-shadow: none !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.message-reactions {
  min-height: 0 !important;
  display: flex !important;
  gap: 3px !important;
  margin-top: -2px !important;
  padding: 0 4px !important;
  transform: translateY(1px);
  z-index: 1;
}

.telegram-message.outgoing .message-reactions {
  justify-content: flex-end !important;
}

.message-reactions.is-empty {
  display: none !important;
}

.message-reaction {
  min-height: 17px !important;
  height: 17px !important;
  padding: 1px 5px !important;
  border: 1px solid rgba(74, 109, 138, .48) !important;
  border-radius: 999px !important;
  background: rgba(24, 37, 51, .92) !important;
  color: #eaf4fb !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.message-reaction .reaction-count,
.message-reaction-count {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: rgba(231, 238, 245, .78) !important;
}

.message-reaction.is-chosen,
.message-reaction.is-mine {
  border-color: rgba(142, 209, 255, .7) !important;
  background: rgba(42, 93, 138, .96) !important;
}

.reaction-picker,
.message-action-menu {
  border-radius: 12px !important;
  background: #1b2733 !important;
  border-color: rgba(127, 145, 163, .22) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .36) !important;
}

.telegram-message.has-photo-media .message-bubble {
  max-width: min(420px, 76vw) !important;
  padding: 2px !important;
  border-radius: 13px !important;
  background: #182533 !important;
}

.telegram-message.has-photo-media.outgoing .message-bubble {
  background: #2b5278 !important;
}

.telegram-message.has-photo-media .telegram-photo-card {
  width: min(410px, 76vw) !important;
  min-width: min(300px, 70vw) !important;
  border-radius: 12px !important;
  background: #101b27 !important;
}

.telegram-message.has-photo-media .telegram-photo-button,
.telegram-message.has-photo-media .telegram-photo-button img {
  border-radius: 11px !important;
}

.telegram-message.is-photo-only .message-footer {
  right: 7px !important;
  bottom: 7px !important;
  min-height: 18px !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: rgba(6, 12, 20, .58) !important;
  color: #fff !important;
}

.telegram-composer {
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 36px 40px !important;
  align-items: end !important;
  gap: 5px !important;
  padding: 6px 10px 8px !important;
  border-top: 1px solid rgba(15, 26, 36, .95) !important;
  background: #14202b !important;
  box-shadow: none !important;
}

.telegram-composer .telegram-icon-button,
.composer-emoji-button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 0 !important;
  background: transparent !important;
  color: #6f8293 !important;
}

.composer-emoji-button {
  width: 36px !important;
  height: 36px !important;
  align-self: end !important;
}

.composer-emoji-button:hover,
.composer-emoji-button:focus-visible,
.composer-emoji-button.is-open,
.telegram-composer .telegram-icon-button:hover,
.telegram-composer .telegram-icon-button:focus-visible {
  color: #8ed1ff !important;
  background: rgba(51, 144, 236, .08) !important;
}

.emoji-face-icon {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 1.7 !important;
}

.telegram-textarea {
  min-height: 36px !important;
  max-height: 118px !important;
  padding: 8px 11px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #e7eef5 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.telegram-textarea::placeholder {
  color: rgba(127, 145, 163, .86) !important;
}

.telegram-send {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5aa9ff !important;
  box-shadow: none !important;
  font-size: 22px !important;
}

.telegram-send:hover,
.telegram-send:focus-visible {
  background: rgba(51, 144, 236, .10) !important;
  color: #8ed1ff !important;
}

.composer-notice {
  background: #14202b !important;
  border-top: 1px solid rgba(15, 26, 36, .95) !important;
  color: #a6b6c5 !important;
}

@media (min-width: 1600px) {
  .telegram-messages {
    padding-left: 20px !important;
    padding-right: 34px !important;
  }

  .message-stack,
  .telegram-message.outgoing .message-stack {
    max-width: 470px !important;
  }
}

@media (max-width: 720px) {
  .telegram-messages {
    padding: 8px 8px 10px !important;
  }

  .telegram-message.incoming {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 6px;
  }

  .message-author-avatar,
  .message-inline-avatar {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }

  .message-stack,
  .telegram-message.outgoing .message-stack {
    max-width: 86vw !important;
  }

  .message-bubble {
    border-radius: 10px !important;
    padding: 6px 8px 4px !important;
  }

  .telegram-composer {
    grid-template-columns: 32px minmax(0, 1fr) 36px 40px !important;
    padding-inline: 8px !important;
  }
}

/* Targeted chat-only Telegram reference pass.
   Keep shell/sidebar/lists intact; only the open chat surface, bubbles, media and composer are affected. */
.telegram-chat {
  background: #0d1620 !important;
  color: #e7eef5 !important;
}

.telegram-messages {
  gap: 2px !important;
  padding: 9px 14px 10px !important;
  background:
    linear-gradient(180deg, rgba(9, 15, 23, .14), rgba(9, 15, 23, 0) 90px),
    #0d1620 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(116, 132, 148, .44) transparent;
}

.telegram-messages::-webkit-scrollbar {
  width: 5px;
}

.telegram-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(116, 132, 148, .42);
}

.telegram-messages::-webkit-scrollbar-track {
  background: transparent;
}

.telegram-message {
  margin: 1px 0 !important;
}

.telegram-message.has-direction-gap,
.telegram-message.is-group-single {
  margin-top: 7px !important;
}

.telegram-message.incoming {
  grid-template-columns: 27px minmax(0, 1fr) !important;
  column-gap: 6px !important;
}

.message-author-avatar,
.message-inline-avatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
}

.message-author-avatar {
  margin-bottom: 0 !important;
}

.message-stack {
  max-width: min(390px, 54vw) !important;
}

.telegram-message.outgoing .message-stack {
  max-width: min(390px, 54vw) !important;
}

.message-bubble {
  border: 0 !important;
  border-radius: 10px 10px 10px 4px !important;
  padding: 5px 7px 4px !important;
  background: #182533 !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .16) !important;
}

.telegram-message.outgoing .message-bubble {
  border-radius: 10px 10px 4px 10px !important;
  background: #2d5f8a !important;
}

.telegram-message.incoming.is-group-first .message-bubble {
  border-bottom-left-radius: 5px !important;
}

.telegram-message.incoming.is-group-middle .message-bubble {
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}

.telegram-message.incoming.is-group-last .message-bubble {
  border-top-left-radius: 5px !important;
}

.telegram-message.outgoing.is-group-first .message-bubble {
  border-bottom-right-radius: 5px !important;
}

.telegram-message.outgoing.is-group-middle .message-bubble {
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.telegram-message.outgoing.is-group-last .message-bubble {
  border-top-right-radius: 5px !important;
}

.message-bubble:not(:has(.message-media)):not(:has(.reply-preview)) {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  column-gap: 6px !important;
  row-gap: 1px !important;
}

.message-text {
  font-size: 12.6px !important;
  line-height: 1.28 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.message-footer {
  width: auto !important;
  min-width: 0 !important;
  min-height: 11px !important;
  margin: 1px 0 0 auto !important;
  padding-left: 4px !important;
  gap: 3px !important;
  align-self: flex-end !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
}

.message-time {
  font-size: 10px !important;
  font-weight: 650 !important;
  color: rgba(205, 219, 230, .54) !important;
}

.telegram-message.outgoing .message-time {
  color: rgba(218, 239, 255, .62) !important;
}

.message-ticks {
  width: auto !important;
  min-width: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8ed1ff !important;
  letter-spacing: 0 !important;
  line-height: 0 !important;
  transform: translateY(.5px) !important;
}

.message-ticks.is-sent {
  color: rgba(180, 220, 250, .76) !important;
}

.message-ticks-icon {
  width: 16px;
  height: 10px;
  display: block;
  overflow: visible;
}

.message-ticks.is-sent .message-ticks-icon {
  width: 13px;
}

.message-ticks-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-status-spinner {
  width: 11px !important;
  height: 11px !important;
  border-width: 1.5px !important;
}

.message-status-failed {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #e05264 !important;
}

.message-day {
  min-height: 19px !important;
  margin: 8px auto !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(38, 53, 67, .82) !important;
  color: rgba(230, 238, 245, .82) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.message-reactions {
  gap: 2px !important;
  margin-top: -4px !important;
  padding: 0 3px !important;
  transform: translateY(3px) !important;
}

.message-reaction {
  min-height: 16px !important;
  height: 16px !important;
  min-width: 22px !important;
  padding: 1px 4px !important;
  border-color: rgba(91, 124, 152, .5) !important;
  background: rgba(25, 38, 51, .94) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2) !important;
  font-size: 10.5px !important;
}

.message-reaction .reaction-count,
.reaction-count {
  font-size: 9.5px !important;
  line-height: 1 !important;
}

.message-reaction.is-chosen,
.message-reaction.is-mine {
  border-color: rgba(142, 209, 255, .76) !important;
  background: rgba(43, 95, 138, .98) !important;
}

.telegram-message.has-photo-media .message-stack,
.telegram-message.has-photo-media.outgoing .message-stack {
  max-width: min(440px, 58vw) !important;
}

.telegram-message.has-photo-media .message-bubble {
  position: relative !important;
  max-width: min(440px, 58vw) !important;
  padding: 2px !important;
  border-radius: 12px !important;
  background: #182533 !important;
  overflow: hidden !important;
}

.telegram-message.has-photo-media.outgoing .message-bubble {
  background: #2d5f8a !important;
}

.telegram-message.has-photo-media .telegram-photo-card {
  width: clamp(320px, 34vw, 440px) !important;
  max-width: 100% !important;
  min-width: min(280px, 58vw) !important;
  margin: 0 !important;
  border-radius: 11px !important;
  background: #101b27 !important;
  overflow: hidden !important;
}

.telegram-message.has-photo-media .telegram-photo-button {
  width: 100% !important;
  max-height: min(460px, 58vh) !important;
  aspect-ratio: var(--media-ratio, 4 / 3) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(51, 144, 236, .10), transparent 34%),
    #101b27 !important;
}

.telegram-message.has-photo-media .telegram-photo-button img,
.telegram-message.has-photo-media .telegram-photo-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: min(460px, 58vh) !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  background: #101b27 !important;
  image-rendering: auto !important;
}

.telegram-message.has-photo-media .telegram-photo-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 46%),
    #101b27;
}

.telegram-message.has-photo-media .telegram-photo-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 30px;
  height: 23px;
  border: 2px solid rgba(142, 209, 255, .34);
  border-radius: 8px;
  transform: translate(-50%, -50%);
  opacity: .72;
  pointer-events: none;
}

.telegram-message.has-photo-media .telegram-photo-card.is-full-loaded .telegram-photo-button::after,
.telegram-message.has-photo-media .telegram-photo-card.is-full-loaded .telegram-photo-button::before {
  opacity: 0;
}

.telegram-message.has-photo-caption .telegram-photo-caption {
  padding: 6px 7px 2px !important;
  color: #e7eef5 !important;
  font-size: 12.7px !important;
  line-height: 1.32 !important;
}

.telegram-message.is-photo-only .message-footer {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  min-height: 17px !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: rgba(5, 11, 18, .64) !important;
  backdrop-filter: none !important;
}

.telegram-message.has-photo-caption .message-footer {
  padding: 0 6px 4px !important;
}

.telegram-photo-card.is-placeholder,
.telegram-photo-card.is-thumb-error .telegram-photo-fallback {
  width: clamp(300px, 34vw, 420px) !important;
  min-height: 168px !important;
  border-radius: 11px !important;
  background: #101b27 !important;
}

.telegram-composer {
  min-height: 46px !important;
  grid-template-columns: 31px minmax(0, 1fr) 34px 38px !important;
  align-items: end !important;
  gap: 5px !important;
  padding: 5px 9px 7px !important;
  border-top: 1px solid rgba(15, 26, 36, .96) !important;
  background: #14202b !important;
}

.telegram-composer .telegram-icon-button,
.composer-emoji-button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}

.telegram-textarea {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 17px !important;
  background: transparent !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
}

.telegram-send {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  color: #5aa9ff !important;
}

@media (min-width: 1600px) {
  .telegram-message.has-photo-media .message-stack,
  .telegram-message.has-photo-media.outgoing .message-stack {
    max-width: 440px !important;
  }

  .message-stack,
  .telegram-message.outgoing .message-stack {
    max-width: 390px !important;
  }
}

@media (max-width: 720px) {
  .telegram-messages {
    padding: 8px 7px 9px !important;
  }

  .message-stack,
  .telegram-message.outgoing .message-stack {
    max-width: 84vw !important;
  }

  .telegram-message.has-photo-media .message-stack,
  .telegram-message.has-photo-media.outgoing .message-stack,
  .telegram-message.has-photo-media .message-bubble {
    max-width: 84vw !important;
  }

  .telegram-message.has-photo-media .telegram-photo-card {
    width: 80vw !important;
    min-width: min(280px, 78vw) !important;
  }

  .telegram-message.has-photo-media .telegram-photo-button,
  .telegram-message.has-photo-media .telegram-photo-button img,
  .telegram-message.has-photo-media .telegram-photo-image {
    max-height: 52vh !important;
  }

  .telegram-composer {
    grid-template-columns: 31px minmax(0, 1fr) 34px 38px !important;
    padding-inline: 7px !important;
  }
}

/* Backend media contract sync: full download_url is the final photo source; avoid stretching small full images. */
.telegram-message.has-photo-media .telegram-photo-card.has-full-source {
  width: min(clamp(300px, 34vw, 420px), calc(var(--media-width, 420) * 1px)) !important;
  min-width: 0 !important;
  max-width: min(420px, 58vw) !important;
}

.telegram-message.has-photo-media .telegram-photo-card.has-full-source .telegram-photo-button,
.telegram-message.has-photo-media .telegram-photo-card.has-full-source .telegram-photo-image {
  max-width: 100% !important;
}

.telegram-message.has-photo-media .telegram-photo-card.has-full-source .telegram-photo-image {
  object-fit: contain !important;
}

@media (max-width: 720px) {
  .telegram-message.has-photo-media .telegram-photo-card.has-full-source {
    width: min(82vw, calc(var(--media-width, 420) * 1px)) !important;
    max-width: 82vw !important;
  }
}

/* Dialog action/reply/status sync: keep controls outside bubbles and icon-like. */
.message-stack {
  position: relative !important;
}

.message-bubble > .message-actions {
  display: none !important;
}

.message-stack > .message-actions {
  position: absolute !important;
  top: 50% !important;
  z-index: 82 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  width: auto !important;
  min-width: max-content !important;
  padding: 3px !important;
  border: 1px solid rgba(127, 145, 163, .24) !important;
  border-radius: 999px !important;
  background: rgba(23, 33, 43, .96) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(.98) !important;
  transition: opacity 120ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)), transform 120ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)) !important;
}

.telegram-message.incoming .message-stack > .message-actions {
  left: calc(100% + 7px) !important;
}

.telegram-message.outgoing .message-stack > .message-actions {
  right: calc(100% + 7px) !important;
}

.telegram-message:hover .message-stack > .message-actions,
.telegram-message:focus-within .message-stack > .message-actions,
.telegram-message.is-picker-open .message-stack > .message-actions,
.telegram-message.is-action-menu-open .message-stack > .message-actions,
.message-stack > .message-actions:hover,
.message-stack > .message-actions:focus-within {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) scale(1) !important;
}

.message-stack > .message-actions > button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #7f91a3 !important;
  background: transparent !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  transition: background 110ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)), color 110ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)), transform 80ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)) !important;
}

.message-stack > .message-actions > button:hover,
.message-stack > .message-actions > button:focus-visible,
.telegram-message.is-picker-open .message-reaction-trigger,
.telegram-message.is-action-menu-open .message-menu-trigger {
  color: #3390ec !important;
  background: rgba(51, 144, 236, .13) !important;
}

.message-stack > .message-actions > button:active {
  transform: scale(.94) !important;
}

.message-reaction-trigger .emoji-face-icon {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.message-reaction-trigger .emoji-face-icon .emoji-eye {
  fill: currentColor !important;
  stroke: none !important;
}

.message-reaction-trigger .emoji-face-icon .emoji-smile {
  fill: none !important;
}

.bubble-reply.message-reply-preview,
.message-bubble > .bubble-reply.message-reply-preview {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: 1px !important;
  margin: 0 0 5px !important;
  padding: 5px 7px 5px 9px !important;
  border-left: 2px solid #3390ec !important;
  border-radius: 7px !important;
  background: rgba(51, 144, 236, .13) !important;
  color: #e7eef5 !important;
  overflow: hidden !important;
}

.telegram-message.outgoing .bubble-reply.message-reply-preview {
  background: rgba(13, 35, 55, .28) !important;
  border-left-color: #8ed1ff !important;
}

.bubble-reply.message-reply-preview strong,
.bubble-reply.message-reply-preview span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
}

.bubble-reply.message-reply-preview strong {
  -webkit-line-clamp: 1 !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  color: #8ed1ff !important;
  font-weight: 800 !important;
}

.bubble-reply.message-reply-preview span {
  -webkit-line-clamp: 2 !important;
  color: rgba(231, 238, 245, .78) !important;
  font-size: 11.5px !important;
  line-height: 1.22 !important;
}

.message-bubble:has(.bubble-reply.message-reply-preview) {
  display: block !important;
}

.message-ticks-icon,
.message-failed-icon {
  display: block !important;
  overflow: visible !important;
}

.message-failed-icon {
  width: 12px !important;
  height: 12px !important;
}

.message-failed-icon path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
}

.message-status-failed {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e05264 !important;
  line-height: 0 !important;
}

.dialog-delete-mode-card {
  width: min(340px, calc(100vw - 28px)) !important;
}

.dialog-delete-mode-list {
  display: grid !important;
  gap: 8px !important;
  margin: 10px 0 14px !important;
}

.dialog-delete-mode-list button {
  width: 100% !important;
  min-height: 44px !important;
  padding: 9px 11px !important;
  display: grid !important;
  gap: 2px !important;
  text-align: left !important;
  border: 1px solid rgba(127, 145, 163, .22) !important;
  border-radius: 9px !important;
  background: rgba(28, 39, 51, .92) !important;
  color: #e7eef5 !important;
}

.dialog-delete-mode-list button:hover:not(:disabled),
.dialog-delete-mode-list button:focus-visible:not(:disabled) {
  border-color: rgba(51, 144, 236, .45) !important;
  background: rgba(32, 43, 54, .98) !important;
}

.dialog-delete-mode-list button span {
  font-size: 13px !important;
  font-weight: 750 !important;
}

.dialog-delete-mode-list button small {
  color: #7f91a3 !important;
  font-size: 11px !important;
}

.native-notification-button.is-unsupported {
  opacity: .58 !important;
  cursor: not-allowed !important;
}

@media (max-width: 720px) {
  .message-stack > .message-actions {
    top: auto !important;
    bottom: calc(100% + 5px) !important;
    transform: translateY(4px) scale(.98) !important;
  }

  .telegram-message.incoming .message-stack > .message-actions {
    left: 0 !important;
  }

  .telegram-message.outgoing .message-stack > .message-actions {
    right: 0 !important;
  }

  .telegram-message:hover .message-stack > .message-actions,
  .telegram-message:focus-within .message-stack > .message-actions,
  .telegram-message.is-picker-open .message-stack > .message-actions,
  .telegram-message.is-action-menu-open .message-stack > .message-actions,
  .message-stack > .message-actions:hover,
  .message-stack > .message-actions:focus-within {
    transform: translateY(0) scale(1) !important;
  }

  .message-stack > .message-actions > button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}

/* Critical dialogs fix: actions never depend on tiny bubble width; only one vertical dots trigger. */
.telegram-message,
.message-stack {
  overflow: visible !important;
}

.message-mobile-menu {
  display: none !important;
}

.message-stack > .message-actions {
  box-sizing: border-box !important;
  min-width: 118px !important;
  width: max-content !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
  padding: 4px !important;
  z-index: 140 !important;
  isolation: isolate !important;
}

.message-stack > .message-actions > button {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
}

.message-stack > .message-actions .message-menu-trigger {
  display: inline-flex !important;
}

.message-stack > .message-actions .message-menu-trigger::before {
  content: none !important;
}

.telegram-message.outgoing .message-stack > .message-actions {
  right: calc(100% + 10px) !important;
  left: auto !important;
}

.telegram-message.incoming .message-stack > .message-actions {
  left: calc(100% + 10px) !important;
  right: auto !important;
}

.message-footer {
  white-space: nowrap !important;
}

.message-bubble:not(:has(.message-media)):not(:has(.reply-preview)) {
  min-width: max-content !important;
}

.message-ticks-icon {
  width: 16px !important;
  height: 11px !important;
}

.message-ticks.is-sent .message-ticks-icon {
  width: 13px !important;
}

.message-status-spinner,
.message-status-failed {
  flex: 0 0 auto !important;
  width: 13px !important;
  height: 13px !important;
}

@media (max-width: 720px) {
  .message-stack > .message-actions {
    min-width: 136px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    top: auto !important;
    bottom: calc(100% + 5px) !important;
  }

  .message-stack > .message-actions > button {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  .telegram-message.outgoing .message-stack > .message-actions {
    right: 0 !important;
    left: auto !important;
  }

  .telegram-message.incoming .message-stack > .message-actions {
    left: 0 !important;
    right: auto !important;
  }
}

/* Dialogs: final action placement cleanup. All-dialog rows use only a pin action; destructive/single-dialog actions live in the open chat header menu. */
.all-dialog-row {
  grid-template-columns: 48px minmax(0, 1fr) 38px !important;
}

.all-dialog-row .dialog-midline {
  min-height: 17px !important;
}

.dialog-account-line {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #7f91a3 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

.all-dialog-menu-trigger,
.all-dialog-context-menu {
  display: none !important;
}

.all-dialog-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: 38px !important;
  min-width: 38px !important;
}

.all-dialog-pin-button {
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #7f91a3 !important;
  opacity: .78 !important;
  cursor: pointer !important;
  transition:
    background-color var(--motion-micro, 100ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    color var(--motion-micro, 100ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    opacity var(--motion-micro, 100ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    transform var(--motion-micro, 100ms) var(--ease-pop, cubic-bezier(.2,.9,.25,1.12)) !important;
}

.all-dialog-pin-button svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: currentColor !important;
}

.all-dialog-pin-button:hover,
.all-dialog-pin-button:focus-visible {
  color: #6ab3ff !important;
  background: rgba(51, 144, 236, .12) !important;
  opacity: 1 !important;
  outline: none !important;
}

.all-dialog-pin-button:active {
  transform: scale(.92) !important;
}

.all-dialog-pin-button.is-pinned {
  color: #3390ec !important;
  opacity: 1 !important;
}

.chat-blocked-banner {
  margin: 7px 14px 0 !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(224, 168, 79, .18) !important;
  border-radius: 999px !important;
  background: rgba(224, 168, 79, .08) !important;
  color: #d9bd84 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  animation: motionNoticeIn var(--motion-small, 140ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)) both;
}

.chat-header-menu {
  z-index: 190 !important;
  width: 278px !important;
  padding: 6px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  background: #17212b !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.42) !important;
  transform-origin: top right !important;
}

.chat-header-menu button {
  width: 100% !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 9px !important;
  row-gap: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  background: transparent !important;
  color: #e7eef5 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.chat-header-menu button:hover:not(:disabled),
.chat-header-menu button:focus-visible:not(:disabled) {
  background: #202b36 !important;
  color: #ffffff !important;
  outline: none !important;
}

.chat-header-menu .chat-menu-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #7f91a3 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.chat-header-menu .chat-menu-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.chat-header-menu button small {
  grid-column: 2 !important;
  margin-top: 2px !important;
  color: #7f91a3 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.chat-header-menu button.is-danger {
  color: #ff8b96 !important;
}

.chat-header-menu button.is-danger .chat-menu-icon {
  color: #e05264 !important;
}

.chat-header-menu button.is-danger:hover:not(:disabled),
.chat-header-menu button.is-danger:focus-visible:not(:disabled) {
  background: rgba(224,82,100,.13) !important;
  color: #ffd0d6 !important;
}

.chat-header-menu button:disabled {
  color: rgba(127,145,163,.58) !important;
  cursor: default !important;
}

@media (max-width: 720px) {
  .all-dialog-row {
    grid-template-columns: 44px minmax(0, 1fr) 42px !important;
  }

  .all-dialog-pin-button {
    width: 40px !important;
    height: 40px !important;
  }

  .chat-header-menu {
    width: min(278px, calc(100vw - 18px)) !important;
  }

  .chat-header-menu button {
    min-height: 44px !important;
  }
}

/* Dialogs follow-up: accounts rows mirror all-dialog row polish; notification controls live in hamburger menu. */
.native-notification-button,
.notification-sound-toggle {
  display: none !important;
}

.telegram-account {
  grid-template-columns: 48px minmax(0, 1fr) 38px !important;
  gap: 10px !important;
  min-height: 62px !important;
  padding: 8px 8px 8px 10px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(15, 26, 36, .78) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.telegram-account:hover,
.telegram-account:focus-visible {
  background: #202b36 !important;
  outline: none !important;
}

.telegram-account.is-active {
  background: rgba(47, 110, 165, .42) !important;
}

.telegram-account.is-active::before {
  opacity: 1 !important;
  height: 70% !important;
  background: #3390ec !important;
}

.telegram-account.is-pinned {
  box-shadow: inset 2px 0 0 #3390ec !important;
}

.telegram-account .account-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
}

.telegram-account .account-name {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #e7eef5 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
}

.telegram-account .account-phone,
.telegram-account .account-username {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #7f91a3 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

.telegram-account .account-username.is-muted {
  color: rgba(127,145,163,.72) !important;
}

.telegram-account .account-tail-row,
.telegram-account .account-tail,
.telegram-account .account-status-chip,
.telegram-account > .account-presence {
  display: none !important;
}

.telegram-pin-button {
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #7f91a3 !important;
  opacity: .78 !important;
  cursor: pointer !important;
  transition:
    background-color var(--motion-micro, 100ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    color var(--motion-micro, 100ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    opacity var(--motion-micro, 100ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    transform var(--motion-micro, 100ms) var(--ease-pop, cubic-bezier(.2,.9,.25,1.12)) !important;
}

.telegram-pin-button svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: currentColor !important;
}

.telegram-pin-button:hover,
.telegram-pin-button:focus-visible {
  color: #6ab3ff !important;
  background: rgba(51, 144, 236, .12) !important;
  opacity: 1 !important;
  outline: none !important;
}

.telegram-pin-button:active {
  transform: scale(.92) !important;
}

.telegram-pin-button.is-pinned {
  color: #3390ec !important;
  opacity: 1 !important;
}

.account-pin-button {
  font-size: 0 !important;
  opacity: .26 !important;
}

.telegram-account:hover .account-pin-button,
.telegram-account:focus-within .account-pin-button,
.account-pin-button:focus-visible,
.account-pin-button.is-pinned {
  opacity: 1 !important;
}

.dialog-mode-menu button.is-notification.is-active b {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.dialog-mode-menu .dialog-mode-main-separator {
  display: block !important;
  height: 1px !important;
  margin: 7px 6px !important;
  border: 0 !important;
  background: rgba(255,255,255,.06) !important;
}

/* Multi-Telegram notification toast: source header, avatar/name/preview, account line left and Moscow time bottom-right. */
.inbox-toast-layer {
  left: auto !important;
  right: 18px !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  width: min(410px, calc(100vw - 32px)) !important;
  flex-direction: column-reverse !important;
  z-index: 52 !important;
}

.inbox-toast {
  position: relative !important;
  grid-template-columns: 1fr 24px !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 8px 8px !important;
  min-height: 112px !important;
  padding: 12px 12px 12px 14px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  background: #17212b !important;
  color: #e7eef5 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.32) !important;
}

.inbox-toast:hover,
.inbox-toast:focus-visible {
  background: #1b2733 !important;
  border-color: rgba(127,145,163,.24) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.36) !important;
}

.inbox-toast-source {
  grid-column: 1 !important;
  color: #a6b6c5 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.inbox-toast-body {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  min-width: 0 !important;
}

.inbox-toast-avatar {
  width: 42px !important;
  height: 42px !important;
  align-self: start !important;
}

.inbox-toast-main {
  display: grid !important;
  min-width: 0 !important;
  gap: 5px !important;
}

.inbox-toast-title {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #e7eef5 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.inbox-toast-preview {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: #e7eef5 !important;
  font-size: 13px !important;
  line-height: 17px !important;
}

.inbox-toast-bottom {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: #7f91a3 !important;
  font-size: 11px !important;
  line-height: 14px !important;
}

.inbox-toast-account-line {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.inbox-toast-time {
  justify-self: end !important;
  margin-left: 0 !important;
  color: #8fa1b2 !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-variant-numeric: tabular-nums !important;
}

.inbox-toast-count {
  width: max-content !important;
  color: #6ab3ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.inbox-toast-unread {
  position: absolute !important;
  right: 12px !important;
  top: 14px !important;
  width: 7px !important;
  height: 7px !important;
  background: #4aa3ff !important;
  box-shadow: 0 0 0 3px rgba(74,163,255,.14) !important;
}

.inbox-toast-close {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 28px !important;
  height: 28px !important;
  opacity: .58 !important;
}

.inbox-toast-close:hover,
.inbox-toast-close:focus-visible {
  opacity: 1 !important;
}

@media (max-width: 720px) {
  .inbox-toast-layer {
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
  }

  .telegram-inbox-stack.is-chat-open .inbox-toast-layer {
    bottom: max(86px, calc(env(safe-area-inset-bottom) + 86px)) !important;
  }

  .inbox-toast {
    min-height: 104px !important;
    padding: 11px 11px 11px 12px !important;
  }

  .inbox-toast-body {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  .inbox-toast-avatar {
    width: 38px !important;
    height: 38px !important;
  }
}

@media (max-width: 720px) {
  .telegram-account {
    grid-template-columns: 44px minmax(0, 1fr) 42px !important;
    min-height: 58px !important;
    padding-right: 6px !important;
  }

  .telegram-pin-button {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Telegram-like lightweight message action menu. */
.message-action-menu,
.message-action-menu.is-portaled {
  min-width: 166px !important;
  width: max-content !important;
  max-width: min(212px, calc(100vw - 20px)) !important;
  display: none !important;
  gap: 2px !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 12px !important;
  background: #17212b !important;
  color: #e7eef5 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(8px) !important;
  overflow: hidden !important;
  color-scheme: dark !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.telegram-message.is-action-menu-open .message-action-menu,
.message-action-menu.is-portaled.is-open {
  display: grid !important;
}

.message-action-menu.motion-picker-enter,
.telegram-message.is-action-menu-open .message-action-menu,
.message-action-menu.is-portaled.is-open {
  animation: telegramMenuSoftIn 140ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)) both !important;
}

.message-action-menu button,
.message-action-menu .message-action-row {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 9px !important;
  padding: 0 10px !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #e7eef5 !important;
  box-shadow: none !important;
  outline: none !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition:
    background-color var(--motion-micro, 100ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    color var(--motion-micro, 100ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    transform var(--motion-instant, 80ms) var(--ease-pop, cubic-bezier(.2,.9,.25,1.12)) !important;
}

.message-action-menu button:hover,
.message-action-menu button:focus-visible {
  background-color: #202b36 !important;
  background-image: none !important;
  color: #ffffff !important;
  outline: none !important;
}

.message-action-menu button:active {
  transform: scale(.985) !important;
}

.message-action-menu button:disabled {
  opacity: .46 !important;
  cursor: default !important;
  pointer-events: none !important;
}

.message-action-menu .message-action-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #7f91a3 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.message-action-menu .message-action-icon .emoji-face-icon {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.message-action-menu .message-action-icon .emoji-eye {
  fill: currentColor !important;
  stroke: none !important;
}

.message-action-menu .message-action-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
}

.message-action-menu button:hover .message-action-icon,
.message-action-menu button:focus-visible .message-action-icon {
  color: #8fc9ff !important;
}

.message-action-menu .message-action-separator {
  display: block !important;
  height: 1px !important;
  margin: 3px 6px !important;
  background: rgba(255,255,255,.055) !important;
}

.message-action-menu .message-delete-option,
.message-action-menu .message-delete-option.is-danger {
  color: #e05264 !important;
}

.message-action-menu .message-delete-option .message-action-icon {
  color: rgba(224,82,100,.78) !important;
}

.message-action-menu .message-delete-option:hover,
.message-action-menu .message-delete-option:focus-visible {
  background: rgba(224,82,100,.10) !important;
  color: #ff7b88 !important;
}

@keyframes telegramMenuSoftIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 720px) {
  .message-action-menu,
  .message-action-menu.is-portaled {
    min-width: 190px !important;
    border-radius: 14px !important;
    padding: 5px !important;
  }

  .message-action-menu button,
  .message-action-menu .message-action-row {
    min-height: 44px !important;
    border-radius: 11px !important;
    padding: 0 12px !important;
    gap: 10px !important;
  }
}

/* Telegram Web reference pass: open chat surface only.
   Keep sidebar, account list and dialog list intact; this final layer owns the visible conversation. */
.telegram-chat {
  --tg-chat-bg: #0e1621;
  --tg-panel: #17212b;
  --tg-panel-soft: #1b2733;
  --tg-incoming: #182533;
  --tg-outgoing: #2b5278;
  --tg-text: #e7eef5;
  --tg-muted: #7f91a3;
  --tg-blue: #3390ec;
  --tg-read: #8ed1ff;
  background: var(--tg-chat-bg) !important;
  border-left: 1px solid rgba(15, 26, 36, .96) !important;
  color: var(--tg-text) !important;
  box-shadow: none !important;
}

.telegram-chat::before {
  content: "" !important;
  position: absolute !important;
  inset: 58px 0 52px !important;
  opacity: .018 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle at 16px 16px, rgba(255,255,255,.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42px 38px, rgba(255,255,255,.45) 0 1px, transparent 1.5px) !important;
  background-size: 64px 64px !important;
  mix-blend-mode: screen !important;
}

.telegram-chat-head {
  height: 58px !important;
  min-height: 58px !important;
  padding: 8px 16px !important;
  background: var(--tg-panel) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 26, 36, .92) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.telegram-chat-head .mini-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.telegram-chat-head h2,
.telegram-chat-head .chat-title,
.telegram-chat-head .dialog-title {
  color: var(--tg-text) !important;
  font-size: 15px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.telegram-chat-head p,
.telegram-chat-head .chat-subtitle,
.telegram-chat-head .dialog-meta {
  color: var(--tg-muted) !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 500 !important;
}

.telegram-chat-head .telegram-icon-button,
.telegram-chat-head [data-chat-menu] {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #8396a8 !important;
  box-shadow: none !important;
  font-size: 20px !important;
}

.telegram-chat-head .telegram-icon-button:hover,
.telegram-chat-head [data-chat-menu]:hover,
.telegram-chat-head .telegram-icon-button:focus-visible,
.telegram-chat-head [data-chat-menu]:focus-visible {
  background: rgba(255,255,255,.055) !important;
  color: #b5c7d8 !important;
}

.telegram-messages {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  padding: 9px 18px 12px !important;
  gap: 0 !important;
  background: var(--tg-chat-bg) !important;
  scroll-behavior: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(128, 145, 162, .56) transparent !important;
}

.telegram-messages::-webkit-scrollbar {
  width: 5px !important;
}

.telegram-messages::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(128, 145, 162, .48) !important;
}

.telegram-message {
  margin: 1px 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.telegram-message.has-direction-gap {
  margin-top: 7px !important;
}

.telegram-message.incoming {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  column-gap: 7px !important;
}

.telegram-message.outgoing {
  justify-content: flex-end !important;
}

.message-author-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  margin-bottom: 0 !important;
  align-self: end !important;
}

.message-inline-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
}

.message-stack {
  position: relative !important;
  width: fit-content !important;
  max-width: min(490px, 58vw) !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

.telegram-message.outgoing .message-stack {
  align-items: flex-end !important;
  max-width: min(490px, 58vw) !important;
}

.message-bubble {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 6px 8px 5px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--tg-incoming) !important;
  color: var(--tg-text) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.16) !important;
  overflow: visible !important;
}

.telegram-message.outgoing .message-bubble {
  background: var(--tg-outgoing) !important;
  color: #f3f8fc !important;
}

.telegram-message.incoming.is-group-first .message-bubble,
.telegram-message.incoming.is-group-middle .message-bubble {
  border-bottom-left-radius: 6px !important;
}

.telegram-message.incoming.is-group-middle .message-bubble,
.telegram-message.incoming.is-group-last .message-bubble {
  border-top-left-radius: 6px !important;
}

.telegram-message.outgoing.is-group-first .message-bubble,
.telegram-message.outgoing.is-group-middle .message-bubble {
  border-bottom-right-radius: 6px !important;
}

.telegram-message.outgoing.is-group-middle .message-bubble,
.telegram-message.outgoing.is-group-last .message-bubble {
  border-top-right-radius: 6px !important;
}

.telegram-message.incoming.is-group-single .message-bubble::after,
.telegram-message.incoming.is-group-last .message-bubble::after,
.telegram-message.outgoing.is-group-single .message-bubble::after,
.telegram-message.outgoing.is-group-last .message-bubble::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 9px !important;
  height: 12px !important;
  pointer-events: none !important;
  background: inherit !important;
}

.telegram-message.incoming.is-group-single .message-bubble::after,
.telegram-message.incoming.is-group-last .message-bubble::after {
  left: -4px !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
}

.telegram-message.outgoing.is-group-single .message-bubble::after,
.telegram-message.outgoing.is-group-last .message-bubble::after {
  right: -4px !important;
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
}

.message-text {
  display: inline !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.32 !important;
  font-weight: 550 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

.message-footer {
  float: right !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  min-height: 13px !important;
  margin: 4px 0 0 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: translateY(1px) !important;
}

.message-time {
  color: rgba(221, 232, 240, .58) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

.telegram-message.outgoing .message-time {
  color: rgba(216, 238, 255, .66) !important;
}

.message-ticks,
.message-status-failed,
.message-status-spinner {
  margin-left: 1px !important;
  flex: 0 0 auto !important;
}

.message-ticks {
  color: var(--tg-read) !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

.message-ticks-icon {
  width: 15px !important;
  height: 10px !important;
  stroke-width: 1.75 !important;
}

.message-ticks.is-sent .message-ticks-icon {
  width: 12px !important;
}

.message-status-spinner {
  width: 12px !important;
  height: 12px !important;
  border-width: 2px !important;
}

.message-status-failed {
  color: #e05264 !important;
}

.message-day {
  margin: 9px auto !important;
  padding: 4px 9px !important;
  min-height: 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(54, 69, 82, .82) !important;
  color: rgba(232, 240, 247, .86) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.16) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.bubble-reply.message-reply-preview {
  width: 100% !important;
  margin: 0 0 5px !important;
  padding: 5px 7px 5px 9px !important;
  border: 0 !important;
  border-left: 2px solid var(--tg-blue) !important;
  border-radius: 7px !important;
  background: rgba(51, 144, 236, .12) !important;
}

.telegram-message.outgoing .bubble-reply.message-reply-preview {
  border-left-color: #91d4ff !important;
  background: rgba(9, 30, 48, .26) !important;
}

.bubble-reply.message-reply-preview strong {
  color: #8ed1ff !important;
  font-size: 11.5px !important;
  line-height: 14px !important;
  font-weight: 800 !important;
}

.bubble-reply.message-reply-preview span {
  color: rgba(231, 238, 245, .78) !important;
  font-size: 11.5px !important;
  line-height: 14px !important;
}

.message-reactions {
  display: flex !important;
  gap: 3px !important;
  min-height: 0 !important;
  margin-top: -1px !important;
  padding: 0 5px !important;
  transform: translateY(1px) !important;
}

.message-reactions.is-empty {
  display: none !important;
}

.telegram-message.outgoing .message-reactions {
  justify-content: flex-end !important;
}

.message-reaction {
  height: 18px !important;
  min-height: 18px !important;
  padding: 1px 6px !important;
  border: 1px solid rgba(84, 118, 148, .42) !important;
  border-radius: 999px !important;
  background: rgba(24, 37, 51, .96) !important;
  color: #edf6ff !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.2) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.message-reaction.is-mine,
.message-reaction.is-chosen {
  border-color: rgba(142, 209, 255, .72) !important;
  background: rgba(43, 92, 135, .98) !important;
}

.message-stack > .message-actions {
  min-width: 118px !important;
  padding: 3px !important;
  gap: 4px !important;
  border: 1px solid rgba(127, 145, 163, .14) !important;
  border-radius: 999px !important;
  background: rgba(23, 33, 43, .86) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
}

.message-stack > .message-actions > button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #8799aa !important;
}

.message-stack > .message-actions > button:hover,
.message-stack > .message-actions > button:focus-visible,
.telegram-message.is-picker-open .message-reaction-trigger,
.telegram-message.is-action-menu-open .message-menu-trigger {
  background: rgba(51, 144, 236, .12) !important;
  color: #8ed1ff !important;
}

.reaction-picker {
  min-height: 42px !important;
  padding: 5px !important;
  gap: 3px !important;
  border: 1px solid rgba(127, 145, 163, .14) !important;
  border-radius: 999px !important;
  background: rgba(23, 33, 43, .94) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.32) !important;
}

.reaction-picker button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: transparent !important;
  font-size: 19px !important;
}

.reaction-picker button:hover,
.reaction-picker button:focus-visible {
  background: rgba(51, 144, 236, .12) !important;
  transform: scale(1.12) !important;
}

.message-action-menu {
  min-width: 178px !important;
  padding: 6px !important;
  border: 1px solid rgba(127, 145, 163, .14) !important;
  border-radius: 12px !important;
  background: rgba(23, 33, 43, .96) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
}

.message-action-menu .message-action-row {
  min-height: 36px !important;
  padding: 8px 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #e7eef5 !important;
}

.message-action-menu .message-action-row:hover,
.message-action-menu .message-action-row:focus-visible {
  background: rgba(255,255,255,.055) !important;
}

.message-action-menu .message-action-row.is-danger {
  color: #ff7b8a !important;
}

.message-action-menu .message-action-row.is-danger:hover,
.message-action-menu .message-action-row.is-danger:focus-visible {
  background: rgba(224, 82, 100, .105) !important;
}

.message-action-icon {
  color: currentColor !important;
  opacity: .8 !important;
}

.message-action-label {
  font-size: 13px !important;
  line-height: 17px !important;
  font-weight: 650 !important;
}

.telegram-message.has-photo-media .message-bubble {
  max-width: min(430px, 76vw) !important;
  padding: 2px !important;
  border-radius: 13px !important;
}

.telegram-message.has-photo-media .telegram-photo-card {
  width: min(420px, 76vw) !important;
  min-width: min(300px, 70vw) !important;
  border-radius: 12px !important;
  background: #101b27 !important;
}

.telegram-message.has-photo-media .telegram-photo-button,
.telegram-message.has-photo-media .telegram-photo-button img {
  border-radius: 11px !important;
}

.telegram-message.is-photo-only .message-footer {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: rgba(6, 12, 20, .58) !important;
  color: #fff !important;
}

.telegram-composer {
  min-height: 52px !important;
  grid-template-columns: 34px minmax(0, 1fr) 36px 42px !important;
  gap: 5px !important;
  align-items: end !important;
  padding: 7px 12px 8px !important;
  border-top: 1px solid rgba(15, 26, 36, .96) !important;
  background: var(--tg-panel) !important;
  box-shadow: none !important;
}

.telegram-textarea {
  min-height: 36px !important;
  max-height: 118px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--tg-text) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.telegram-textarea::placeholder {
  color: #7f91a3 !important;
}

.telegram-composer .telegram-icon-button,
.composer-emoji-button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #7f91a3 !important;
  box-shadow: none !important;
}

.telegram-composer .telegram-icon-button:hover,
.telegram-composer .telegram-icon-button:focus-visible,
.composer-emoji-button:hover,
.composer-emoji-button:focus-visible,
.composer-emoji-button.is-open {
  background: rgba(51, 144, 236, .10) !important;
  color: #8ed1ff !important;
}

.emoji-face-icon {
  width: 21px !important;
  height: 21px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.65 !important;
}

.emoji-face-icon .emoji-eye {
  fill: currentColor !important;
  stroke: none !important;
}

.telegram-send {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5aa9ff !important;
  box-shadow: none !important;
  font-size: 23px !important;
}

.telegram-send:hover,
.telegram-send:focus-visible {
  background: rgba(51, 144, 236, .10) !important;
  color: #8ed1ff !important;
}

@media (min-width: 1600px) {
  .telegram-messages {
    padding-left: 20px !important;
    padding-right: 28px !important;
  }

  .message-stack,
  .telegram-message.outgoing .message-stack {
    max-width: 490px !important;
  }
}

@media (max-width: 720px) {
  .telegram-chat::before {
    inset: 54px 0 54px !important;
  }

  .telegram-chat-head {
    height: 54px !important;
    min-height: 54px !important;
    padding: 7px 10px !important;
  }

  .telegram-messages {
    padding: 8px 8px 10px !important;
  }

  .telegram-message.incoming {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  .message-author-avatar,
  .message-inline-avatar {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }

  .message-stack,
  .telegram-message.outgoing .message-stack {
    max-width: 86vw !important;
  }

  .message-bubble {
    border-radius: 11px !important;
    padding: 6px 8px 5px !important;
  }

  .message-stack > .message-actions {
    min-width: 136px !important;
    bottom: calc(100% + 5px) !important;
  }

  .message-stack > .message-actions > button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .telegram-composer {
    min-height: 54px !important;
    grid-template-columns: 34px minmax(0, 1fr) 38px 42px !important;
    padding: 7px 8px 9px !important;
  }
}

/* Worker Telegram Web clone: final open-dialog replacement.
   This layer intentionally overrides older panel/card styling only in worker Dialogs. */
body.role-worker {
  --tgw-bg: #0e1621;
  --tgw-panel: #17212b;
  --tgw-panel-soft: #1b2733;
  --tgw-border: #0b141d;
  --tgw-border-soft: rgba(127, 145, 163, .12);
  --tgw-hover: #202b36;
  --tgw-active: #2b5278;
  --tgw-incoming: #182533;
  --tgw-outgoing: #2b5278;
  --tgw-text: #e7eef5;
  --tgw-muted: #7f91a3;
  --tgw-muted-2: #6f8192;
  --tgw-blue: #3390ec;
  --tgw-read: #8ed1ff;
  --tgw-danger: #e05264;
  background: var(--tgw-bg) !important;
  color: var(--tgw-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.role-worker .shell,
body.role-worker .main,
body.role-worker .content,
body.role-worker .telegram-inbox-stack {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--tgw-bg) !important;
}

body.role-worker .live-inbox-top-panel {
  display: none !important;
}

body.role-worker .telegram-shell,
body.role-worker .telegram-shell.theme-dark,
body.role-worker .telegram-shell.theme-light {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 284px 374px minmax(0, 1fr) !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--tgw-panel) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.role-worker .telegram-shell.is-all-dialogs-mode {
  grid-template-columns: 430px minmax(0, 1fr) !important;
}

body.role-worker .telegram-shell.is-all-dialogs-mode .telegram-left,
body.role-worker .telegram-shell.is-all-dialogs-mode .all-dialogs-blank-column {
  display: none !important;
}

body.role-worker .telegram-accounts,
body.role-worker .telegram-left {
  min-width: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: 0 !important;
  border-right: 1px solid var(--tgw-border) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel) !important;
  box-shadow: none !important;
}

body.role-worker .telegram-accountbar,
body.role-worker .telegram-search {
  height: 54px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tgw-border) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel) !important;
  box-shadow: none !important;
}

body.role-worker .telegram-search-input {
  height: 36px !important;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #242f3d !important;
  color: var(--tgw-text) !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

body.role-worker .telegram-search-input::placeholder {
  color: var(--tgw-muted) !important;
}

body.role-worker .telegram-meta {
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(15, 26, 36, .62) !important;
  color: var(--tgw-muted) !important;
  background: var(--tgw-panel) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 600 !important;
}

body.role-worker .telegram-account-list,
body.role-worker .telegram-dialogs {
  height: calc(100vh - 54px) !important;
  padding: 0 !important;
  gap: 0 !important;
  background: var(--tgw-panel) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(127, 145, 163, .42) transparent !important;
}

body.role-worker .telegram-account-list {
  height: calc(100vh - 54px - 31px) !important;
}

body.role-worker .telegram-account,
body.role-worker .telegram-dialog,
body.role-worker .all-dialog-row {
  min-height: 64px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 120ms cubic-bezier(.2,.8,.2,1) !important;
}

body.role-worker .telegram-account::after,
body.role-worker .telegram-dialog::after,
body.role-worker .all-dialog-row::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 62px !important;
  height: 1px !important;
  background: rgba(255,255,255,.045) !important;
  pointer-events: none !important;
}

body.role-worker .telegram-account:hover,
body.role-worker .telegram-dialog:hover,
body.role-worker .all-dialog-row:hover,
body.role-worker .telegram-account:focus-visible,
body.role-worker .telegram-dialog:focus-visible,
body.role-worker .all-dialog-row:focus-visible {
  background: rgba(255,255,255,.045) !important;
}

body.role-worker .telegram-account.is-active,
body.role-worker .telegram-dialog.is-active,
body.role-worker .all-dialog-row.is-active {
  background: var(--tgw-active) !important;
}

body.role-worker .dialog-avatar,
body.role-worker .account-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

body.role-worker .dialog-title,
body.role-worker .account-name {
  color: var(--tgw-text) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body.role-worker .dialog-preview,
body.role-worker .dialog-subline,
body.role-worker .account-phone,
body.role-worker .account-username,
body.role-worker .dialog-time {
  color: var(--tgw-muted) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
}

body.role-worker .telegram-account.is-active .dialog-title,
body.role-worker .telegram-account.is-active .account-name,
body.role-worker .telegram-account.is-active .account-phone,
body.role-worker .telegram-account.is-active .account-username,
body.role-worker .telegram-dialog.is-active .dialog-title,
body.role-worker .telegram-dialog.is-active .dialog-preview,
body.role-worker .telegram-dialog.is-active .dialog-subline,
body.role-worker .telegram-dialog.is-active .dialog-time,
body.role-worker .all-dialog-row.is-active .dialog-title,
body.role-worker .all-dialog-row.is-active .dialog-preview,
body.role-worker .all-dialog-row.is-active .dialog-subline,
body.role-worker .all-dialog-row.is-active .dialog-time {
  color: #f4f8fc !important;
}

body.role-worker .telegram-chat {
  --tg-chat-bg: var(--tgw-bg);
  --tg-panel: var(--tgw-panel);
  --tg-panel-soft: var(--tgw-panel-soft);
  --tg-incoming: var(--tgw-incoming);
  --tg-outgoing: var(--tgw-outgoing);
  --tg-text: var(--tgw-text);
  --tg-muted: var(--tgw-muted);
  --tg-blue: var(--tgw-blue);
  --tg-read: var(--tgw-read);
  min-width: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--tgw-bg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.role-worker .telegram-chat::before {
  content: "" !important;
  position: absolute !important;
  inset: 54px 0 52px !important;
  z-index: 0 !important;
  opacity: .026 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle at 17px 19px, rgba(255,255,255,.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 47px 40px, rgba(255,255,255,.44) 0 1px, transparent 1.6px),
    radial-gradient(circle at 31px 54px, rgba(255,255,255,.28) 0 1px, transparent 1.4px) !important;
  background-size: 76px 76px !important;
  mix-blend-mode: screen !important;
}

body.role-worker .telegram-chat-head {
  z-index: 2 !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 6px 14px !important;
  gap: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tgw-border) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel) !important;
  box-shadow: none !important;
}

body.role-worker .telegram-chat-head .mini-avatar,
body.role-worker .telegram-chat-head .chat-avatar,
body.role-worker .telegram-chat-head .dialog-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

body.role-worker .telegram-chat-head h2,
body.role-worker .telegram-chat-head .chat-title,
body.role-worker .telegram-chat-head .dialog-title {
  color: var(--tgw-text) !important;
  font-size: 14.5px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body.role-worker .telegram-chat-head p,
body.role-worker .telegram-chat-head .chat-subtitle,
body.role-worker .telegram-chat-head .dialog-meta {
  margin-top: 1px !important;
  color: var(--tgw-muted) !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 500 !important;
}

body.role-worker .telegram-chat-head .telegram-icon-button,
body.role-worker .telegram-chat-head [data-chat-menu] {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #8799aa !important;
  box-shadow: none !important;
}

body.role-worker .telegram-chat-head .telegram-icon-button:hover,
body.role-worker .telegram-chat-head [data-chat-menu]:hover,
body.role-worker .telegram-chat-head .telegram-icon-button:focus-visible,
body.role-worker .telegram-chat-head [data-chat-menu]:focus-visible {
  background: rgba(255,255,255,.055) !important;
  color: #b7c6d5 !important;
}

body.role-worker .telegram-messages {
  z-index: 1 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-content: stretch !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 8px 18px 11px !important;
  background: transparent !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(127, 145, 163, .48) transparent !important;
}

body.role-worker .telegram-messages::-webkit-scrollbar {
  width: 5px !important;
}

body.role-worker .telegram-messages::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(127, 145, 163, .48) !important;
}

body.role-worker .telegram-messages::-webkit-scrollbar-track {
  background: transparent !important;
}

body.role-worker .telegram-empty,
body.role-worker .chat-blocked-banner {
  align-self: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(54, 69, 82, .82) !important;
  color: rgba(232, 240, 247, .88) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.16) !important;
}

body.role-worker .telegram-message {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 1px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.role-worker .telegram-message.has-direction-gap {
  margin-top: 7px !important;
}

body.role-worker .telegram-message.incoming {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: start !important;
  column-gap: 7px !important;
}

body.role-worker .telegram-message.outgoing {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: end !important;
}

body.role-worker .message-author-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  margin: 0 !important;
  align-self: end !important;
}

body.role-worker .message-inline-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
}

body.role-worker .message-author-avatar.is-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.role-worker .message-stack {
  position: relative !important;
  width: fit-content !important;
  max-width: min(486px, 58vw) !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-self: start !important;
  overflow: visible !important;
}

body.role-worker .telegram-message.outgoing .message-stack {
  align-items: flex-end !important;
  justify-self: end !important;
  max-width: min(486px, 58vw) !important;
}

body.role-worker .message-bubble {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 8px 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--tgw-incoming) !important;
  color: var(--tgw-text) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
  overflow: visible !important;
}

body.role-worker .telegram-message.outgoing .message-bubble {
  background: var(--tgw-outgoing) !important;
  color: #f4f8fc !important;
}

body.role-worker .telegram-message.incoming.is-group-first .message-bubble,
body.role-worker .telegram-message.incoming.is-group-middle .message-bubble {
  border-bottom-left-radius: 5px !important;
}

body.role-worker .telegram-message.incoming.is-group-middle .message-bubble,
body.role-worker .telegram-message.incoming.is-group-last .message-bubble {
  border-top-left-radius: 5px !important;
}

body.role-worker .telegram-message.outgoing.is-group-first .message-bubble,
body.role-worker .telegram-message.outgoing.is-group-middle .message-bubble {
  border-bottom-right-radius: 5px !important;
}

body.role-worker .telegram-message.outgoing.is-group-middle .message-bubble,
body.role-worker .telegram-message.outgoing.is-group-last .message-bubble {
  border-top-right-radius: 5px !important;
}

body.role-worker .telegram-message.incoming.is-group-single .message-bubble::after,
body.role-worker .telegram-message.incoming.is-group-last .message-bubble::after,
body.role-worker .telegram-message.outgoing.is-group-single .message-bubble::after,
body.role-worker .telegram-message.outgoing.is-group-last .message-bubble::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 9px !important;
  height: 12px !important;
  pointer-events: none !important;
  background: inherit !important;
}

body.role-worker .telegram-message.incoming.is-group-single .message-bubble::after,
body.role-worker .telegram-message.incoming.is-group-last .message-bubble::after {
  left: -4px !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
}

body.role-worker .telegram-message.outgoing.is-group-single .message-bubble::after,
body.role-worker .telegram-message.outgoing.is-group-last .message-bubble::after {
  right: -4px !important;
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
}

body.role-worker .message-text {
  display: inline !important;
  color: inherit !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  font-size: 13px !important;
  line-height: 1.32 !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
}

body.role-worker .message-footer {
  float: right !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  min-height: 13px !important;
  margin: 4px 0 0 8px !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: translateY(1px) !important;
}

body.role-worker .message-time {
  position: static !important;
  color: rgba(221, 232, 240, .58) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

body.role-worker .telegram-message.outgoing .message-time {
  color: rgba(216, 238, 255, .66) !important;
}

body.role-worker .message-ticks {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--tgw-read) !important;
  line-height: 1 !important;
}

body.role-worker .message-ticks-icon {
  width: 15px !important;
  height: 10px !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
}

body.role-worker .message-ticks.is-sent .message-ticks-icon {
  width: 12px !important;
}

body.role-worker .message-status-spinner {
  width: 12px !important;
  height: 12px !important;
  border-width: 2px !important;
  color: rgba(216, 238, 255, .7) !important;
}

body.role-worker .message-status-failed {
  color: var(--tgw-danger) !important;
}

body.role-worker .message-day {
  align-self: center !important;
  margin: 9px auto !important;
  padding: 4px 9px !important;
  min-height: 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(54, 69, 82, .82) !important;
  color: rgba(232, 240, 247, .86) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.16) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

body.role-worker .bubble-reply.message-reply-preview {
  width: 100% !important;
  margin: 0 0 5px !important;
  padding: 5px 7px 5px 9px !important;
  border: 0 !important;
  border-left: 2px solid var(--tgw-blue) !important;
  border-radius: 7px !important;
  background: rgba(51, 144, 236, .12) !important;
}

body.role-worker .telegram-message.outgoing .bubble-reply.message-reply-preview {
  border-left-color: #91d4ff !important;
  background: rgba(9, 30, 48, .24) !important;
}

body.role-worker .bubble-reply.message-reply-preview strong {
  color: #8ed1ff !important;
  font-size: 11.5px !important;
  line-height: 14px !important;
  font-weight: 800 !important;
}

body.role-worker .bubble-reply.message-reply-preview span {
  color: rgba(231, 238, 245, .78) !important;
  font-size: 11.5px !important;
  line-height: 14px !important;
}

body.role-worker .message-reactions {
  display: flex !important;
  gap: 3px !important;
  min-height: 0 !important;
  margin-top: -1px !important;
  padding: 0 5px !important;
  transform: translateY(1px) !important;
}

body.role-worker .message-reactions.is-empty {
  display: none !important;
}

body.role-worker .telegram-message.outgoing .message-reactions {
  justify-content: flex-end !important;
}

body.role-worker .message-reaction {
  height: 18px !important;
  min-height: 18px !important;
  padding: 1px 6px !important;
  border: 1px solid rgba(84, 118, 148, .42) !important;
  border-radius: 999px !important;
  background: rgba(24, 37, 51, .96) !important;
  color: #edf6ff !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.2) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

body.role-worker .message-reaction.is-mine,
body.role-worker .message-reaction.is-chosen {
  border-color: rgba(142, 209, 255, .72) !important;
  background: rgba(43, 92, 135, .98) !important;
}

body.role-worker .message-stack > .message-actions {
  position: absolute !important;
  inset: auto auto calc(100% + 5px) 0 !important;
  z-index: 36 !important;
  min-width: 126px !important;
  width: 126px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px !important;
  gap: 3px !important;
  border: 1px solid rgba(127, 145, 163, .12) !important;
  border-radius: 999px !important;
  background: rgba(23, 33, 43, .88) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(4px) scale(.98) !important;
  transition:
    opacity 120ms cubic-bezier(.2,.8,.2,1),
    transform 120ms cubic-bezier(.2,.8,.2,1) !important;
}

body.role-worker .telegram-message.outgoing .message-stack > .message-actions {
  right: 0 !important;
  left: auto !important;
}

body.role-worker .telegram-message:hover .message-stack > .message-actions,
body.role-worker .telegram-message:focus-within .message-stack > .message-actions,
body.role-worker .telegram-message.is-picker-open .message-stack > .message-actions,
body.role-worker .telegram-message.is-action-menu-open .message-stack > .message-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

body.role-worker .message-stack > .message-actions > button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #8799aa !important;
}

body.role-worker .message-stack > .message-actions > button:hover,
body.role-worker .message-stack > .message-actions > button:focus-visible,
body.role-worker .telegram-message.is-picker-open .message-reaction-trigger,
body.role-worker .telegram-message.is-action-menu-open .message-menu-trigger {
  background: rgba(51, 144, 236, .12) !important;
  color: #8ed1ff !important;
}

body.role-worker .reaction-picker {
  min-height: 42px !important;
  padding: 5px !important;
  gap: 3px !important;
  border: 1px solid rgba(127, 145, 163, .14) !important;
  border-radius: 999px !important;
  background: rgba(23, 33, 43, .96) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.32) !important;
}

body.role-worker .reaction-picker button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: transparent !important;
  font-size: 19px !important;
}

body.role-worker .message-action-menu {
  min-width: 178px !important;
  padding: 6px !important;
  border: 1px solid rgba(127, 145, 163, .14) !important;
  border-radius: 12px !important;
  background: rgba(23, 33, 43, .96) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
}

body.role-worker .message-action-menu .message-action-row {
  min-height: 36px !important;
  padding: 8px 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #e7eef5 !important;
}

body.role-worker .message-action-menu .message-action-row:hover,
body.role-worker .message-action-menu .message-action-row:focus-visible {
  background: rgba(255,255,255,.055) !important;
}

body.role-worker .message-action-menu .message-action-row.is-danger {
  color: #ff7b8a !important;
}

body.role-worker .telegram-message.has-photo-media .message-bubble {
  max-width: min(430px, 76vw) !important;
  padding: 2px !important;
  border-radius: 13px !important;
}

body.role-worker .telegram-message.has-photo-media .telegram-photo-card {
  width: min(420px, 76vw) !important;
  min-width: min(300px, 70vw) !important;
  border-radius: 12px !important;
  background: #101b27 !important;
}

body.role-worker .telegram-message.has-photo-media .telegram-photo-button,
body.role-worker .telegram-message.has-photo-media .telegram-photo-button img {
  border-radius: 11px !important;
}

body.role-worker .telegram-message.is-photo-only .message-footer {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: rgba(6, 12, 20, .58) !important;
  color: #fff !important;
}

body.role-worker .reply-preview,
body.role-worker .composer-notice {
  z-index: 2 !important;
  border-top: 1px solid var(--tgw-border) !important;
  background: var(--tgw-panel) !important;
  color: var(--tgw-text) !important;
}

body.role-worker .telegram-composer {
  z-index: 2 !important;
  min-height: 52px !important;
  grid-template-columns: 34px minmax(0, 1fr) 36px 42px !important;
  gap: 5px !important;
  align-items: end !important;
  padding: 7px 12px 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--tgw-border) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel) !important;
  box-shadow: none !important;
}

body.role-worker .telegram-textarea {
  min-height: 36px !important;
  max-height: 118px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--tgw-text) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  resize: none !important;
}

body.role-worker .telegram-textarea::placeholder {
  color: var(--tgw-muted) !important;
}

body.role-worker .telegram-composer .telegram-icon-button,
body.role-worker .composer-emoji-button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #7f91a3 !important;
  box-shadow: none !important;
}

body.role-worker .telegram-composer .telegram-icon-button:hover,
body.role-worker .telegram-composer .telegram-icon-button:focus-visible,
body.role-worker .composer-emoji-button:hover,
body.role-worker .composer-emoji-button:focus-visible,
body.role-worker .composer-emoji-button.is-open {
  background: rgba(51, 144, 236, .10) !important;
  color: #8ed1ff !important;
}

body.role-worker .emoji-face-icon {
  width: 21px !important;
  height: 21px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.65 !important;
}

body.role-worker .emoji-face-icon .emoji-eye {
  fill: currentColor !important;
  stroke: none !important;
}

body.role-worker .telegram-send {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5aa9ff !important;
  box-shadow: none !important;
  font-size: 23px !important;
}

body.role-worker .telegram-send:hover,
body.role-worker .telegram-send:focus-visible {
  background: rgba(51, 144, 236, .10) !important;
  color: #8ed1ff !important;
}

body.role-worker .inbox-toast-layer {
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
}

@media (min-width: 1600px) {
  body.role-worker .telegram-messages {
    padding-left: 20px !important;
    padding-right: 28px !important;
  }

  body.role-worker .message-stack,
  body.role-worker .telegram-message.outgoing .message-stack {
    max-width: 490px !important;
  }
}

@media (max-width: 900px) {
  body.role-worker .telegram-shell,
  body.role-worker .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  body.role-worker .telegram-shell.is-chat-open .telegram-accounts,
  body.role-worker .telegram-shell.is-chat-open .telegram-left {
    display: none !important;
  }

  body.role-worker .telegram-shell:not(.is-chat-open) .telegram-chat {
    display: none !important;
  }

  body.role-worker .telegram-message:hover .message-stack > .message-actions,
  body.role-worker .telegram-message:focus-within .message-stack > .message-actions {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(4px) scale(.98) !important;
  }

  body.role-worker .telegram-message.is-picker-open .message-stack > .message-actions,
  body.role-worker .telegram-message.is-action-menu-open .message-stack > .message-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  body.role-worker .telegram-accounts,
  body.role-worker .telegram-left,
  body.role-worker .telegram-chat {
    width: 100vw !important;
    height: 100vh !important;
  }
}

@media (max-width: 720px) {
  body.role-worker .telegram-chat::before {
    inset: 54px 0 54px !important;
    opacity: .02 !important;
  }

  body.role-worker .telegram-chat-head {
    height: 54px !important;
    min-height: 54px !important;
    padding: 7px 10px !important;
  }

  body.role-worker .telegram-messages {
    padding: 8px 8px 10px !important;
  }

  body.role-worker .telegram-message.incoming {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  body.role-worker .message-author-avatar,
  body.role-worker .message-inline-avatar {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }

  body.role-worker .message-stack,
  body.role-worker .telegram-message.outgoing .message-stack {
    max-width: 86vw !important;
  }

  body.role-worker .message-bubble {
    border-radius: 11px !important;
    padding: 6px 8px 5px !important;
  }

  body.role-worker .message-stack > .message-actions {
    min-width: 136px !important;
    width: 136px !important;
    height: 46px !important;
    bottom: calc(100% + 5px) !important;
  }

  body.role-worker .message-stack > .message-actions > button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  body.role-worker .telegram-composer {
    min-height: 54px !important;
    grid-template-columns: 34px minmax(0, 1fr) 38px 42px !important;
    padding: 7px 8px 9px !important;
  }
}

/* Desktop-only final pass: match Telegram Web conversation details more closely. */
@media (min-width: 901px) {
  body.role-worker,
  body.role-worker button,
  body.role-worker input,
  body.role-worker textarea {
    font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  }

  body.role-worker .telegram-chat::before {
    opacity: .014 !important;
    background-size: 82px 82px !important;
  }

  body.role-worker .telegram-chat-head {
    height: 52px !important;
    min-height: 52px !important;
    padding: 6px 14px !important;
  }

  body.role-worker .telegram-chat-head .mini-avatar,
  body.role-worker .telegram-chat-head .chat-avatar,
  body.role-worker .telegram-chat-head .dialog-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  body.role-worker .telegram-chat-head h2,
  body.role-worker .telegram-chat-head .chat-title,
  body.role-worker .telegram-chat-head .dialog-title {
    font-size: 14px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
  }

  body.role-worker .telegram-chat-head p,
  body.role-worker .telegram-chat-head .chat-subtitle,
  body.role-worker .telegram-chat-head .dialog-meta {
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 400 !important;
  }

  body.role-worker .telegram-messages {
    padding: 8px 18px 10px !important;
  }

  body.role-worker .message-stack,
  body.role-worker .telegram-message.outgoing .message-stack {
    max-width: min(470px, 54vw) !important;
  }

  body.role-worker .message-bubble {
    padding: 5px 8px 4px !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .20) !important;
  }

  body.role-worker .telegram-message.incoming.is-group-first .message-bubble,
  body.role-worker .telegram-message.incoming.is-group-middle .message-bubble {
    border-bottom-left-radius: 4px !important;
  }

  body.role-worker .telegram-message.incoming.is-group-middle .message-bubble,
  body.role-worker .telegram-message.incoming.is-group-last .message-bubble {
    border-top-left-radius: 4px !important;
  }

  body.role-worker .telegram-message.outgoing.is-group-first .message-bubble,
  body.role-worker .telegram-message.outgoing.is-group-middle .message-bubble {
    border-bottom-right-radius: 4px !important;
  }

  body.role-worker .telegram-message.outgoing.is-group-middle .message-bubble,
  body.role-worker .telegram-message.outgoing.is-group-last .message-bubble {
    border-top-right-radius: 4px !important;
  }

  body.role-worker .message-text {
    font-size: 13px !important;
    line-height: 1.32 !important;
    font-weight: 400 !important;
    text-shadow: none !important;
  }

  body.role-worker .message-footer {
    gap: 2px !important;
    margin: 4px 0 0 7px !important;
    transform: translateY(1px) !important;
  }

  body.role-worker .message-time {
    font-size: 10.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  body.role-worker .message-ticks-icon {
    width: 14px !important;
    height: 9px !important;
    stroke-width: 1.6 !important;
  }

  body.role-worker .message-ticks.is-sent .message-ticks-icon {
    width: 11px !important;
  }

  body.role-worker .message-day {
    min-height: 20px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    line-height: 12px !important;
    font-weight: 600 !important;
  }

  body.role-worker .bubble-reply.message-reply-preview {
    border-left-width: 2px !important;
    border-radius: 6px !important;
    padding: 4px 7px 4px 8px !important;
  }

  body.role-worker .bubble-reply.message-reply-preview strong,
  body.role-worker .bubble-reply.message-reply-preview span {
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 400 !important;
  }

  body.role-worker .bubble-reply.message-reply-preview strong {
    font-weight: 600 !important;
  }

  body.role-worker .message-stack > .message-actions {
    width: 118px !important;
    min-width: 118px !important;
    height: 38px !important;
    padding: 3px !important;
    background: rgba(23, 33, 43, .82) !important;
    border-color: rgba(127, 145, 163, .10) !important;
  }

  body.role-worker .message-stack > .message-actions > button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  body.role-worker .telegram-composer {
    min-height: 52px !important;
    grid-template-columns: 36px minmax(0, 1fr) 38px 42px !important;
    gap: 6px !important;
    padding: 7px 13px 8px !important;
  }

  body.role-worker #attachButton,
  body.role-worker .telegram-send {
    font-size: 0 !important;
    position: relative !important;
  }

  body.role-worker #attachButton::before,
  body.role-worker .telegram-send::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: auto !important;
    background-color: currentColor !important;
  }

  body.role-worker #attachButton::before {
    width: 21px !important;
    height: 21px !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M8.3 12.3 14.9 5.7a4.2 4.2 0 0 1 5.9 5.9L10.3 22.1a6 6 0 0 1-8.5-8.5L12.1 3.3a2.8 2.8 0 0 1 4 4L6.5 16.9'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M8.3 12.3 14.9 5.7a4.2 4.2 0 0 1 5.9 5.9L10.3 22.1a6 6 0 0 1-8.5-8.5L12.1 3.3a2.8 2.8 0 0 1 4 4L6.5 16.9'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.role-worker .telegram-send::before {
    width: 24px !important;
    height: 24px !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M21.8 3.7 18.4 20c-.2 1-.8 1.2-1.6.8l-5-3.7-2.4 2.3c-.3.3-.5.5-1 .5l.4-5.1 9.4-8.5c.4-.4-.1-.6-.6-.2L6 13.4 1 11.8c-1-.3-1-1 0-1.4L20.3 3c.9-.3 1.7.2 1.5.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M21.8 3.7 18.4 20c-.2 1-.8 1.2-1.6.8l-5-3.7-2.4 2.3c-.3.3-.5.5-1 .5l.4-5.1 9.4-8.5c.4-.4-.1-.6-.6-.2L6 13.4 1 11.8c-1-.3-1-1 0-1.4L20.3 3c.9-.3 1.7.2 1.5.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.role-worker .telegram-textarea {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }

  body.role-worker .telegram-message.has-photo-media .telegram-photo-card {
    width: min(420px, 54vw) !important;
    min-width: min(260px, 42vw) !important;
  }
}

/* Worker desktop hard reset: open dialog owns its visuals, old app styles stop here. */
@media (min-width: 901px) {
  body.role-worker .telegram-chat,
  body.role-worker .telegram-chat *,
  body.role-worker .telegram-chat *::before,
  body.role-worker .telegram-chat *::after {
    box-sizing: border-box !important;
  }

  body.role-worker .telegram-chat {
    isolation: isolate !important;
    background-color: #0e1621 !important;
    background-image: none !important;
  }

  body.role-worker .telegram-chat::before {
    inset: 52px 0 52px !important;
    opacity: .018 !important;
    background-image:
      radial-gradient(circle at 18px 20px, rgba(255,255,255,.54) 0 1px, transparent 1.6px),
      radial-gradient(circle at 51px 42px, rgba(255,255,255,.30) 0 1px, transparent 1.5px) !important;
    background-size: 84px 84px !important;
  }

  body.role-worker .telegram-chat-head {
    height: 52px !important;
    min-height: 52px !important;
    padding: 6px 16px !important;
    background: #17212b !important;
    border-bottom: 1px solid #0b141d !important;
  }

  body.role-worker .telegram-chat-head .mini-avatar,
  body.role-worker .telegram-chat-head .chat-avatar,
  body.role-worker .telegram-chat-head .dialog-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  body.role-worker .telegram-messages {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 0 10px !important;
    background: transparent !important;
  }

  body.role-worker .telegram-message {
    width: min(100%, 780px) !important;
    align-self: center !important;
    justify-self: auto !important;
    margin: 1px auto !important;
    padding: 0 10px !important;
    display: grid !important;
    overflow: visible !important;
  }

  body.role-worker .telegram-message.incoming {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    justify-items: start !important;
  }

  body.role-worker .telegram-message.outgoing {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: end !important;
  }

  body.role-worker .message-stack,
  body.role-worker .telegram-message.outgoing .message-stack {
    width: fit-content !important;
    max-width: min(480px, calc(100vw - 560px)) !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.role-worker .message-bubble,
  body.role-worker .telegram-message.incoming .message-bubble,
  body.role-worker .telegram-message.outgoing .message-bubble {
    display: inline-block !important;
    position: relative !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px 8px 4px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 1px 1px rgba(0,0,0,.20) !important;
    overflow: visible !important;
    text-align: left !important;
  }

  body.role-worker .telegram-message.incoming .message-bubble {
    background: #182533 !important;
    color: #e7eef5 !important;
  }

  body.role-worker .telegram-message.outgoing .message-bubble {
    background: #2b5278 !important;
    color: #f4f8fc !important;
  }

  body.role-worker .telegram-message.is-group-single .message-bubble {
    border-radius: 10px !important;
  }

  body.role-worker .telegram-message.incoming.is-group-single .message-bubble,
  body.role-worker .telegram-message.incoming.is-group-last .message-bubble {
    border-bottom-left-radius: 4px !important;
  }

  body.role-worker .telegram-message.outgoing.is-group-single .message-bubble,
  body.role-worker .telegram-message.outgoing.is-group-last .message-bubble {
    border-bottom-right-radius: 4px !important;
  }

  body.role-worker .telegram-message.incoming.is-group-first .message-bubble,
  body.role-worker .telegram-message.incoming.is-group-middle .message-bubble {
    border-bottom-left-radius: 4px !important;
  }

  body.role-worker .telegram-message.incoming.is-group-middle .message-bubble,
  body.role-worker .telegram-message.incoming.is-group-last .message-bubble {
    border-top-left-radius: 4px !important;
  }

  body.role-worker .telegram-message.outgoing.is-group-first .message-bubble,
  body.role-worker .telegram-message.outgoing.is-group-middle .message-bubble {
    border-bottom-right-radius: 4px !important;
  }

  body.role-worker .telegram-message.outgoing.is-group-middle .message-bubble,
  body.role-worker .telegram-message.outgoing.is-group-last .message-bubble {
    border-top-right-radius: 4px !important;
  }

  body.role-worker .message-text {
    display: inline !important;
    color: inherit !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  body.role-worker .message-footer {
    position: static !important;
    float: right !important;
    display: inline-flex !important;
    width: auto !important;
    height: 13px !important;
    min-height: 13px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    margin: 4px 0 0 7px !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: translateY(1px) !important;
    background: transparent !important;
  }

  body.role-worker .message-time {
    position: static !important;
    inset: auto !important;
    color: rgba(221,232,240,.56) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  body.role-worker .telegram-message.outgoing .message-time {
    color: rgba(216,238,255,.66) !important;
  }

  body.role-worker .message-ticks,
  body.role-worker .message-status-spinner,
  body.role-worker .message-status-failed {
    position: static !important;
    margin: 0 0 0 1px !important;
    transform: none !important;
  }

  body.role-worker .message-ticks-icon {
    display: block !important;
    width: 14px !important;
    height: 9px !important;
  }

  body.role-worker .message-ticks.is-sent .message-ticks-icon {
    width: 11px !important;
  }

  body.role-worker .message-day {
    width: auto !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 9px auto !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: rgba(54,69,82,.82) !important;
    color: rgba(232,240,247,.86) !important;
    box-shadow: 0 1px 1px rgba(0,0,0,.16) !important;
    font-size: 11px !important;
    line-height: 12px !important;
    font-weight: 600 !important;
  }

  body.role-worker .message-author-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    align-self: end !important;
    margin: 0 !important;
  }

  body.role-worker .message-inline-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
  }

  body.role-worker .message-stack > .message-actions {
    position: absolute !important;
    z-index: 50 !important;
    top: auto !important;
    bottom: calc(100% + 5px) !important;
    left: 0 !important;
    right: auto !important;
    width: 118px !important;
    min-width: 118px !important;
    height: 38px !important;
    display: flex !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(4px) scale(.98) !important;
  }

  body.role-worker .telegram-message.outgoing .message-stack > .message-actions {
    right: 0 !important;
    left: auto !important;
  }

  body.role-worker .telegram-message:hover .message-stack > .message-actions,
  body.role-worker .telegram-message:focus-within .message-stack > .message-actions,
  body.role-worker .telegram-message.is-picker-open .message-stack > .message-actions,
  body.role-worker .telegram-message.is-action-menu-open .message-stack > .message-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  body.role-worker .telegram-composer {
    height: 52px !important;
    min-height: 52px !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px 42px !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: #17212b !important;
    border-top: 1px solid #0b141d !important;
  }

  body.role-worker .telegram-textarea {
    min-height: 38px !important;
    height: 38px !important;
    padding: 9px 10px !important;
    background: transparent !important;
    color: #e7eef5 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  body.role-worker #attachButton,
  body.role-worker #emojiButton,
  body.role-worker .telegram-send {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    color: #8396a8 !important;
  }

  body.role-worker .telegram-send {
    color: #5aa9ff !important;
  }

  body.role-worker #attachButton:hover,
  body.role-worker #emojiButton:hover,
  body.role-worker .telegram-send:hover {
    background: rgba(255,255,255,.055) !important;
  }
}

/* Worker desktop v2: closer Telegram Web feel for wallpaper, side actions and composer geometry. */
@media (min-width: 901px) {
  body.role-worker .telegram-chat {
    background: #0e1621 !important;
  }

  body.role-worker .telegram-chat::before {
    inset: 52px 0 52px !important;
    opacity: .30 !important;
    background-image:
      url("data:image/svg+xml,%3Csvg width='144' height='144' viewBox='0 0 144 144' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23283847' stroke-opacity='.36' stroke-width='1'%3E%3Cpath d='M22 24c9-8 21-7 28 0'/%3E%3Cpath d='M92 22h25v15H92z' rx='6'/%3E%3Cpath d='M33 91c12 0 19 7 19 18'/%3E%3Cpath d='M101 91c9-7 18-7 26 0'/%3E%3Cpath d='M15 126h25M104 126h22'/%3E%3C/g%3E%3Cg fill='%23283847' fill-opacity='.26'%3E%3Ccircle cx='23' cy='54' r='2'/%3E%3Ccircle cx='72' cy='38' r='1.6'/%3E%3Ccircle cx='126' cy='63' r='2'/%3E%3Ccircle cx='72' cy='112' r='2'/%3E%3Cpath d='M63 67 70 62l7 5-7 5z'/%3E%3Cpath d='M118 105 124 101l6 4-6 4z'/%3E%3C/g%3E%3C/svg%3E"),
      radial-gradient(circle at 30% 20%, rgba(51,144,236,.045), transparent 24%),
      linear-gradient(180deg, rgba(12,20,30,.12), rgba(12,20,30,.02)) !important;
    background-size: 144px 144px, 100% 100%, 100% 100% !important;
    background-position: center top, center, center !important;
    mix-blend-mode: normal !important;
  }

  body.role-worker .telegram-messages {
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  body.role-worker .telegram-message {
    width: min(100%, 860px) !important;
  }

  body.role-worker .message-stack,
  body.role-worker .telegram-message.outgoing .message-stack {
    max-width: min(510px, calc(100vw - 540px)) !important;
  }

  body.role-worker .message-bubble,
  body.role-worker .telegram-message.incoming .message-bubble,
  body.role-worker .telegram-message.outgoing .message-bubble {
    padding: 5px 8px 4px !important;
    border-radius: 10px !important;
  }

  body.role-worker .message-stack > .message-actions {
    top: 50% !important;
    bottom: auto !important;
    left: calc(100% + 8px) !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 !important;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transform: translateY(-50%) translateX(-4px) !important;
  }

  body.role-worker .telegram-message.outgoing .message-stack > .message-actions {
    right: calc(100% + 8px) !important;
    left: auto !important;
    transform: translateY(-50%) translateX(4px) !important;
  }

  body.role-worker .telegram-message:hover .message-stack > .message-actions,
  body.role-worker .telegram-message:focus-within .message-stack > .message-actions,
  body.role-worker .telegram-message.is-picker-open .message-stack > .message-actions,
  body.role-worker .telegram-message.is-action-menu-open .message-stack > .message-actions {
    transform: translateY(-50%) translateX(0) !important;
  }

  body.role-worker .message-stack > .message-actions > button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(23, 33, 43, .72) !important;
    color: #8396a8 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
  }

  body.role-worker .message-stack > .message-actions > button:hover,
  body.role-worker .message-stack > .message-actions > button:focus-visible,
  body.role-worker .telegram-message.is-picker-open .message-reaction-trigger,
  body.role-worker .telegram-message.is-action-menu-open .message-menu-trigger {
    background: rgba(36, 47, 61, .92) !important;
    color: #8ed1ff !important;
  }

  body.role-worker .reaction-picker {
    border-radius: 18px !important;
    background: rgba(23, 33, 43, .96) !important;
    border: 1px solid rgba(127,145,163,.14) !important;
  }

  body.role-worker .telegram-composer {
    min-height: 52px !important;
    height: 52px !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px 44px !important;
    gap: 4px !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: #17212b !important;
  }

  body.role-worker .telegram-textarea {
    height: 40px !important;
    min-height: 40px !important;
    padding: 10px 8px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #dfe8f0 !important;
  }

  body.role-worker .telegram-textarea::placeholder {
    color: #7f91a3 !important;
  }

  body.role-worker #attachButton,
  body.role-worker #emojiButton,
  body.role-worker .telegram-send {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
  }

  body.role-worker #attachButton,
  body.role-worker #emojiButton {
    color: #8396a8 !important;
  }

  body.role-worker .telegram-send {
    color: #5aa9ff !important;
  }

  body.role-worker #attachButton:hover,
  body.role-worker #emojiButton:hover,
  body.role-worker .telegram-send:hover {
    background: rgba(255,255,255,.06) !important;
  }
}

/* Worker desktop v3: Telegram Web spacing correction. Full-width rows, compact bubbles, crisp wallpaper. */
@media (min-width: 901px) {
  body.role-worker .telegram-chat {
    background: #0e1621 !important;
  }

  body.role-worker .telegram-chat::before {
    inset: 52px 0 52px !important;
    opacity: .18 !important;
    background-image:
      url("data:image/svg+xml,%3Csvg width='360' height='360' viewBox='0 0 360 360' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2321313f' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 48c16-14 39-14 55 0M61 38v38M42 68h38' opacity='.38'/%3E%3Cpath d='M237 35h52a10 10 0 0 1 10 10v28a10 10 0 0 1-10 10h-52a10 10 0 0 1-10-10V45a10 10 0 0 1 10-10Z' opacity='.28'/%3E%3Cpath d='M256 83l-11 18 27-18' opacity='.28'/%3E%3Cpath d='M70 160c24 0 43 19 43 43M82 203h31' opacity='.24'/%3E%3Cpath d='M220 154c22-18 50-18 72 0M243 140l26 28M269 140l-26 28' opacity='.24'/%3E%3Cpath d='M42 287c24-18 54-18 78 0M63 276h36' opacity='.30'/%3E%3Cpath d='M235 273 296 247l-20 66-17-28-24-12Z' opacity='.30'/%3E%3C/g%3E%3Cg fill='%2321313f' opacity='.22'%3E%3Ccircle cx='166' cy='58' r='2'/%3E%3Ccircle cx='326' cy='116' r='2'/%3E%3Ccircle cx='151' cy='247' r='2'/%3E%3Ccircle cx='314' cy='318' r='2'/%3E%3Cpath d='M158 140 168 134l10 6-10 6z'/%3E%3Cpath d='M31 224 39 219l8 5-8 5z'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 360px 360px !important;
    background-position: center top !important;
    background-repeat: repeat !important;
    mix-blend-mode: normal !important;
  }

  body.role-worker .telegram-messages {
    padding: 10px 0 12px !important;
  }

  body.role-worker .telegram-message {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    margin: 1px 0 !important;
    padding: 0 18px !important;
  }

  body.role-worker .telegram-message.incoming {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    justify-items: start !important;
    column-gap: 7px !important;
  }

  body.role-worker .telegram-message.outgoing {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: end !important;
  }

  body.role-worker .message-stack,
  body.role-worker .telegram-message.outgoing .message-stack {
    max-width: min(520px, 56vw) !important;
  }

  body.role-worker .message-bubble,
  body.role-worker .telegram-message.incoming .message-bubble,
  body.role-worker .telegram-message.outgoing .message-bubble {
    padding: 5px 8px 4px !important;
    border-radius: 10px !important;
  }

  body.role-worker .message-stack > .message-actions {
    top: 50% !important;
    bottom: auto !important;
    left: calc(100% + 8px) !important;
    right: auto !important;
  }

  body.role-worker .telegram-message.outgoing .message-stack > .message-actions {
    right: calc(100% + 8px) !important;
    left: auto !important;
  }

  body.role-worker .message-stack > .message-actions > button {
    background: rgba(23,33,43,.78) !important;
  }

  body.role-worker .telegram-composer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Worker desktop composer v4: exact bottom-bar geometry pass. */
@media (min-width: 901px) {
  body.role-worker .telegram-composer {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px 44px !important;
    gap: 4px !important;
    align-items: center !important;
    padding: 0 12px 0 14px !important;
    border-top: 1px solid rgba(9, 18, 27, .95) !important;
    background: #17212b !important;
    box-shadow: none !important;
  }

  body.role-worker .telegram-textarea {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 15px 4px 12px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #e7eef5 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    overflow-y: hidden !important;
  }

  body.role-worker .telegram-textarea::placeholder {
    color: #7f91a3 !important;
    opacity: 1 !important;
  }

  body.role-worker #attachButton,
  body.role-worker #emojiButton,
  body.role-worker .telegram-send {
    align-self: center !important;
    justify-self: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-grid !important;
    place-items: center !important;
  }

  body.role-worker #attachButton {
    justify-self: start !important;
    color: #8a9bad !important;
  }

  body.role-worker #emojiButton {
    justify-self: end !important;
    color: #8a9bad !important;
  }

  body.role-worker .telegram-send {
    justify-self: end !important;
    color: #54a8ff !important;
  }

  body.role-worker #attachButton:hover,
  body.role-worker #emojiButton:hover,
  body.role-worker .telegram-send:hover,
  body.role-worker #attachButton:focus-visible,
  body.role-worker #emojiButton:focus-visible,
  body.role-worker .telegram-send:focus-visible {
    background: rgba(255, 255, 255, .055) !important;
  }

  body.role-worker #attachButton::before {
    width: 23px !important;
    height: 23px !important;
  }

  body.role-worker #emojiButton .emoji-face-icon {
    width: 23px !important;
    height: 23px !important;
    stroke-width: 1.6 !important;
  }

  body.role-worker .telegram-send::before {
    width: 25px !important;
    height: 25px !important;
    transform: translateX(1px) !important;
  }
}

/* Worker desktop v5: Telegram Web-inspired centered chat lane and composer action swap. */
@media (min-width: 901px) {
  body.role-worker .telegram-chat.is-empty-dialog .reply-preview,
  body.role-worker .telegram-chat.is-empty-dialog .composer-notice,
  body.role-worker .telegram-chat.is-empty-dialog .telegram-composer {
    display: none !important;
  }

  body.role-worker .telegram-chat.is-empty-dialog {
    background: #0e1621 !important;
  }

  body.role-worker .telegram-messages {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.role-worker .telegram-message {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.role-worker .message-stack,
  body.role-worker .telegram-message.outgoing .message-stack {
    max-width: min(560px, 58vw) !important;
  }

  body.role-worker .telegram-composer {
    grid-template-columns: 42px minmax(0, 1fr) 42px 46px !important;
    gap: 2px !important;
    padding: 0 12px !important;
  }

  body.role-worker #emojiButton {
    order: 1 !important;
    justify-self: start !important;
  }

  body.role-worker .telegram-textarea {
    order: 2 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.role-worker #attachButton {
    order: 3 !important;
    justify-self: end !important;
  }

  body.role-worker .telegram-send {
    order: 4 !important;
    justify-self: end !important;
    transition:
      background-color 140ms cubic-bezier(.2,.8,.2,1),
      color 140ms cubic-bezier(.2,.8,.2,1),
      transform 140ms cubic-bezier(.2,.9,.25,1.12),
      opacity 140ms cubic-bezier(.2,.8,.2,1) !important;
  }

  body.role-worker .telegram-send::before {
    transition:
      opacity 120ms cubic-bezier(.2,.8,.2,1),
      transform 160ms cubic-bezier(.2,.9,.25,1.12),
      -webkit-mask-image 1ms linear,
      mask-image 1ms linear !important;
  }

  body.role-worker .telegram-send.is-voice {
    color: #8a9bad !important;
  }

  body.role-worker .telegram-send.is-send-ready {
    color: #54a8ff !important;
  }

  body.role-worker .telegram-send.is-voice::before {
    width: 23px !important;
    height: 23px !important;
    transform: translateX(0) scale(1) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='8' height='12' rx='4'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='8' height='12' rx='4'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.role-worker .telegram-send.is-send-ready::before,
  body.role-worker .telegram-send.is-sending::before {
    width: 25px !important;
    height: 25px !important;
    transform: translateX(1px) scale(1) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M21.8 3.7 18.4 20c-.2 1-.8 1.2-1.6.8l-5-3.7-2.4 2.3c-.3.3-.5.5-1 .5l.4-5.1 9.4-8.5c.4-.4-.1-.6-.6-.2L6 13.4 1 11.8c-1-.3-1-1 0-1.4L20.3 3c.9-.3 1.7.2 1.5.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M21.8 3.7 18.4 20c-.2 1-.8 1.2-1.6.8l-5-3.7-2.4 2.3c-.3.3-.5.5-1 .5l.4-5.1 9.4-8.5c.4-.4-.1-.6-.6-.2L6 13.4 1 11.8c-1-.3-1-1 0-1.4L20.3 3c.9-.3 1.7.2 1.5.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.role-worker .telegram-send.is-recording {
    color: #ff6b7d !important;
    background: rgba(224,82,100,.12) !important;
    animation: voiceButtonPress 850ms cubic-bezier(.2,.8,.2,1) both !important;
  }

  body.role-worker .telegram-send.is-recording::after {
    content: "" !important;
    position: absolute !important;
    inset: 3px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(224,82,100,.42) !important;
    animation: voiceRecordRing 850ms cubic-bezier(.16,1,.3,1) both !important;
  }
}

@keyframes voiceButtonPress {
  0% { transform: scale(1); }
  18% { transform: scale(.92); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes voiceRecordRing {
  0% { opacity: .75; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.32); }
}

/* Worker desktop v6: rounded Telegram Web composer and cleaner message scale. */
@media (min-width: 901px) {
  body.role-worker .telegram-chat {
    background: #0d1621 !important;
  }

  body.role-worker .telegram-messages {
    width: min(100%, 960px) !important;
    max-width: 960px !important;
    padding: 14px 20px 18px !important;
  }

  body.role-worker .message-stack,
  body.role-worker .telegram-message.outgoing .message-stack {
    max-width: min(548px, 56vw) !important;
  }

  body.role-worker .message-bubble,
  body.role-worker .telegram-message.incoming .message-bubble,
  body.role-worker .telegram-message.outgoing .message-bubble {
    padding: 6px 9px 5px !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .16) !important;
  }

  body.role-worker .message-text {
    font-size: 14px !important;
    line-height: 1.36 !important;
    font-weight: 400 !important;
  }

  body.role-worker .message-time {
    font-size: 10.5px !important;
    opacity: .94 !important;
  }

  body.role-worker .message-footer {
    margin: 5px 0 0 8px !important;
  }

  body.role-worker .telegram-composer {
    width: min(940px, calc(100% - 32px)) !important;
    max-width: 940px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 auto 10px !important;
    padding: 4px 8px 4px 10px !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px 46px !important;
    gap: 2px !important;
    border: 1px solid rgba(127, 145, 163, .10) !important;
    border-radius: 18px !important;
    background: #17212b !important;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, .18),
      inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  }

  body.role-worker .telegram-textarea {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 13px 8px 10px !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  body.role-worker #emojiButton,
  body.role-worker #attachButton,
  body.role-worker .telegram-send {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    color: #8799aa !important;
    transition:
      background-color 120ms cubic-bezier(.2,.8,.2,1),
      color 120ms cubic-bezier(.2,.8,.2,1),
      transform 120ms cubic-bezier(.2,.9,.25,1.12) !important;
  }

  body.role-worker #emojiButton:hover,
  body.role-worker #emojiButton:focus-visible,
  body.role-worker #emojiButton.is-open,
  body.role-worker #attachButton:hover,
  body.role-worker #attachButton:focus-visible {
    background: rgba(255,255,255,.055) !important;
    color: #9fadb9 !important;
  }

  body.role-worker #emojiButton {
    font-size: 0 !important;
    position: relative !important;
  }

  body.role-worker #emojiButton .emoji-face-icon {
    display: none !important;
  }

  body.role-worker #emojiButton::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: auto !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3Cpath d='M8.7 10.2h.1M15.2 10.2h.1M8.5 14.2c1.05 1.2 2.2 1.8 3.5 1.8s2.45-.6 3.5-1.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3Cpath d='M8.7 10.2h.1M15.2 10.2h.1M8.5 14.2c1.05 1.2 2.2 1.8 3.5 1.8s2.45-.6 3.5-1.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.role-worker #attachButton::before {
    width: 22px !important;
    height: 22px !important;
  }

  body.role-worker .telegram-send {
    color: #58aaff !important;
  }
}

/* Worker desktop v7: message actions/context and detached send/mic button. */
@media (min-width: 901px) {
  body.role-worker .telegram-message.incoming {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }

  body.role-worker .message-author-avatar,
  body.role-worker .message-inline-avatar {
    display: none !important;
  }

  body.role-worker .message-actions .message-reply-button,
  body.role-worker .message-actions .message-menu-trigger {
    display: none !important;
  }

  body.role-worker .message-stack > .message-actions {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  body.role-worker .message-stack > .message-actions > .message-reaction-trigger {
    display: inline-grid !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    place-items: center !important;
    color: #ff6b81 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    background: rgba(23, 33, 43, .82) !important;
  }

  body.role-worker .message-stack > .message-actions > .message-reaction-trigger .emoji-face-icon {
    display: none !important;
  }

  body.role-worker .message-stack > .message-actions > .message-reaction-trigger::before {
    content: "❤️" !important;
    display: block !important;
    font-size: 17px !important;
    line-height: 1 !important;
    transform: translateY(-.5px) !important;
  }

  body.role-worker .message-action-menu {
    min-width: 218px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    background: rgba(23, 33, 43, .98) !important;
    border: 1px solid rgba(127, 145, 163, .14) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .34) !important;
  }

  body.role-worker .message-action-row {
    height: 36px !important;
    border-radius: 8px !important;
    gap: 10px !important;
    font-size: 13px !important;
  }

  body.role-worker .telegram-composer {
    width: min(880px, calc(100% - 112px)) !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    position: relative !important;
    margin-bottom: 10px !important;
  }

  body.role-worker #emojiButton .emoji-face-icon {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
  }

  body.role-worker #emojiButton::before {
    display: none !important;
    content: none !important;
  }

  body.role-worker #attachButton {
    transform: translateY(3px) !important;
  }

  body.role-worker #attachButton::before {
    width: 23px !important;
    height: 23px !important;
    transform: rotate(-7deg) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' d='M7.5 12.6 14.3 5.8a3.9 3.9 0 0 1 5.5 5.5L9.8 21.3a5.7 5.7 0 0 1-8.1-8.1L12.1 2.8a2.7 2.7 0 0 1 3.8 3.8l-9.7 9.7'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' d='M7.5 12.6 14.3 5.8a3.9 3.9 0 0 1 5.5 5.5L9.8 21.3a5.7 5.7 0 0 1-8.1-8.1L12.1 2.8a2.7 2.7 0 0 1 3.8 3.8l-9.7 9.7'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.role-worker .telegram-send {
    position: absolute !important;
    right: -54px !important;
    bottom: 5px !important;
    order: 5 !important;
    background: #3390ec !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(51, 144, 236, .24) !important;
  }

  body.role-worker .telegram-send.is-voice {
    background: transparent !important;
    color: #8799aa !important;
    box-shadow: none !important;
  }

  body.role-worker .telegram-send:hover,
  body.role-worker .telegram-send:focus-visible {
    background: #3a9cf6 !important;
    color: #fff !important;
  }

  body.role-worker .telegram-send.is-voice:hover,
  body.role-worker .telegram-send.is-voice:focus-visible {
    background: rgba(255,255,255,.055) !important;
    color: #a2b0bd !important;
  }
}

/* Worker message context v8: Telegram Web-inspired right-click menu and reaction chips. */
@media (min-width: 901px) {
  body.role-worker .message-action-menu,
  body.role-worker .message-action-menu.is-portaled {
    width: 268px !important;
    min-width: 268px !important;
    padding: 8px !important;
    border: 1px solid rgba(132, 154, 174, .16) !important;
    border-radius: 14px !important;
    background: rgba(23, 33, 43, .985) !important;
    box-shadow:
      0 18px 48px rgba(0, 0, 0, .38),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
    backdrop-filter: blur(18px) !important;
  }

  body.role-worker .message-menu-reactions {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 4px !important;
    padding: 3px 3px 8px !important;
    margin-bottom: 5px !important;
    border-bottom: 1px solid rgba(132, 154, 174, .12) !important;
  }

  body.role-worker .message-menu-reaction {
    appearance: none !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #f3f7fb !important;
    font-size: 21px !important;
    line-height: 1 !important;
    display: inline-grid !important;
    place-items: center !important;
    cursor: pointer !important;
    transform: translateZ(0) !important;
    transition:
      background-color 110ms cubic-bezier(.2,.8,.2,1),
      transform 120ms cubic-bezier(.2,.9,.25,1.12) !important;
  }

  body.role-worker .message-menu-reaction:hover,
  body.role-worker .message-menu-reaction:focus-visible {
    background: rgba(51, 144, 236, .16) !important;
    transform: scale(1.12) !important;
    outline: none !important;
  }

  body.role-worker .message-menu-reaction:active {
    transform: scale(.94) !important;
  }

  body.role-worker .message-menu-reaction.is-selected {
    background: rgba(51, 144, 236, .24) !important;
    box-shadow: inset 0 0 0 1px rgba(142, 209, 255, .34) !important;
  }

  body.role-worker .message-action-menu .message-action-row {
    appearance: none !important;
    width: 100% !important;
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #e7eef5 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition:
      background-color 110ms cubic-bezier(.2,.8,.2,1),
      color 110ms cubic-bezier(.2,.8,.2,1),
      transform 90ms cubic-bezier(.2,.9,.25,1.12) !important;
  }

  body.role-worker .message-action-menu .message-action-row:hover,
  body.role-worker .message-action-menu .message-action-row:focus-visible {
    background: rgba(255,255,255,.065) !important;
    outline: none !important;
  }

  body.role-worker .message-action-menu .message-action-row:active {
    transform: scale(.985) !important;
  }

  body.role-worker .message-action-menu .message-action-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #91a4b7 !important;
  }

  body.role-worker .message-action-menu .message-action-icon svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body.role-worker .message-action-menu .message-action-label {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body.role-worker .message-action-menu .message-action-row.is-danger,
  body.role-worker .message-action-menu .message-delete-option.is-danger {
    color: #ff6f7f !important;
  }

  body.role-worker .message-action-menu .message-action-row.is-danger .message-action-icon,
  body.role-worker .message-action-menu .message-delete-option.is-danger .message-action-icon {
    color: #ff6f7f !important;
  }

  body.role-worker .message-action-menu .message-action-row.is-danger:hover,
  body.role-worker .message-action-menu .message-delete-option.is-danger:hover,
  body.role-worker .message-action-menu .message-action-row.is-danger:focus-visible,
  body.role-worker .message-action-menu .message-delete-option.is-danger:focus-visible {
    background: rgba(224, 82, 100, .12) !important;
  }

  body.role-worker .message-reactions {
    margin-top: -3px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    z-index: 2 !important;
  }

  body.role-worker .telegram-message.outgoing .message-reactions {
    justify-content: flex-end !important;
  }

  body.role-worker .message-reaction {
    height: 22px !important;
    min-height: 22px !important;
    padding: 2px 7px !important;
    border: 1px solid rgba(82, 111, 139, .44) !important;
    border-radius: 999px !important;
    background: rgba(23, 33, 43, .98) !important;
    color: #f4f8fc !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.20) !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  body.role-worker .message-reaction.is-mine,
  body.role-worker .message-reaction.is-chosen {
    border-color: rgba(92, 174, 255, .72) !important;
    background: rgba(44, 94, 138, .98) !important;
  }

  body.role-worker .message-reaction .reaction-count,
  body.role-worker .reaction-count {
    margin-left: 3px !important;
    color: rgba(244,248,252,.82) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  body.role-worker .telegram-message.is-message-selected .message-bubble {
    box-shadow:
      0 0 0 2px rgba(51, 144, 236, .38),
      0 3px 12px rgba(0, 0, 0, .22) !important;
  }
}

/* Worker dialog final polish v9: plain Telegram-dark bg, inline reactions and cleaner send/menu icons. */
@media (min-width: 901px) {
  body.role-worker .telegram-chat {
    background: #0e1621 !important;
  }

  body.role-worker .telegram-chat::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  body.role-worker .telegram-messages {
    background: #0e1621 !important;
  }

  body.role-worker .telegram-send,
  body.role-worker .telegram-send.is-send-ready,
  body.role-worker .telegram-send.is-sending,
  body.role-worker .telegram-send:hover,
  body.role-worker .telegram-send:focus-visible,
  body.role-worker .telegram-send.is-send-ready:hover,
  body.role-worker .telegram-send.is-send-ready:focus-visible {
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #54a8ff !important;
  }

  body.role-worker .telegram-send.is-voice,
  body.role-worker .telegram-send.is-voice:hover,
  body.role-worker .telegram-send.is-voice:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    color: #8799aa !important;
  }

  body.role-worker .telegram-send::before,
  body.role-worker .telegram-send.is-send-ready::before,
  body.role-worker .telegram-send.is-sending::before {
    background-color: currentColor !important;
    filter: none !important;
  }

  body.role-worker .telegram-send:focus-visible {
    box-shadow: 0 0 0 2px rgba(84, 168, 255, .22) !important;
  }

  body.role-worker .message-stack:has(> .message-reactions:not(.is-empty)) .message-bubble {
    padding-bottom: 27px !important;
    min-height: 42px !important;
  }

  body.role-worker .message-stack:has(> .message-reactions:not(.is-empty)) .message-footer {
    margin-bottom: 1px !important;
  }

  body.role-worker .message-reactions {
    position: absolute !important;
    left: 8px !important;
    right: auto !important;
    bottom: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body.role-worker .telegram-message.outgoing .message-reactions {
    left: auto !important;
    right: 8px !important;
    justify-content: flex-end !important;
  }

  body.role-worker .message-reaction {
    height: 20px !important;
    min-height: 20px !important;
    padding: 1px 6px !important;
    border: 1px solid rgba(95, 124, 150, .34) !important;
    border-radius: 999px !important;
    background: rgba(15, 26, 36, .62) !important;
    color: #f4f8fc !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.20) !important;
    backdrop-filter: blur(4px) !important;
    font-size: 12px !important;
  }

  body.role-worker .telegram-message.outgoing .message-reaction {
    background: rgba(21, 55, 86, .72) !important;
  }

  body.role-worker .message-reaction.is-mine,
  body.role-worker .message-reaction.is-chosen {
    border-color: rgba(84, 168, 255, .66) !important;
    background: rgba(51, 144, 236, .22) !important;
  }

  body.role-worker .message-action-menu .message-action-icon svg {
    width: 23px !important;
    height: 23px !important;
    stroke-width: 1.75 !important;
  }

  body.role-worker .message-action-menu [data-pin-message] .message-action-icon svg {
    transform: translateY(1px) !important;
  }

  body.role-worker .message-action-menu [data-forward-message] .message-action-icon svg,
  body.role-worker .message-action-menu [data-action-reply] .message-action-icon svg {
    stroke-width: 1.9 !important;
  }

  body.role-worker .message-action-menu .message-delete-option .message-action-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 1.85 !important;
  }
}

/* Telegram Web integration pass: forward modal, voice media, smooth left-mode switch. */
.telegram-accounts,
.telegram-left {
  transition:
    opacity 170ms cubic-bezier(.2,.8,.2,1),
    transform 170ms cubic-bezier(.2,.8,.2,1);
}

.telegram-shell.is-mode-switching .telegram-accounts,
.telegram-shell.is-mode-switching .telegram-left {
  opacity: .66;
  transform: translateY(4px);
}

.message-action-menu,
.message-action-menu.is-portaled {
  width: 268px !important;
  min-width: 268px !important;
  padding: 8px !important;
  border: 1px solid rgba(132, 154, 174, .14) !important;
  border-radius: 14px !important;
  background: rgba(23, 33, 43, .985) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter: blur(18px) !important;
}

.message-menu-reactions {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 4px !important;
  padding: 3px 3px 8px !important;
  margin-bottom: 5px !important;
  border-bottom: 1px solid rgba(132, 154, 174, .12) !important;
}

.message-menu-reaction {
  appearance: none !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #f3f7fb !important;
  font-size: 21px !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: background-color 110ms cubic-bezier(.2,.8,.2,1), transform 120ms cubic-bezier(.2,.9,.25,1.12) !important;
}

.message-menu-reaction:hover,
.message-menu-reaction:focus-visible {
  background: rgba(51, 144, 236, .16) !important;
  transform: scale(1.12) !important;
  outline: none !important;
}

.message-menu-reaction:disabled {
  opacity: .38 !important;
  cursor: default !important;
  transform: none !important;
}

.message-action-menu .message-action-row {
  appearance: none !important;
  width: 100% !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #e7eef5 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.message-action-menu .message-action-row:hover,
.message-action-menu .message-action-row:focus-visible {
  background: rgba(255,255,255,.065) !important;
  outline: none !important;
}

.message-action-menu .message-action-row:disabled {
  opacity: .42 !important;
  cursor: default !important;
}

.message-action-menu .message-action-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.message-action-menu .message-action-row.is-danger {
  color: #ff6f7f !important;
}

.message-action-menu .message-action-row.is-danger:hover,
.message-action-menu .message-action-row.is-danger:focus-visible {
  background: rgba(224,82,100,.12) !important;
}

.forward-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.52);
  opacity: 0;
  transition: opacity 160ms cubic-bezier(.2,.8,.2,1);
}

.forward-modal-overlay.is-open {
  opacity: 1;
}

.forward-modal-overlay.is-closing {
  opacity: 0;
}

.forward-modal {
  width: min(420px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: #17212b;
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
  transform: translateY(8px) scale(.98);
  transition: transform 180ms cubic-bezier(.16,1,.3,1);
}

.forward-modal-overlay.is-open .forward-modal {
  transform: translateY(0) scale(1);
}

.forward-modal-head {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
}

.forward-modal-head h2 {
  margin: 0;
  font-size: 18px;
  color: #e7eef5;
}

.forward-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #a6b6c5;
  font-size: 24px;
}

.forward-modal-close:hover,
.forward-modal-close:focus-visible {
  background: rgba(255,255,255,.07);
  color: #fff;
}

.forward-modal-search {
  padding: 0 14px 12px;
}

.forward-modal-search input {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #242f3d;
  color: #e7eef5;
  padding: 0 16px;
  outline: none;
}

.forward-target-list {
  overflow: auto;
  padding: 4px 10px 10px;
}

.forward-target-row {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  color: #e7eef5;
  text-align: left;
}

.forward-target-row:hover,
.forward-target-row:focus-visible,
.forward-target-row.is-selected {
  background: #202b36;
  outline: none;
}

.forward-target-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.forward-target-text strong,
.forward-target-text small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.forward-target-text small {
  color: #7f91a3;
}

.forward-target-check {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(166,182,197,.48);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: transparent;
  font-size: 13px;
}

.forward-target-row.is-selected .forward-target-check {
  border-color: #3390ec;
  background: #3390ec;
}

.forward-modal-footer {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: #7f91a3;
}

.forward-submit,
.forward-load-more {
  border: 0;
  border-radius: 999px;
  background: #3390ec;
  color: #fff;
  padding: 10px 16px;
  font-weight: 700;
}

.forward-submit:disabled {
  opacity: .45;
}

.forward-load-more {
  width: 100%;
  margin-top: 8px;
  background: rgba(51,144,236,.12);
  color: #6ab3ff;
}

.forward-modal-empty,
.forward-modal-error {
  padding: 18px;
  text-align: center;
  color: #7f91a3;
}

.forward-modal-error {
  color: #e05264;
}

.telegram-voice-card {
  display: grid;
  grid-template-columns: 34px minmax(96px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  max-width: 340px;
  padding: 6px 4px;
}

.voice-play-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: rgba(51,144,236,.18);
  color: #6ab3ff;
}

.voice-waveform {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  --voice-progress: 0%;
}

.voice-waveform span {
  width: 3px;
  height: var(--bar, 42%);
  border-radius: 999px;
  background: linear-gradient(90deg, #6ab3ff var(--voice-progress), rgba(166,182,197,.45) 0);
  opacity: .9;
}

.voice-duration {
  color: #a6b6c5;
  font-size: 12px;
  font-weight: 600;
}

.telegram-video-note {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  overflow: hidden;
  background: #0b111a;
}

.telegram-video-note video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.composer-notice.voice-recording {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e7eef5;
}

.voice-recording-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e05264;
  box-shadow: 0 0 0 0 rgba(224,82,100,.35);
  animation: voiceRecordingPulse 900ms ease-in-out infinite;
}

.composer-notice.voice-recording button {
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #e7eef5;
  padding: 5px 10px;
}

.composer-notice.voice-recording button[data-voice-send] {
  background: rgba(51,144,236,.18);
  color: #6ab3ff;
}

@keyframes voiceRecordingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,82,100,.35); }
  50% { box-shadow: 0 0 0 6px rgba(224,82,100,0); }
}

@media (max-width: 720px) {
  .forward-modal-overlay {
    align-items: end;
    padding: 10px;
  }

  .forward-modal {
    width: 100%;
    max-height: 76vh;
    border-radius: 18px 18px 12px 12px;
  }

  .message-menu-reaction {
    width: 40px !important;
    height: 40px !important;
  }

  .message-action-menu .message-action-row {
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telegram-accounts,
  .telegram-left,
  .forward-modal-overlay,
  .forward-modal {
    transition-duration: 80ms !important;
    transform: none !important;
  }

  .voice-recording-dot {
    animation: none !important;
  }
}

/* Telegram Web follow-up: compact chat canvas, voice/video media, composer controls. */
.telegram-chat {
  background: #0e1621 !important;
}

.telegram-messages {
  padding-left: max(18px, calc((100% - 820px) / 2)) !important;
  padding-right: max(18px, calc((100% - 820px) / 2)) !important;
}

.telegram-composer {
  width: min(820px, calc(100% - 32px)) !important;
  margin: 8px auto 12px !important;
  min-height: 46px !important;
  padding: 5px 8px !important;
  gap: 7px !important;
  border-radius: 18px !important;
  background: rgba(23, 33, 43, .96) !important;
  border-color: rgba(255, 255, 255, .045) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
}

.telegram-composer .telegram-textarea {
  min-height: 30px !important;
  padding: 7px 4px !important;
  line-height: 1.35 !important;
}

#attachButton,
.telegram-send {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #7f91a3 !important;
  transition:
    color 140ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    background-color 140ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    transform 140ms var(--ease-pop, cubic-bezier(.2,.9,.25,1.12)),
    opacity 140ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)) !important;
}

#attachButton:hover,
#attachButton:focus-visible,
.telegram-send:hover,
.telegram-send:focus-visible {
  color: #3390ec !important;
  background: rgba(51, 144, 236, .10) !important;
}

#attachButton:active,
.telegram-send:active {
  transform: scale(.94) !important;
}

#attachButton {
  font-size: 0 !important;
}

#attachButton .attach-paperclip-icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-12deg);
}

.telegram-send {
  position: relative !important;
  font-size: 0 !important;
  border-radius: 50% !important;
}

.telegram-send::before {
  content: "" !important;
  width: 21px;
  height: 21px;
  display: block;
  opacity: 1;
  transform: scale(.92);
  background: currentColor;
  transition:
    opacity 140ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    transform 160ms var(--ease-pop, cubic-bezier(.2,.9,.25,1.12)) !important;
}

.telegram-send.is-voice {
  color: #7f91a3 !important;
}

.telegram-send.is-voice::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm5-3a1 1 0 1 0-2 0 3 3 0 1 1-6 0 1 1 0 1 0-2 0 5 5 0 0 0 4 4.9V18H9a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2v-2.1A5 5 0 0 0 17 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm5-3a1 1 0 1 0-2 0 3 3 0 1 1-6 0 1 1 0 1 0-2 0 5 5 0 0 0 4 4.9V18H9a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2v-2.1A5 5 0 0 0 17 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.telegram-send.is-send-ready,
.telegram-send.is-sending {
  color: #3390ec !important;
}

.telegram-send.is-send-ready::before,
.telegram-send.is-sending::before {
  width: 22px;
  height: 22px;
  transform: scale(1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.7 3.4 3.9 10.2c-.9.36-.88 1.64.03 1.96l4.7 1.66 1.74 5.22c.3.91 1.48 1.09 2.04.31l2.45-3.42 4.05 3.07c.78.59 1.91.16 2.1-.8L23 4.85c.18-1.02-.98-1.84-2.3-1.45ZM10.2 13.25l7.65-5.7-5.72 7.53-.35 2.18-1.58-4.01Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.7 3.4 3.9 10.2c-.9.36-.88 1.64.03 1.96l4.7 1.66 1.74 5.22c.3.91 1.48 1.09 2.04.31l2.45-3.42 4.05 3.07c.78.59 1.91.16 2.1-.8L23 4.85c.18-1.02-.98-1.84-2.3-1.45ZM10.2 13.25l7.65-5.7-5.72 7.53-.35 2.18-1.58-4.01Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.telegram-send.is-recording {
  color: #e05264 !important;
  background: rgba(224, 82, 100, .10) !important;
}

.telegram-voice-card {
  width: min(314px, 72vw) !important;
  height: 42px !important;
  display: grid !important;
  grid-template-columns: 34px 1fr auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

.voice-play-button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(51, 144, 236, .18) !important;
  color: #6ab3ff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transition: background-color 120ms ease, color 120ms ease, transform 100ms ease !important;
}

.telegram-message.outgoing .voice-play-button {
  background: rgba(255, 255, 255, .16) !important;
  color: #d9ecff !important;
}

.voice-play-button:hover,
.voice-play-button:focus-visible {
  background: rgba(51, 144, 236, .26) !important;
  transform: scale(1.04);
}

.voice-waveform {
  position: relative !important;
  height: 26px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.voice-waveform::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: var(--voice-progress, 0%);
  height: 2px;
  border-radius: 999px;
  background: #6ab3ff;
  opacity: .88;
  transition: width 120ms linear;
}

.voice-waveform span {
  width: 3px !important;
  height: var(--bar, 38%) !important;
  min-height: 5px !important;
  border-radius: 999px !important;
  background: #6ab3ff !important;
  opacity: .7;
}

.telegram-message.outgoing .voice-waveform span {
  background: rgba(218, 236, 255, .78) !important;
}

.telegram-message.outgoing .voice-waveform::after {
  background: #d9ecff;
}

.voice-duration {
  min-width: 34px !important;
  color: rgba(231, 238, 245, .68) !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.telegram-video-note {
  position: relative !important;
  width: 172px !important;
  height: 172px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #111b26 !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22) !important;
}

.telegram-video-note video {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

.video-note-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(14, 22, 33, .68);
  color: #e7eef5;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transition: opacity 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.telegram-video-note.is-playing .video-note-play {
  opacity: 0;
}

.telegram-video-note:hover .video-note-play,
.telegram-video-note:focus-within .video-note-play,
.telegram-video-note.is-playing:hover .video-note-play,
.telegram-video-note.is-playing:focus-within .video-note-play {
  opacity: 1;
}

.video-note-play:hover,
.video-note-play:focus-visible {
  background: rgba(51, 144, 236, .75);
  transform: translate(-50%, -50%) scale(1.04);
}

@media (max-width: 700px) {
  .telegram-messages {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .telegram-composer {
    width: calc(100% - 16px) !important;
    margin-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .telegram-voice-card {
    width: min(292px, 76vw) !important;
  }

  .telegram-video-note {
    width: min(168px, 52vw) !important;
    height: min(168px, 52vw) !important;
  }
}

body.role-worker .telegram-messages {
  padding-left: max(18px, calc((100% - 820px) / 2)) !important;
  padding-right: max(18px, calc((100% - 820px) / 2)) !important;
}

body.role-worker .telegram-composer {
  width: min(820px, calc(100% - 32px)) !important;
  margin: 8px auto 12px !important;
  min-height: 46px !important;
  padding: 5px 8px !important;
  border-radius: 18px !important;
}

body.role-worker #attachButton,
body.role-worker .telegram-send {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.role-worker #attachButton .attach-paperclip-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.9;
}

body.role-worker .telegram-send.is-voice {
  color: #7f91a3 !important;
}

body.role-worker .telegram-send.is-send-ready,
body.role-worker .telegram-send.is-sending {
  color: #3390ec !important;
}

body.role-worker .telegram-voice-card {
  width: min(314px, 72vw) !important;
  height: 42px !important;
}

body.role-worker .telegram-video-note {
  width: 172px !important;
  height: 172px !important;
  border-radius: 50% !important;
}

@media (max-width: 700px) {
  body.role-worker .telegram-messages {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.role-worker .telegram-composer {
    width: calc(100% - 16px) !important;
  }
}

/* Presence contract display: backend-first, no frontend online guessing. */
.account-phone-line,
.dialog-account-line,
.chat-account-presence-wrap {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 5px !important;
}

.account-phone-line {
  max-width: 100% !important;
}

.account-phone-line .account-phone {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.telegram-account .account-avatar::after {
  display: none !important;
}

.account-presence,
.all-dialog-presence,
.chat-account-presence {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  display: inline-block !important;
  border-radius: 999px !important;
  background: rgba(127, 145, 163, .55) !important;
  box-shadow: none !important;
  transition: background-color 140ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)), transform 140ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)) !important;
}

.account-presence.is-online,
.all-dialog-presence.is-online,
.chat-account-presence.is-online {
  background: #4fd08b !important;
  animation: presenceSoftPop 700ms var(--ease-out-soft, cubic-bezier(.16,1,.3,1)) 1;
}

.account-presence.is-recently_active,
.all-dialog-presence.is-recently_active,
.chat-account-presence.is-recently_active {
  background: #3390ec !important;
  animation: presenceSoftPop 700ms var(--ease-out-soft, cubic-bezier(.16,1,.3,1)) 1;
}

.account-presence.is-idle,
.all-dialog-presence.is-idle,
.chat-account-presence.is-idle {
  background: #e0a84f !important;
}

.account-presence.is-offline,
.all-dialog-presence.is-offline,
.chat-account-presence.is-offline {
  background: #7f91a3 !important;
}

.account-presence.is-unknown,
.all-dialog-presence.is-unknown,
.chat-account-presence.is-unknown {
  background: rgba(127, 145, 163, .55) !important;
}

.account-presence-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(127, 145, 163, .82) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.dialog-account-line .all-dialog-presence {
  margin-top: 1px !important;
}

.dialog-account-line span:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.chat-subtitle {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.chat-account-presence-wrap {
  max-width: 190px !important;
  color: #7f91a3 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@keyframes presenceSoftPop {
  0% { transform: scale(.72); }
  42% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .account-presence,
  .all-dialog-presence,
  .chat-account-presence {
    animation: none !important;
    transition: background-color 80ms linear !important;
  }
}

/* Mini-profile modal: Telegram-like dark adaptation of the provided reference. */
.mini-profile-overlay,
.mini-note-overlay {
  position: fixed;
  inset: 0;
  z-index: 1280;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .58);
  opacity: 0;
  transition: opacity 150ms var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}

.mini-profile-overlay.is-open,
.mini-note-overlay.is-open {
  opacity: 1;
}

.mini-profile-overlay.is-closing,
.mini-note-overlay.is-closing {
  opacity: 0;
}

.mini-profile-modal,
.mini-note-modal {
  position: relative;
  width: min(520px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  border-radius: 26px;
  background: #0e1621;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
  color: #e7eef5;
  transform: translateY(8px) scale(.98);
  transition: transform 170ms var(--ease-out-soft, cubic-bezier(.16,1,.3,1));
}

.mini-profile-overlay.is-open .mini-profile-modal,
.mini-note-overlay.is-open .mini-note-modal {
  transform: translateY(0) scale(1);
}

.mini-profile-close,
.mini-note-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: #a6b6c5;
  font-size: 22px;
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.mini-profile-close:hover,
.mini-note-close:hover,
.mini-profile-close:focus-visible,
.mini-note-close:focus-visible {
  background: rgba(51,144,236,.16);
  color: #6ab3ff;
  outline: none;
}

.mini-profile-head {
  padding: 22px 22px 10px;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.mini-profile-avatar.avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 760;
  background: linear-gradient(180deg, #58aef5, #4a8fe2);
  color: #fff;
  box-shadow: 0 10px 26px rgba(51,144,236,.22);
}

.mini-profile-head h2 {
  margin: 0;
  max-width: 360px;
  color: #e7eef5;
  font-size: 20px;
  line-height: 1.22;
  font-weight: 760;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-profile-card {
  margin: 8px 18px 18px;
  border-radius: 22px;
  background: #17212b;
  border: 1px solid rgba(255,255,255,.065);
  overflow: hidden;
}

.mini-profile-section {
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.mini-profile-section:last-child {
  border-bottom: 0;
}

.mini-profile-label {
  display: block;
  margin-bottom: 7px;
  color: #6ab3ff;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: lowercase;
}

.mini-profile-label.is-sub {
  margin-top: 12px;
}

.mini-profile-value,
.mini-profile-line,
.mini-profile-reasons div {
  color: #e7eef5;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 560;
}

.mini-profile-link {
  display: block;
  color: #6ab3ff;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mini-profile-link:hover,
.mini-profile-link:focus-visible {
  color: #9fccff;
  text-decoration: underline;
  outline: none;
}

.mini-profile-channel-card .mini-profile-value {
  overflow-wrap: anywhere;
}

.mini-profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mini-profile-stat-grid div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.mini-profile-stat-grid b {
  display: block;
  color: #e7eef5;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 780;
}

.mini-profile-stat-grid span {
  display: block;
  margin-top: 4px;
  color: #7f91a3;
  font-size: 12px;
  line-height: 1.25;
}

.channel-join-cta {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 8px 14px 6px;
  background: linear-gradient(180deg, rgba(14, 22, 33, 0), rgba(14, 22, 33, .72));
}

.channel-join-button {
  min-height: 38px;
  min-width: 164px;
  border: 0;
  border-radius: 999px;
  padding: 0 20px;
  background: #3390ec;
  color: #fff;
  font-size: 14px;
  font-weight: 780;
  letter-spacing: 0;
  box-shadow: 0 10px 26px rgba(51,144,236,.22);
  transition: transform var(--motion-micro, 100ms) var(--ease-pop, cubic-bezier(.2,.9,.25,1.12)),
    background-color var(--motion-micro, 100ms) var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}

.channel-join-button:hover,
.channel-join-button:focus-visible {
  background: #4aa1f2;
  outline: none;
}

.channel-join-button:active {
  transform: scale(.96);
}

.mini-profile-toggle-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.mini-profile-toggle-section .mini-profile-label {
  margin-bottom: 0;
}

.mini-profile-toggle {
  min-width: 122px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 8px 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  background: rgba(127,145,163,.16);
  color: #a6b6c5;
  font-size: 12px;
  font-weight: 760;
  transition: background-color 130ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    color 130ms var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}

.mini-profile-toggle i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7f91a3;
  transition: background-color 130ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
    transform 130ms var(--ease-pop, cubic-bezier(.2,.9,.25,1.12));
}

.mini-profile-toggle.is-on {
  background: rgba(51,144,236,.18);
  color: #6ab3ff;
}

.mini-profile-toggle.is-on i {
  background: #3390ec;
  transform: translateX(2px);
}

.mini-profile-toggle:hover:not(:disabled),
.mini-profile-toggle:focus-visible:not(:disabled) {
  background: rgba(51,144,236,.24);
  outline: none;
}

.mini-profile-toggle:disabled {
  opacity: .56;
  cursor: default;
}

.mini-profile-muted {
  color: #7f91a3;
  font-size: 14px;
  line-height: 1.4;
}

.mini-profile-list {
  display: grid;
  gap: 5px;
}

.mini-profile-account-list {
  display: grid;
  gap: 10px;
}

.mini-profile-account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.mini-profile-account-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e7eef5;
  font-size: 15px;
  font-weight: 600;
}

.mini-profile-account-row time {
  color: #7f91a3;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.mini-profile-loading {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.mini-profile-loading span {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size: 220% 100%;
  animation: miniProfileSkeleton 1100ms ease-in-out infinite;
}

.mini-profile-loading span:nth-child(2) { width: 82%; }
.mini-profile-loading span:nth-child(3) { width: 64%; }
.mini-profile-loading span:nth-child(4) { width: 72%; }

@keyframes miniProfileSkeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.mini-profile-error {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.mini-profile-error b,
.mini-note-error {
  color: #e05264;
  font-size: 14px;
  font-weight: 650;
}

.mini-profile-error button,
.mini-note-save,
.mini-note-cancel {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(51,144,236,.16);
  color: #6ab3ff;
  font-weight: 760;
}

.mini-note-modal {
  width: min(420px, calc(100vw - 28px));
  padding: 18px;
  overflow: visible;
}

.mini-note-modal h2 {
  margin: 0 42px 14px 0;
  color: #e7eef5;
  font-size: 18px;
  font-weight: 760;
}

.mini-note-modal textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 12px;
  background: #111b26;
  color: #e7eef5;
  outline: none;
  font: inherit;
  line-height: 1.4;
}

.mini-note-modal textarea:focus {
  border-color: rgba(51,144,236,.42);
  box-shadow: 0 0 0 3px rgba(51,144,236,.10);
}

.mini-note-error {
  min-height: 18px;
  margin-top: 8px;
}

.mini-note-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mini-note-save {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  background: #3390ec;
  color: #fff;
  font-size: 20px;
}

.mini-note-save:disabled {
  opacity: .55;
}

.mini-note-cancel {
  background: rgba(255,255,255,.07);
  color: #a6b6c5;
}

@media (max-width: 520px) {
  .mini-profile-overlay,
  .mini-note-overlay {
    padding: 10px;
  }

  .mini-profile-modal,
  .mini-note-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 22px;
  }

  .mini-profile-card {
    margin: 8px 12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini-profile-overlay,
  .mini-note-overlay,
  .mini-profile-modal,
  .mini-note-modal,
  .mini-profile-loading span {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* Final dialog geometry and clean presence/media controls. */
:root {
  --telegram-dialog-lane-width: 960px;
}

.telegram-messages,
body.role-worker .telegram-messages {
  padding-left: max(18px, calc((100% - var(--telegram-dialog-lane-width)) / 2)) !important;
  padding-right: max(18px, calc((100% - var(--telegram-dialog-lane-width)) / 2)) !important;
}

.telegram-composer,
body.role-worker .telegram-composer {
  width: min(var(--telegram-dialog-lane-width), calc(100% - 32px)) !important;
}

@media (min-width: 901px) {
  .message-stack,
  body.role-worker .message-stack {
    max-width: min(720px, 78%) !important;
  }
}

#attachButton::before,
#attachButton::after,
body.role-worker #attachButton::before,
body.role-worker #attachButton::after {
  content: none !important;
  display: none !important;
}

#attachButton,
body.role-worker #attachButton {
  margin-top: 3px !important;
}

#attachButton .attach-paperclip-icon,
body.role-worker #attachButton .attach-paperclip-icon {
  display: block !important;
  opacity: 1 !important;
  transform: rotate(-10deg) !important;
}

.account-presence,
.all-dialog-presence,
.chat-account-presence,
.account-presence-label,
.chat-account-presence-wrap,
.telegram-account .account-avatar::after,
.telegram-account.is-connection-online .account-avatar::after {
  display: none !important;
}

.account-phone-line,
.dialog-account-line {
  gap: 0 !important;
}

/* Spread chat bubbles closer to Telegram Web: outgoing near the scroll rail, incoming symmetrically away from center. */
@media (min-width: 901px) {
  .telegram-messages,
  body.role-worker .telegram-messages {
    padding-left: 32px !important;
    padding-right: 18px !important;
  }

  .telegram-message.incoming,
  body.role-worker .telegram-message.incoming {
    padding-right: clamp(90px, 18vw, 360px) !important;
  }

  .telegram-message.outgoing,
  body.role-worker .telegram-message.outgoing {
    padding-left: clamp(90px, 18vw, 360px) !important;
  }

  .telegram-message.incoming .message-stack,
  body.role-worker .telegram-message.incoming .message-stack {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .telegram-message.outgoing .message-stack,
  body.role-worker .telegram-message.outgoing .message-stack {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Final dialog micro-fixes: stable spacing, no overlap, cleaner reactions and bottom-aligned ticks. */
.telegram-message,
body.role-worker .telegram-message {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-height: max-content !important;
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  overflow: visible !important;
}

.telegram-message.outgoing + .telegram-message.incoming,
.telegram-message.incoming + .telegram-message.outgoing,
body.role-worker .telegram-message.outgoing + .telegram-message.incoming,
body.role-worker .telegram-message.incoming + .telegram-message.outgoing {
  margin-top: 7px !important;
}

.message-stack,
body.role-worker .message-stack {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.message-bubble,
body.role-worker .message-bubble {
  position: relative !important;
  overflow: visible !important;
}

.message-footer,
body.role-worker .message-footer {
  align-self: flex-end !important;
  margin-top: 4px !important;
  margin-bottom: -2px !important;
  transform: translateY(2px) !important;
}

.message-ticks,
.message-status-spinner,
.message-status-failed,
body.role-worker .message-ticks,
body.role-worker .message-status-spinner,
body.role-worker .message-status-failed {
  align-self: flex-end !important;
  transform: translateY(1px) !important;
}

.message-reactions,
body.role-worker .message-reactions {
  z-index: 3 !important;
}

.message-reaction,
body.role-worker .message-reaction {
  animation: none !important;
}

.message-reaction.motion-reaction-pop,
body.role-worker .message-reaction.motion-reaction-pop {
  animation: telegramReactionSettle 260ms cubic-bezier(.2,.9,.25,1.12) both !important;
}

.message-reaction[data-emoji="❤️"] .reaction-emoji,
body.role-worker .message-reaction[data-emoji="❤️"] .reaction-emoji {
  color: #ff4b61 !important;
  text-shadow: none !important;
}

.message-action-menu [data-pin-message] .message-action-icon svg,
body.role-worker .message-action-menu [data-pin-message] .message-action-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.75 !important;
  transform: translateY(1px) !important;
}

#attachButton,
body.role-worker #attachButton {
  align-self: center !important;
  margin-top: -1px !important;
}

@keyframes telegramReactionSettle {
  0% {
    opacity: 0;
    transform: translateY(3px) scale(.74);
  }
  62% {
    opacity: 1;
    transform: translateY(-1px) scale(1.13);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.chat-title-line .chat-title {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.chat-block-stat {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 20px !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(224, 82, 100, .22) !important;
  border-radius: 999px !important;
  background: rgba(224, 82, 100, .10) !important;
  color: #ff8a98 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

.block-reason-overlay {
  background: rgba(5, 10, 16, .62) !important;
  backdrop-filter: blur(8px) !important;
}

.block-reason-card {
  width: min(420px, calc(100vw - 28px)) !important;
  padding: 18px !important;
  border: 1px solid rgba(127, 145, 163, .18) !important;
  border-radius: 18px !important;
  background: #17212b !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
  color: #e7eef5 !important;
  animation: modalSoftIn 170ms cubic-bezier(.2,.8,.2,1) both !important;
}

.block-reason-card p {
  margin: 0 0 14px !important;
  color: #f4f8fc !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.block-reason-input {
  width: 100% !important;
  min-height: 104px !important;
  resize: vertical !important;
  border: 1px solid rgba(127, 145, 163, .20) !important;
  border-radius: 14px !important;
  padding: 11px 12px !important;
  background: #0e1621 !important;
  color: #e7eef5 !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  outline: none !important;
}

.block-reason-input:focus {
  border-color: rgba(51, 144, 236, .58) !important;
  box-shadow: 0 0 0 3px rgba(51, 144, 236, .12) !important;
}

.block-reason-input::placeholder {
  color: #7f91a3 !important;
}

.block-reason-actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 14px !important;
}

.block-reason-submit {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: #3390ec !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition:
    transform 120ms cubic-bezier(.2,.9,.25,1.12),
    opacity 120ms cubic-bezier(.2,.8,.2,1),
    background-color 120ms cubic-bezier(.2,.8,.2,1) !important;
}

.block-reason-submit:hover,
.block-reason-submit:focus-visible {
  background: #4aa3f5 !important;
  outline: none !important;
}

.block-reason-submit:active {
  transform: scale(.94) !important;
}

.block-reason-submit:disabled {
  opacity: .42 !important;
  cursor: default !important;
  transform: none !important;
}

@keyframes modalSoftIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* QA hotfix: short outgoing messages must keep reply/reaction/dots clickable. */
@media (min-width: 901px) {
  .message-stack > .message-actions,
  body.role-worker .message-stack > .message-actions {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    z-index: 120 !important;
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 4px !important;
    overflow: visible !important;
    border: 1px solid rgba(127, 145, 163, .14) !important;
    border-radius: 999px !important;
    background: rgba(23, 33, 43, .92) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .30) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) scale(.98) !important;
    transition:
      opacity 120ms cubic-bezier(.2,.8,.2,1),
      transform 120ms cubic-bezier(.2,.8,.2,1) !important;
  }

  .telegram-message.incoming .message-stack > .message-actions,
  body.role-worker .telegram-message.incoming .message-stack > .message-actions {
    left: calc(100% + 8px) !important;
    right: auto !important;
  }

  .telegram-message.outgoing .message-stack > .message-actions,
  body.role-worker .telegram-message.outgoing .message-stack > .message-actions {
    right: calc(100% + 8px) !important;
    left: auto !important;
  }

  .telegram-message:hover .message-stack > .message-actions,
  .telegram-message:focus-within .message-stack > .message-actions,
  .telegram-message.is-picker-open .message-stack > .message-actions,
  .telegram-message.is-action-menu-open .message-stack > .message-actions,
  .message-stack > .message-actions:hover,
  .message-stack > .message-actions:focus-within,
  body.role-worker .telegram-message:hover .message-stack > .message-actions,
  body.role-worker .telegram-message:focus-within .message-stack > .message-actions,
  body.role-worker .telegram-message.is-picker-open .message-stack > .message-actions,
  body.role-worker .telegram-message.is-action-menu-open .message-stack > .message-actions,
  body.role-worker .message-stack > .message-actions:hover,
  body.role-worker .message-stack > .message-actions:focus-within {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) scale(1) !important;
  }

  .message-stack > .message-actions > button,
  body.role-worker .message-stack > .message-actions > button,
  body.role-worker .message-actions .message-reply-button,
  body.role-worker .message-actions .message-menu-trigger,
  body.role-worker .message-stack > .message-actions > .message-reaction-trigger {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #8799aa !important;
    font-size: 17px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .message-stack > .message-actions > button:hover,
  .message-stack > .message-actions > button:focus-visible,
  body.role-worker .message-stack > .message-actions > button:hover,
  body.role-worker .message-stack > .message-actions > button:focus-visible {
    background: rgba(51, 144, 236, .12) !important;
    color: #8ed1ff !important;
  }

  .message-stack > .message-actions > .message-reaction-trigger::before,
  body.role-worker .message-stack > .message-actions > .message-reaction-trigger::before {
    content: none !important;
    display: none !important;
  }

  .message-stack > .message-actions > .message-reaction-trigger .emoji-face-icon,
  body.role-worker .message-stack > .message-actions > .message-reaction-trigger .emoji-face-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
  }
}

/* Mini-profile internal scroll: keep the modal on-screen and scroll only profile details. */
.mini-profile-modal {
  display: flex;
  flex-direction: column;
  max-height: min(86vh, calc(100vh - 36px));
  overflow: hidden;
}

.mini-profile-head {
  flex: 0 0 auto;
}

.mini-profile-card {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(86vh - 126px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 145, 163, .48) transparent;
}

.mini-profile-card::-webkit-scrollbar {
  width: 7px;
}

.mini-profile-card::-webkit-scrollbar-track {
  background: transparent;
}

.mini-profile-card::-webkit-scrollbar-thumb {
  border: 2px solid #17212b;
  border-radius: 999px;
  background: rgba(127, 145, 163, .38);
}

.mini-profile-card::-webkit-scrollbar-thumb:hover {
  background: rgba(127, 145, 163, .58);
}

.mini-profile-section,
.mini-profile-list,
.mini-profile-account-list,
.mini-profile-account-row {
  min-width: 0;
}

@media (max-width: 520px) {
  .mini-profile-modal {
    max-height: calc(100vh - 20px);
  }

  .mini-profile-card {
    max-height: calc(100vh - 146px);
  }
}

@media (max-height: 680px) {
  .mini-profile-card {
    max-height: calc(100vh - 154px);
  }
}

/* Mini-profile and chat header counters polish. */
.chat-peer-counters {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
}

.chat-peer-counters:empty {
  display: none;
}

.chat-peer-counter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 42px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(51, 144, 236, .26);
  border-radius: 9px;
  background: rgba(23, 33, 43, .74);
  color: #8fc7f7;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

.chat-peer-counter svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .94;
}

.chat-peer-counter b {
  color: #d8ecff;
  font: inherit;
}

.mini-profile-numbered {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}

.mini-profile-numbered span,
.mini-profile-account-row span em {
  color: #6aa8da;
  font-style: normal;
  font-weight: 800;
}

.mini-profile-numbered b {
  min-width: 0;
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
}

.mini-profile-account-list {
  counter-reset: miniProfileAccount;
}

.mini-profile-account-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mini-profile-account-row span::before {
  counter-increment: miniProfileAccount;
  content: counter(miniProfileAccount) ".";
  flex: 0 0 auto;
  color: #6aa8da;
  font-weight: 800;
}

.mini-profile-account-row span em {
  display: none;
}

/* Message hover cleanup: only quick heart is shown on hover; full actions stay in right-click menu. */
.telegram-message .message-stack,
body.role-worker .telegram-message .message-stack {
  overflow: visible;
}

.telegram-message .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message .message-stack > .message-actions.message-heart-actions {
  position: absolute;
  left: calc(100% - 3px);
  right: auto;
  top: auto;
  bottom: -1px;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-5px) scale(.86);
  transform-origin: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  transition:
    opacity var(--motion-small) var(--ease-standard),
    transform var(--motion-small) var(--ease-pop);
}

.telegram-message:hover .message-stack > .message-actions.message-heart-actions,
.telegram-message:focus-within .message-stack > .message-actions.message-heart-actions,
.telegram-message.is-picker-open .message-stack > .message-actions.message-heart-actions,
.telegram-message.is-action-menu-open .message-stack > .message-actions.message-heart-actions {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.message-actions.message-heart-actions .message-heart-quick {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ff4058;
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 4px 10px rgba(0, 0, 0, .35);
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--motion-micro) var(--ease-standard),
    border-color var(--motion-micro) var(--ease-standard),
    transform var(--motion-micro) var(--ease-pop),
    box-shadow var(--motion-micro) var(--ease-standard);
}

.message-actions.message-heart-actions .message-heart-quick:hover {
  background: transparent;
  transform: scale(1.16);
  box-shadow: none;
}

.message-actions.message-heart-actions .message-heart-quick:active {
  transform: scale(.94);
}

.message-actions.message-heart-actions .message-heart-quick:disabled {
  opacity: .62;
  pointer-events: none;
}

.message-actions.message-heart-actions .message-reply-button,
.message-actions.message-heart-actions .message-menu-trigger,
.message-actions.message-heart-actions .message-reaction-trigger:not(.message-heart-quick) {
  display: none !important;
}

/* Final override for legacy QA hover panel rules that used !important. */
.telegram-message .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message .message-stack > .message-actions.message-heart-actions {
  position: absolute !important;
  left: calc(100% - 3px) !important;
  right: auto !important;
  top: auto !important;
  bottom: -1px !important;
  z-index: 220 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateX(-5px) scale(.86) !important;
}

.telegram-message:hover .message-stack > .message-actions.message-heart-actions,
.telegram-message:focus-within .message-stack > .message-actions.message-heart-actions,
.telegram-message.is-picker-open .message-stack > .message-actions.message-heart-actions,
.telegram-message.is-action-menu-open .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message:hover .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message:focus-within .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message.is-picker-open .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message.is-action-menu-open .message-stack > .message-actions.message-heart-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) scale(1) !important;
}

.telegram-message.outgoing .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message.outgoing .message-stack > .message-actions.message-heart-actions {
  left: auto !important;
  right: calc(100% - 3px) !important;
  transform: translateX(5px) scale(.86) !important;
}

.telegram-message.outgoing:hover .message-stack > .message-actions.message-heart-actions,
.telegram-message.outgoing:focus-within .message-stack > .message-actions.message-heart-actions,
.telegram-message.outgoing.is-picker-open .message-stack > .message-actions.message-heart-actions,
.telegram-message.outgoing.is-action-menu-open .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message.outgoing:hover .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message.outgoing:focus-within .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message.outgoing.is-picker-open .message-stack > .message-actions.message-heart-actions,
body.role-worker .telegram-message.outgoing.is-action-menu-open .message-stack > .message-actions.message-heart-actions {
  transform: translateX(0) scale(1) !important;
}

.message-actions.message-heart-actions > .message-heart-quick,
body.role-worker .message-actions.message-heart-actions > .message-heart-quick {
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ff4058 !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 20px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-shadow: 0 4px 10px rgba(0, 0, 0, .35) !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.message-actions.message-heart-actions > .message-heart-quick:hover,
.message-actions.message-heart-actions > .message-heart-quick:focus-visible,
body.role-worker .message-actions.message-heart-actions > .message-heart-quick:hover,
body.role-worker .message-actions.message-heart-actions > .message-heart-quick:focus-visible {
  background: transparent !important;
  color: #ff4058 !important;
  transform: scale(1.16) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Telegram-like visible media/avatar loading states */
.avatar.is-lazy::after,
.avatar.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 42%;
  height: 42%;
  min-width: 13px;
  min-height: 13px;
  max-width: 22px;
  max-height: 22px;
  border: 2px solid rgba(231, 238, 245, .28);
  border-top-color: #7fbfff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  animation: motionSpinner 720ms linear infinite;
  pointer-events: none;
}

.avatar.has-image::after,
.avatar.is-miss::after {
  display: none;
}

.avatar.is-loading::before {
  opacity: .26;
}

.telegram-message.has-photo-media .telegram-photo-card.is-loading-full .telegram-photo-button::before {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(51, 144, 236, .14), transparent 34%),
    #101b27 !important;
}

.telegram-message.has-photo-media .telegram-photo-card.is-loading-full .telegram-photo-button::after {
  width: 34px !important;
  height: 34px !important;
  border: 3px solid rgba(231, 238, 245, .22) !important;
  border-top-color: #7fbfff !important;
  border-radius: 999px !important;
  background: rgba(10, 22, 34, .22) !important;
  transform: translate(-50%, -50%) !important;
  animation: motionSpinner 720ms linear infinite !important;
  opacity: 1 !important;
}

.telegram-photo-card.is-full-loaded .telegram-photo-button::after,
.telegram-photo-card.is-thumb-error .telegram-photo-button::after,
.telegram-photo-card.is-placeholder .telegram-photo-button::after {
  display: none !important;
}

.media-card[data-media-lazy]:not([data-media-loaded="true"]).has-thumb .media-thumb {
  opacity: .2;
}

/* Dialogs cleanup: minimal Telegram-like search and folders */
#startInboxListenerButton,
#loadDialogsButton {
  display: none !important;
}

.telegram-search-input,
.overview-account-search input,
.forward-modal-search input,
.composer-emoji-search {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18.2a7.4 7.4 0 1 1 0-14.8 7.4 7.4 0 0 1 0 14.8Z' stroke='%238EA0B2' stroke-width='2'/%3E%3Cpath d='m16.2 16.2 4.2 4.2' stroke='%238EA0B2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px 50% !important;
  padding-left: 38px !important;
}

.telegram-search,
.overview-account-search,
.forward-modal-search {
  position: relative;
}

.telegram-search::before,
.overview-account-search::before,
.forward-modal-search::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  z-index: 5;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  opacity: .58;
  pointer-events: none;
  background: #8ea0b2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18.2a7.4 7.4 0 1 1 0-14.8 7.4 7.4 0 0 1 0 14.8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.2 16.2 4.2 4.2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18.2a7.4 7.4 0 1 1 0-14.8 7.4 7.4 0 0 1 0 14.8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.2 16.2 4.2 4.2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.telegram-dialog-folders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 8px 6px;
}

.telegram-dialog-folders.is-hidden {
  display: none !important;
}

.dialog-folder-tile {
  min-width: 0;
  height: 74px;
  border: 1px solid rgba(126, 145, 163, .14);
  border-radius: 14px;
  background: rgba(27, 39, 51, .42);
  color: rgba(231, 238, 245, .78);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}

.dialog-folder-tile:hover,
.dialog-folder-tile:focus-visible {
  border-color: rgba(51, 144, 236, .28);
  background: rgba(36, 47, 61, .68);
  color: rgba(231, 238, 245, .94);
  outline: none;
}

.dialog-folder-tile:active {
  transform: scale(.98);
}

.dialog-folder-tile.is-active {
  border-color: rgba(51, 144, 236, .45);
  background: rgba(51, 144, 236, .13);
  color: #e7eef5;
}

.dialog-folder-tile.is-active .dialog-folder-icon {
  color: #8ed1ff;
  border-color: rgba(51, 144, 236, .34);
  background: rgba(51, 144, 236, .16);
}

.dialog-folder-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(142, 160, 178, .82);
  background: rgba(36, 47, 61, .72);
  border: 1px solid rgba(142, 160, 178, .18);
}

.dialog-folder-icon.is-avatar::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 12px 0 5px currentColor;
  transform: translateY(-5px);
  opacity: .72;
}

.dialog-folder-icon.is-file {
  border-radius: 999px;
}

.dialog-folder-icon.is-file::before {
  content: "";
  width: 12px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 3px;
  opacity: .74;
  transform: translate(2px, -1px);
  box-shadow: -5px 5px 0 -2px currentColor;
}

.dialog-folder-icon.is-file::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translate(5px, -6px) rotate(0deg);
  opacity: .66;
}

.dialog-folder-icon.is-star::before {
  content: "★";
  font-size: 17px;
  line-height: 1;
  opacity: .55;
}

.dialog-readonly,
.dialog-service,
.dialog-source-badge {
  display: none !important;
}

/* Final search polish: one Telegram-like search style everywhere. */
.telegram-accountbar .telegram-account-search,
.telegram-left .telegram-search,
.overview-account-search,
.forward-modal-search {
  position: relative !important;
}

.telegram-accountbar .telegram-account-search {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.telegram-accountbar .telegram-account-search .telegram-search-input {
  width: 100% !important;
  display: block !important;
}

.telegram-search-input,
.overview-account-search input,
.forward-modal-search input,
.composer-emoji-search {
  background-image: none !important;
  padding-left: 32px !important;
}

.telegram-accountbar .telegram-account-search::before,
.telegram-left .telegram-search::before,
.overview-account-search::before,
.forward-modal-search::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  z-index: 6 !important;
  width: 15px !important;
  height: 15px !important;
  transform: translateY(-50%) !important;
  opacity: .58 !important;
  pointer-events: none !important;
  background: #8ea0b2 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18.2a7.4 7.4 0 1 1 0-14.8 7.4 7.4 0 0 1 0 14.8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.2 16.2 4.2 4.2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18.2a7.4 7.4 0 1 1 0-14.8 7.4 7.4 0 0 1 0 14.8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.2 16.2 4.2 4.2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.telegram-accountbar .telegram-account-search::before,
.overview-account-search::before,
.forward-modal-search::before {
  left: 11px !important;
}

.telegram-left .telegram-search::before {
  left: 21px !important;
}

.overview-account-search > span {
  display: none !important;
}

.composer-emoji-search {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18.2a7.4 7.4 0 1 1 0-14.8 7.4 7.4 0 0 1 0 14.8Z' stroke='%238EA0B2' stroke-width='2'/%3E%3Cpath d='m16.2 16.2 4.2 4.2' stroke='%238EA0B2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 11px 50% !important;
}

/* High quality 4K dialog wallpaper across the whole open chat window. */
.telegram-chat,
body.role-worker .telegram-chat {
  background-color: #050506 !important;
  background-image:
    linear-gradient(rgba(2, 4, 7, .12), rgba(2, 4, 7, .12)),
    url("/assets/dialog-doodle-background-4k.jpg?v=20260520-dialogs-doodle-v2") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.telegram-messages,
body.role-worker .telegram-messages {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Final targeted composer/left-panel overrides: order-sensitive, no palette changes. */
.telegram-send,
body.role-worker .telegram-send {
  border: 1px solid rgba(127, 145, 163, .28) !important;
  border-radius: 999px !important;
  background: rgba(23, 33, 43, .72) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 8px 18px rgba(0, 0, 0, .16) !important;
}

.telegram-send.is-voice,
body.role-worker .telegram-send.is-voice {
  color: #7f91a3 !important;
  border-color: rgba(127, 145, 163, .30) !important;
}

.telegram-send.is-send-ready,
.telegram-send.is-sending,
body.role-worker .telegram-send.is-send-ready,
body.role-worker .telegram-send.is-sending {
  color: #3390ec !important;
  border-color: rgba(51, 144, 236, .42) !important;
  background: rgba(51, 144, 236, .10) !important;
}

.telegram-send:disabled,
body.role-worker .telegram-send:disabled {
  opacity: .52 !important;
  cursor: default !important;
  transform: none !important;
}

.account-switcher-menu.dialog-mode-menu {
  min-height: min(420px, calc(100vh - 16px)) !important;
  max-height: calc(100vh - 16px) !important;
  grid-template-rows: auto auto minmax(120px, 1fr) auto auto auto !important;
}

.account-switcher-list,
.telegram-account-list,
.telegram-dialogs {
  scrollbar-width: thin;
}

.account-switcher-primary-actions,
.account-switcher-settings-panel,
.account-switcher-confirm {
  border-color: rgba(255, 255, 255, .055) !important;
}

.account-switcher-search input {
  box-sizing: border-box;
  padding-left: 37px !important;
}

.account-switcher-avatar.avatar,
.account-switcher-avatar.avatar.has-image,
.account-switcher-avatar.avatar.is-loading,
.account-switcher-avatar.avatar.is-miss {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.account-switcher-avatar.avatar::before,
.account-switcher-avatar.avatar::after {
  display: none !important;
}

.telegram-account,
.telegram-dialog,
.all-dialog-row {
  border-bottom: 1px solid rgba(255, 255, 255, .035) !important;
}

.telegram-account:last-child,
.telegram-dialog:last-child,
.all-dialog-row:last-child {
  border-bottom-color: transparent !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
  column-gap: 10px !important;
}

/* Final left-panel bugfix overrides: keep all-account mode as accounts -> dialogs -> chat. */
.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: minmax(220px, 280px) minmax(320px, 430px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-chat {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left > .telegram-search,
.telegram-shell.is-all-dialogs-mode #accountListMeta,
.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: grid !important;
}

.telegram-shell.is-all-dialogs-mode #accountListMeta,
.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: block !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-account {
  grid-template-columns: 48px minmax(0, 1fr) 38px !important;
}

.telegram-dialog.has-dialog-pin {
  grid-template-columns: 52px minmax(0, 1fr) 38px !important;
}

.dialog-pin-button {
  width: 34px !important;
  height: 34px !important;
  justify-self: center !important;
  align-self: center !important;
  font-size: 0 !important;
  opacity: .62 !important;
}

.telegram-dialog:hover .dialog-pin-button,
.telegram-dialog:focus-within .dialog-pin-button,
.dialog-pin-button:focus-visible,
.dialog-pin-button.is-pinned {
  opacity: 1 !important;
}

.telegram-accounts .avatar,
.telegram-left .dialog-avatar,
.account-selector-avatar.avatar,
.account-selector-mini-avatar.avatar,
.account-switcher-avatar.avatar,
.all-dialog-account-avatar.avatar {
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.telegram-accounts .avatar .avatar-image,
.telegram-accounts .avatar .avatar-initials,
.telegram-left .dialog-avatar .avatar-image,
.telegram-left .dialog-avatar .avatar-initials,
.account-selector-avatar.avatar .avatar-image,
.account-selector-avatar.avatar .avatar-initials,
.account-selector-mini-avatar.avatar .avatar-image,
.account-selector-mini-avatar.avatar .avatar-initials,
.account-switcher-avatar.avatar .avatar-image,
.account-switcher-avatar.avatar .avatar-initials,
.all-dialog-account-avatar.avatar .avatar-image,
.all-dialog-account-avatar.avatar .avatar-initials {
  border-radius: inherit !important;
  overflow: hidden !important;
}

.account-selector-avatar.avatar::before,
.account-selector-avatar.avatar::after,
.account-selector-mini-avatar.avatar::before,
.account-selector-mini-avatar.avatar::after,
.account-switcher-avatar.avatar::before,
.account-switcher-avatar.avatar::after,
.all-dialog-account-avatar.avatar::before,
.all-dialog-account-avatar.avatar::after {
  display: none !important;
}

@media (max-width: 900px) {
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell.is-all-dialogs-mode .telegram-accounts,
  .telegram-shell.is-all-dialogs-mode .telegram-left,
  .telegram-shell.is-all-dialogs-mode .telegram-chat {
    grid-column: 1 !important;
  }
}

/* Hotfix: all-accounts left column uses account cards, dialogs stay in the middle column. */
.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: minmax(260px, 320px) minmax(320px, 430px) minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accountbar {
  grid-template-columns: minmax(178px, 1fr) minmax(96px, .72fr) !important;
  column-gap: 8px !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-trigger {
  min-width: 0 !important;
  overflow: hidden !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-copy,
.telegram-shell.is-all-dialogs-mode .account-selector-title,
.telegram-shell.is-all-dialogs-mode .account-selector-subtitle {
  min-width: 0 !important;
  max-width: 100% !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-title,
.telegram-shell.is-all-dialogs-mode .account-selector-subtitle {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 8px !important;
  overflow-y: auto !important;
}

.all-mode-account-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(14px, auto) !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 6px !important;
  min-height: 88px !important;
  padding: 9px 7px !important;
  border: 1px solid rgba(255, 255, 255, .045) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background var(--motion-small, 140ms) var(--ease-standard, ease),
    border-color var(--motion-small, 140ms) var(--ease-standard, ease),
    transform var(--motion-instant, 80ms) var(--ease-standard, ease) !important;
}

.all-mode-account-card:hover,
.all-mode-account-card:focus-visible {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .075) !important;
}

.all-mode-account-card.is-active {
  background: rgba(51, 144, 236, .14) !important;
  border-color: rgba(51, 144, 236, .34) !important;
}

.all-mode-account-card .all-mode-account-avatar.avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.all-mode-account-card .all-mode-account-avatar.avatar .avatar-image,
.all-mode-account-card .all-mode-account-avatar.avatar .avatar-initials {
  border-radius: inherit !important;
  overflow: hidden !important;
}

.all-mode-account-card .all-mode-account-avatar.avatar::before,
.all-mode-account-card .all-mode-account-avatar.avatar::after {
  display: none !important;
}

.all-mode-account-name {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--tg-text, #e7eef5) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

.all-mode-account-unread {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: var(--tg-blue, #3390ec) !important;
  color: #fff !important;
}

.all-mode-account-card .account-presence {
  position: absolute !important;
  left: calc(50% + 12px) !important;
  top: 43px !important;
}

.telegram-dialog.has-dialog-pin {
  grid-template-columns: 52px minmax(0, 1fr) 38px !important;
}

.dialog-pin-button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  justify-self: center !important;
  align-self: center !important;
}

.dialog-pin-button svg {
  width: 18px !important;
  height: 18px !important;
}

@media (max-width: 900px) {
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell.is-all-dialogs-mode #inboxAccountList {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Final all-accounts reference layout: one dialog list with account identity inside each row. */
.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: clamp(360px, 32vw, 440px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: none !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-chat {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accountbar {
  grid-template-columns: minmax(190px, 1fr) minmax(110px, .78fr) !important;
  column-gap: 8px !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-trigger {
  min-width: 0 !important;
  overflow: hidden !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-copy,
.telegram-shell.is-all-dialogs-mode .account-selector-title,
.telegram-shell.is-all-dialogs-mode .account-selector-subtitle {
  min-width: 0 !important;
  max-width: 100% !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-title,
.telegram-shell.is-all-dialogs-mode .account-selector-subtitle {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.telegram-shell.is-all-dialogs-mode #accountListMeta {
  display: block !important;
  padding: 0 !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: block !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
  grid-template-columns: minmax(66px, 82px) 1px 42px minmax(0, 1fr) 34px !important;
  min-height: 76px !important;
  column-gap: 8px !important;
  padding: 8px 9px !important;
}

.all-dialog-account-block-wrap {
  min-width: 0 !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
}

.all-dialog-account-block {
  appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 34px minmax(0, auto) !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  padding: 5px 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #e7eef5 !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: center !important;
}

.all-dialog-account-block:hover,
.all-dialog-account-block:focus-visible {
  background: rgba(32, 43, 54, .62) !important;
}

.all-dialog-account-block:focus-visible {
  outline: 1px solid rgba(51, 144, 236, .50) !important;
  outline-offset: -1px !important;
}

.all-dialog-account-name {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 72px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #e7eef5 !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

.all-dialog-account-marker.avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  align-self: center !important;
  font-size: 11px !important;
}

.all-dialog-account-marker.avatar .avatar-image,
.all-dialog-account-marker.avatar .avatar-initials {
  border-radius: inherit !important;
  overflow: hidden !important;
}

.all-dialog-account-marker.avatar::before,
.all-dialog-account-marker.avatar::after {
  display: none !important;
}

.all-dialog-account-pill {
  min-width: 0 !important;
  height: 26px !important;
  max-width: 88px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  padding: 0 10px !important;
  border: 1px solid rgba(127, 145, 163, .22) !important;
  border-radius: 999px !important;
  color: #e7eef5 !important;
  background: rgba(23, 33, 43, .40) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.all-dialog-account-pill span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.all-dialog-account-divider {
  width: 1px !important;
  height: 28px !important;
  align-self: center !important;
  background: rgba(127, 145, 163, .16) !important;
}

.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  align-self: center !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-main {
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-name,
.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-preview,
.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-kind {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.all-dialog-actions {
  width: 34px !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
}

.all-dialog-pin-button {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
}

.all-dialog-pin-button svg {
  width: 17px !important;
  height: 17px !important;
}

@media (max-width: 900px) {
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell.is-all-dialogs-mode .telegram-accounts,
  .telegram-shell.is-all-dialogs-mode .telegram-chat {
    grid-column: 1 !important;
  }

  .telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
    grid-template-columns: minmax(58px, 70px) 1px 38px minmax(0, 1fr) 30px !important;
    min-height: 74px !important;
    column-gap: 6px !important;
    padding-inline: 7px !important;
  }

  .all-dialog-account-block {
    grid-template-rows: 30px minmax(0, auto) !important;
    padding-inline: 3px !important;
  }

  .all-dialog-account-name {
    max-width: 62px !important;
    font-size: 10px !important;
  }
}

/* Final left-panel bugfix overrides: keep all-account mode as accounts -> dialogs -> chat. */
.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: minmax(220px, 280px) minmax(320px, 430px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-chat {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left > .telegram-search,
.telegram-shell.is-all-dialogs-mode #accountListMeta,
.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: grid !important;
}

.telegram-shell.is-all-dialogs-mode #accountListMeta,
.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: block !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-account {
  grid-template-columns: 48px minmax(0, 1fr) 38px !important;
}

.telegram-dialog.has-dialog-pin {
  grid-template-columns: 52px minmax(0, 1fr) 38px !important;
}

.dialog-pin-button {
  width: 34px !important;
  height: 34px !important;
  justify-self: center !important;
  align-self: center !important;
  font-size: 0 !important;
  opacity: .62 !important;
}

.telegram-dialog:hover .dialog-pin-button,
.telegram-dialog:focus-within .dialog-pin-button,
.dialog-pin-button:focus-visible,
.dialog-pin-button.is-pinned {
  opacity: 1 !important;
}

.telegram-accounts .avatar,
.telegram-left .dialog-avatar,
.account-selector-avatar.avatar,
.account-selector-mini-avatar.avatar,
.account-switcher-avatar.avatar,
.all-dialog-account-avatar.avatar {
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.telegram-accounts .avatar .avatar-image,
.telegram-accounts .avatar .avatar-initials,
.telegram-left .dialog-avatar .avatar-image,
.telegram-left .dialog-avatar .avatar-initials,
.account-selector-avatar.avatar .avatar-image,
.account-selector-avatar.avatar .avatar-initials,
.account-selector-mini-avatar.avatar .avatar-image,
.account-selector-mini-avatar.avatar .avatar-initials,
.account-switcher-avatar.avatar .avatar-image,
.account-switcher-avatar.avatar .avatar-initials,
.all-dialog-account-avatar.avatar .avatar-image,
.all-dialog-account-avatar.avatar .avatar-initials {
  border-radius: inherit !important;
  overflow: hidden !important;
}

.account-selector-avatar.avatar::before,
.account-selector-avatar.avatar::after,
.account-selector-mini-avatar.avatar::before,
.account-selector-mini-avatar.avatar::after,
.account-switcher-avatar.avatar::before,
.account-switcher-avatar.avatar::after,
.all-dialog-account-avatar.avatar::before,
.all-dialog-account-avatar.avatar::after {
  display: none !important;
}

@media (max-width: 900px) {
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell.is-all-dialogs-mode .telegram-accounts,
  .telegram-shell.is-all-dialogs-mode .telegram-left,
  .telegram-shell.is-all-dialogs-mode .telegram-chat {
    grid-column: 1 !important;
  }
}

/* Targeted left-panel fixes: dropdown select mode, all-account account column, rounded avatars, pushpin direction. */
.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: minmax(220px, 280px) minmax(320px, 430px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-chat {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left > .telegram-search {
  display: grid !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-account {
  grid-template-columns: 48px minmax(0, 1fr) 38px !important;
}

.telegram-shell.is-all-dialogs-mode #accountListMeta {
  display: block !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: block !important;
}

.telegram-accounts .avatar,
.telegram-left .dialog-avatar,
.account-selector-avatar.avatar,
.account-selector-mini-avatar.avatar,
.account-switcher-avatar.avatar,
.all-dialog-account-avatar.avatar {
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.telegram-accounts .avatar .avatar-image,
.telegram-accounts .avatar .avatar-initials,
.telegram-left .dialog-avatar .avatar-image,
.telegram-left .dialog-avatar .avatar-initials,
.account-selector-avatar.avatar .avatar-image,
.account-selector-avatar.avatar .avatar-initials,
.account-selector-mini-avatar.avatar .avatar-image,
.account-selector-mini-avatar.avatar .avatar-initials,
.account-switcher-avatar.avatar .avatar-image,
.account-switcher-avatar.avatar .avatar-initials,
.all-dialog-account-avatar.avatar .avatar-image,
.all-dialog-account-avatar.avatar .avatar-initials {
  border-radius: inherit !important;
  overflow: hidden !important;
}

.account-selector-avatar.avatar::before,
.account-selector-avatar.avatar::after,
.account-selector-mini-avatar.avatar::before,
.account-selector-mini-avatar.avatar::after,
.account-switcher-avatar.avatar::before,
.account-switcher-avatar.avatar::after,
.all-dialog-account-avatar.avatar::before,
.all-dialog-account-avatar.avatar::after {
  display: none !important;
}

.telegram-dialog.has-dialog-pin {
  grid-template-columns: 52px minmax(0, 1fr) 38px !important;
}

.dialog-pin-button {
  width: 34px !important;
  height: 34px !important;
  justify-self: center !important;
  align-self: center !important;
  font-size: 0 !important;
  opacity: .62 !important;
}

.telegram-dialog:hover .dialog-pin-button,
.telegram-dialog:focus-within .dialog-pin-button,
.dialog-pin-button:focus-visible,
.dialog-pin-button.is-pinned {
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell.is-all-dialogs-mode .telegram-accounts,
  .telegram-shell.is-all-dialogs-mode .telegram-left,
  .telegram-shell.is-all-dialogs-mode .telegram-chat {
    grid-column: 1 !important;
  }
}

/* Targeted composer/action and left-panel polish. Keep existing palette, tighten layout only. */
.telegram-send,
body.role-worker .telegram-send {
  border: 1px solid rgba(127, 145, 163, .28) !important;
  border-radius: 999px !important;
  background: rgba(23, 33, 43, .72) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 8px 18px rgba(0, 0, 0, .16) !important;
}

.telegram-send.is-voice,
body.role-worker .telegram-send.is-voice {
  color: #7f91a3 !important;
  border-color: rgba(127, 145, 163, .30) !important;
}

.telegram-send.is-send-ready,
.telegram-send.is-sending,
body.role-worker .telegram-send.is-send-ready,
body.role-worker .telegram-send.is-sending {
  color: #3390ec !important;
  border-color: rgba(51, 144, 236, .42) !important;
  background: rgba(51, 144, 236, .10) !important;
}

.telegram-send:disabled,
body.role-worker .telegram-send:disabled {
  opacity: .52 !important;
  cursor: default !important;
  transform: none !important;
}

.telegram-account-list,
.telegram-dialogs,
.account-switcher-list {
  scrollbar-width: thin;
}

.telegram-account,
.telegram-dialog,
.all-dialog-row,
.dialog-folder-tile,
.all-dialogs-tabs button,
.account-switcher-row {
  contain: layout paint;
}

.telegram-account,
.telegram-dialog,
.all-dialog-row {
  border-bottom: 1px solid rgba(255, 255, 255, .035) !important;
}

.telegram-account:last-child,
.telegram-dialog:last-child,
.all-dialog-row:last-child {
  border-bottom-color: transparent !important;
}

.account-switcher-menu.dialog-mode-menu {
  min-height: min(420px, calc(100vh - 16px)) !important;
}

.account-switcher-primary-actions,
.account-switcher-settings-panel {
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.account-switcher-settings-panel {
  border-top: 1px solid rgba(255, 255, 255, .055);
  border-bottom: 0;
}

.account-switcher-confirm {
  border-top: 1px solid rgba(255, 255, 255, .055) !important;
}

.account-switcher-search input {
  box-sizing: border-box;
}

.account-switcher-row,
.account-switcher-row.has-select {
  min-width: 0 !important;
}

.account-switcher-avatar.avatar,
.account-switcher-avatar.avatar.has-image,
.account-switcher-avatar.avatar.is-loading,
.account-switcher-avatar.avatar.is-miss {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.account-switcher-row-copy,
.all-dialog-account-pill,
.dialog-copy {
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
  column-gap: 10px !important;
}

/* P0 restore guards: worker fullscreen containment + stable pinned message marker. */
.message-pin-marker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: 100% !important;
  margin: 0 0 5px !important;
  color: #6ab3ff !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  opacity: .92 !important;
}

.message-pin-marker svg {
  width: 13px !important;
  height: 13px !important;
  fill: currentColor !important;
}

.telegram-message.is-message-pinned .message-bubble {
  box-shadow:
    0 0 0 1px rgba(51, 144, 236, .14) inset,
    0 8px 20px rgba(0, 0, 0, .14) !important;
}

body.role-worker #appShell,
body.role-worker .app-shell,
body.role-worker .shell,
body.role-worker .main,
body.role-worker .content,
body.role-worker .telegram-inbox-stack {
  max-width: 100vw !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.role-worker .telegram-shell,
body.role-worker .telegram-shell.is-chat-open {
  width: 100% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  translate: none !important;
}

body.role-worker .telegram-shell.is-chat-open .telegram-chat,
body.role-worker .telegram-chat {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100vh !important;
  transform: none !important;
  translate: none !important;
  overflow: hidden !important;
}

body.role-worker .telegram-chat-head {
  position: relative !important;
  top: auto !important;
  min-height: 54px !important;
  flex: 0 0 auto !important;
  z-index: 8 !important;
}

body.role-worker .telegram-chat-head [data-chat-menu] {
  display: inline-grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.role-worker .telegram-messages {
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

body.role-worker .telegram-composer {
  flex: 0 0 auto !important;
}

@media (max-width: 900px) {
  body.role-worker .telegram-shell.is-chat-open .telegram-chat,
  body.role-worker .telegram-chat {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

/* Targeted WEB PANEL fixes: auth-pending, forward avatars, mobile chat containment. */
body.auth-pending #appShell,
body.app-booting #appShell {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.auth-pending #loginScreen,
body.app-booting #loginScreen {
  display: none !important;
}

.telegram-chat.motion-chat-open {
  animation: motionChatOpenSurface 220ms var(--ease-out-soft, cubic-bezier(.16,1,.3,1)) both;
}

.telegram-composer.motion-chat-composer-enter {
  animation: motionChatComposerEnter 170ms var(--ease-standard, cubic-bezier(.2,.8,.2,1)) both;
}

@keyframes motionChatOpenSurface {
  from {
    opacity: .86;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes motionChatComposerEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.forward-target-row {
  grid-template-columns: 46px minmax(0, 1fr) 28px !important;
  gap: 11px !important;
}

.forward-target-avatar.avatar,
.forward-target-row .forward-target-avatar.avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.055) inset,
    0 6px 16px rgba(0,0,0,.18) !important;
}

.forward-target-avatar .avatar-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.forward-target-avatar .avatar-initials {
  font-size: 13px !important;
  font-weight: 760 !important;
  color: #f2f7fb !important;
}

.mini-profile-channel-card .mini-profile-label {
  text-transform: none !important;
}

@media (max-width: 720px) {
  html,
  body,
  #appShell,
  .shell,
  .main,
  .content,
  .telegram-inbox-stack {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .telegram-shell,
  body.role-worker .telegram-shell,
  .telegram-shell.is-chat-open,
  body.role-worker .telegram-shell.is-chat-open {
    width: 100% !important;
    max-width: 100vw !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }

  .telegram-shell.is-chat-open .telegram-chat,
  body.role-worker .telegram-shell.is-chat-open .telegram-chat {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    transform: none !important;
    translate: none !important;
    left: auto !important;
    right: auto !important;
  }

  .telegram-shell.is-chat-open .telegram-chat-head,
  body.role-worker .telegram-shell.is-chat-open .telegram-chat-head,
  .telegram-shell.is-chat-open .telegram-messages,
  body.role-worker .telegram-shell.is-chat-open .telegram-messages,
  .telegram-shell.is-chat-open .telegram-composer,
  body.role-worker .telegram-shell.is-chat-open .telegram-composer {
    max-width: 100vw !important;
    min-width: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telegram-chat.motion-chat-open,
  .telegram-composer.motion-chat-composer-enter {
    animation-duration: 80ms !important;
    transform: none !important;
  }
}

/* Telegram left panel mechanics: selected account header, real folders, all-account rows. */
.telegram-shell:not(.is-all-dialogs-mode) {
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.telegram-shell:not(.is-all-dialogs-mode) .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-height: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell:not(.is-all-dialogs-mode) .telegram-left {
  grid-column: 1 !important;
  grid-row: 2 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell:not(.is-all-dialogs-mode) .telegram-chat {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}

.telegram-shell:not(.is-all-dialogs-mode) #accountListMeta,
.telegram-shell:not(.is-all-dialogs-mode) #inboxAccountList,
.telegram-shell:not(.is-all-dialogs-mode) .telegram-left > .telegram-search {
  display: none !important;
}

.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: minmax(380px, 500px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: none !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-chat {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.telegram-accountbar {
  grid-template-columns: minmax(155px, .88fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}

.account-selector-trigger.telegram-icon-button {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  text-align: left !important;
  color: #e7eef5 !important;
  background: transparent !important;
}

.account-selector-trigger:hover,
.account-selector-trigger:focus-visible,
.account-selector-trigger[aria-expanded="true"] {
  background: #202b36 !important;
  color: #e7eef5 !important;
}

.account-selector-avatar.avatar,
.account-selector-mini-avatar.avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 11px !important;
}

.account-selector-stack {
  display: inline-flex;
  align-items: center;
  min-width: 42px;
}

.account-selector-stack .account-selector-mini-avatar.avatar {
  margin-left: -12px;
  box-shadow: 0 0 0 2px #17212b;
}

.account-selector-stack .account-selector-mini-avatar.avatar:first-child {
  margin-left: 0;
}

.account-selector-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.account-selector-title,
.account-selector-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-selector-title {
  color: #e7eef5;
  font-size: 13px;
  line-height: 16px;
  font-weight: 760;
}

.account-selector-subtitle {
  color: #7f91a3;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
}

.account-selector-arrow {
  color: #7f91a3;
  font-size: 16px;
}

.account-switcher-menu.dialog-mode-menu {
  width: min(340px, calc(100vw - 16px)) !important;
  max-height: calc(100vh - 16px) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(120px, 1fr) auto auto auto !important;
}

.account-switcher-primary-actions {
  display: grid;
  gap: 2px;
  padding: 4px;
}

.account-switcher-search {
  position: relative;
  display: block;
  padding: 5px 6px 8px;
}

.account-switcher-search-icon {
  position: absolute;
  left: 17px;
  top: 50%;
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  color: #7f91a3;
  pointer-events: none;
  transform: translateY(-44%);
}

.account-switcher-search-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-switcher-search input {
  width: 100%;
  height: 36px;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: #242f3d;
  color: #e7eef5;
  padding: 0 13px 0 37px;
}

.account-switcher-list {
  min-height: 0;
  overflow: auto;
  padding: 4px 0;
}

.account-switcher-row {
  width: 100%;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto 28px !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 6px 8px !important;
  background: transparent !important;
}

.account-switcher-row.has-select {
  grid-template-columns: 24px 38px minmax(0, 1fr) auto 28px !important;
}

.account-switcher-row.is-active,
.account-switcher-row.is-selected,
.account-switcher-row:hover,
.account-switcher-row:focus-visible {
  background: #202b36 !important;
}

.account-switcher-check {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(127, 145, 163, .48);
  border-radius: 999px;
  color: #6ab3ff;
  font-size: 12px;
  font-weight: 900;
}

.account-switcher-row.is-selected .account-switcher-check {
  border-color: rgba(51, 144, 236, .7);
  background: rgba(51, 144, 236, .18);
}

.account-switcher-avatar.avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.account-switcher-avatar.avatar::after,
.account-switcher-avatar.avatar::before {
  display: none !important;
}

.account-switcher-row-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.account-switcher-row-copy strong,
.account-switcher-row-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-switcher-row-copy strong {
  color: #e7eef5;
  font-size: 13px;
  line-height: 17px;
}

.account-switcher-row-copy small {
  color: #7f91a3;
  font-size: 12px;
  line-height: 16px;
}

.account-switcher-dots {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #7f91a3;
}

.account-switcher-dots:hover {
  background: #243243;
  color: #6ab3ff;
}

.account-switcher-empty {
  padding: 14px;
  color: #7f91a3;
  text-align: center;
  font-size: 13px;
}

.account-switcher-confirm {
  margin: 4px !important;
}

.account-switcher-confirm:disabled {
  opacity: .45 !important;
  cursor: default !important;
}

.account-switcher-settings-panel {
  padding: 4px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.account-switcher-settings-panel [data-settings-sound-toggle] {
  transition:
    background-color 170ms cubic-bezier(.2,.8,.2,1),
    color 170ms cubic-bezier(.2,.8,.2,1),
    transform 140ms cubic-bezier(.2,.9,.25,1.12) !important;
}

.account-switcher-settings-panel [data-settings-sound-toggle]:hover,
.account-switcher-settings-panel [data-settings-sound-toggle]:focus-visible {
  color: #ffffff !important;
  background: rgba(51, 144, 236, .14) !important;
}

.account-switcher-settings-panel [data-settings-sound-toggle]:active {
  transform: scale(.985) !important;
}

.telegram-dialog-folders {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 7px 8px !important;
}

.dialog-folder-tile {
  height: 52px !important;
  border-radius: 12px !important;
  gap: 4px !important;
  font-size: 10.5px !important;
}

.dialog-folder-icon {
  width: 22px !important;
  height: 22px !important;
}

.dialog-folder-icon.is-archive::before {
  content: "";
  width: 13px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px;
  box-shadow: 0 -4px 0 -2px currentColor;
  opacity: .72;
}

.all-dialogs-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 8px;
}

.all-dialogs-tabs button {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(127, 145, 163, .22);
  border-radius: 999px;
  background: transparent;
  color: #7f91a3;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 760;
}

.all-dialogs-tabs button.is-active {
  border-color: rgba(51, 144, 236, .46);
  background: rgba(51, 144, 236, .14);
  color: #e7eef5;
}

.all-dialogs-tabs button b {
  color: inherit;
  font-size: 11px;
  opacity: .82;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
  grid-template-columns: 72px 1px 42px minmax(0, 1fr) 28px !important;
  min-height: 76px !important;
}

.all-dialog-account-pill {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #7f91a3;
  font-size: 10.5px;
  line-height: 12px;
  font-weight: 760;
}

.all-dialog-account-pill span:last-child {
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-dialog-account-avatar.avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 10px !important;
}

.all-dialog-account-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(127, 145, 163, .16);
}

@media (max-width: 900px) {
  .telegram-shell:not(.is-all-dialogs-mode),
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell:not(.is-all-dialogs-mode) .telegram-accounts,
  .telegram-shell:not(.is-all-dialogs-mode) .telegram-left,
  .telegram-shell.is-all-dialogs-mode .telegram-accounts {
    grid-column: 1 !important;
  }

  .telegram-shell:not(.is-all-dialogs-mode) .telegram-chat,
  .telegram-shell.is-all-dialogs-mode .telegram-chat {
    grid-column: 1 !important;
  }
}

@media (max-width: 720px) {
  .telegram-accountbar {
    grid-template-columns: minmax(132px, .78fr) minmax(0, 1fr) !important;
    padding: 7px 8px !important;
  }

  .account-selector-trigger.telegram-icon-button {
    height: 40px !important;
    min-height: 40px !important;
  }

  .telegram-dialog-folders {
    grid-template-columns: repeat(4, minmax(64px, 1fr)) !important;
    overflow-x: auto;
  }

  .telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
    grid-template-columns: 58px 1px 38px minmax(0, 1fr) 28px !important;
  }

  .all-dialog-account-pill span:last-child {
    max-width: 50px;
  }
}

.telegram-chat-head,
body.role-worker .telegram-chat-head {
  background: rgba(23, 33, 43, .92) !important;
  backdrop-filter: blur(8px) !important;
}

.telegram-composer,
body.role-worker .telegram-composer,
.reply-preview,
.composer-notice {
  background: rgba(23, 33, 43, .90) !important;
  backdrop-filter: blur(8px) !important;
}

.telegram-shell .telegram-chat,
.telegram-shell .telegram-chat.is-empty-dialog,
.telegram-shell.is-chat-open .telegram-chat,
body.role-worker .telegram-shell .telegram-chat,
body.role-worker .telegram-shell .telegram-chat.is-empty-dialog,
body.role-worker .telegram-shell.is-chat-open .telegram-chat {
  background-color: #050506 !important;
  background-image:
    linear-gradient(rgba(2, 4, 7, .12), rgba(2, 4, 7, .12)),
    url("/assets/dialog-doodle-background-4k.jpg?v=20260520-dialogs-doodle-v2") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#loginScreen.login-screen {
  --auth-card: #202020;
  --auth-card-top: #242424;
  --auth-field: #242326;
  --auth-field-border: #7f66e9;
  --auth-field-border-hot: #9c82ff;
  --auth-text: #f3f0fb;
  --auth-muted: #a5a2ab;
  --auth-button-a: #8069df;
  --auth-button-b: #5743ad;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 28px;
  overflow: hidden;
  color: var(--auth-text);
  color-scheme: dark;
  background-color: #030304;
  background-image: url("/assets/auth-doodle-background-4k.jpg?v=20260520-finance-doodle-v2");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#loginScreen.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .08);
}

#loginScreen.login-screen::after {
  content: none;
}

#loginScreen.login-screen.is-hidden {
  display: none;
}

#loginScreen .login-card {
  position: relative;
  z-index: 1;
  width: min(320px, calc(100vw - 42px));
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
  margin: 0;
  padding: 24px 24px 34px;
  border: 1px solid rgba(255, 255, 255, .035);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 44%),
    linear-gradient(180deg, var(--auth-card-top), var(--auth-card));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .48),
    0 2px 0 rgba(255, 255, 255, .035) inset,
    0 -1px 0 rgba(0, 0, 0, .45) inset;
  animation: loginCardEnter 220ms cubic-bezier(.16, 1, .3, 1) both;
}

#loginScreen .login-mascot {
  display: grid;
  place-items: center;
  flex: 0 0 86px;
  min-width: 0;
  line-height: 1;
  user-select: none;
}

#loginScreen .login-mascot img {
  width: 92px;
  height: 88px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 7px 14px rgba(0, 0, 0, .30));
}

#loginScreen .login-field {
  display: block;
  flex: 0 0 52px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#loginScreen .login-password-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

#loginScreen .login-field input,
#loginScreen .login-field input:hover,
#loginScreen .login-field input:focus,
#loginScreen .login-field input:focus-visible,
#loginScreen .login-field input:active {
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 15px;
  border: 2px solid var(--auth-field-border);
  border-radius: 8px;
  outline: none;
  color: var(--auth-text);
  background: var(--auth-field);
  box-shadow:
    0 0 0 1px rgba(180, 160, 255, .12) inset,
    0 10px 22px rgba(0, 0, 0, .14);
  caret-color: var(--auth-field-border-hot);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
  appearance: none;
  -webkit-appearance: none;
}

#loginScreen .login-password-wrap input {
  padding-right: 48px;
}

#loginScreen .login-field input::placeholder {
  color: var(--auth-muted);
  opacity: 1;
}

#loginScreen .login-field input:focus,
#loginScreen .login-field input:focus-visible {
  border-color: var(--auth-field-border-hot);
  background: #252429;
  box-shadow:
    0 0 0 3px rgba(137, 112, 255, .20),
    0 0 22px rgba(125, 96, 235, .22),
    0 0 0 1px rgba(221, 213, 255, .14) inset;
}

#loginScreen .login-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--auth-text);
  caret-color: var(--auth-field-border-hot);
  box-shadow: 0 0 0 1000px var(--auth-field) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--auth-field) inset;
  transition: background-color 9999s ease-out;
}

#loginScreen .login-field input::selection {
  color: #ffffff;
  background: rgba(139, 112, 255, .34);
}

#loginScreen .login-password-wrap button,
#loginScreen .login-password-wrap button:hover,
#loginScreen .login-password-wrap button:focus,
#loginScreen .login-password-wrap button:focus-visible {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: transparent;
  background: transparent;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 120ms ease, opacity 120ms ease;
}

#loginScreen .login-password-wrap button::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background: #b8b6bf;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.6 12s3.4-5.4 9.4-5.4 9.4 5.4 9.4 5.4-3.4 5.4-9.4 5.4S2.6 12 2.6 12Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.6 12s3.4-5.4 9.4-5.4 9.4 5.4 9.4 5.4-3.4 5.4-9.4 5.4S2.6 12 2.6 12Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

#loginScreen .login-password-wrap button:hover::before,
#loginScreen .login-password-wrap button:focus-visible::before {
  background: #ffffff;
}

#loginScreen .login-password-wrap button:hover,
#loginScreen .login-password-wrap button:focus-visible {
  background: rgba(255, 255, 255, .06);
}

#loginScreen .login-submit,
#loginScreen .login-submit:hover,
#loginScreen .login-submit:focus,
#loginScreen .login-submit:focus-visible {
  position: relative;
  flex: 0 0 49px;
  width: 100%;
  height: 49px;
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #f7f4ff;
  background: linear-gradient(135deg, var(--auth-button-a), var(--auth-button-b));
  box-shadow:
    0 16px 28px rgba(63, 45, 144, .30),
    0 1px 0 rgba(255, 255, 255, .18) inset;
  outline: none;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  transition:
    filter 140ms ease,
    box-shadow 140ms ease,
    transform 100ms ease;
}

#loginScreen .login-submit:hover,
#loginScreen .login-submit:focus-visible {
  filter: brightness(1.06);
  box-shadow:
    0 18px 34px rgba(85, 63, 182, .36),
    0 0 0 3px rgba(137, 112, 255, .16),
    0 1px 0 rgba(255, 255, 255, .20) inset;
}

#loginScreen .login-submit:active {
  transform: scale(.992);
}

#loginScreen .login-submit:disabled {
  cursor: wait;
  opacity: .82;
}

#loginScreen .login-submit.is-loading {
  color: transparent;
}

#loginScreen .login-submit.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  margin: -10px 0 0 -10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: rgba(255, 255, 255, .92);
  animation: telegramCircularLoader 760ms cubic-bezier(.42, .12, .28, .94) infinite;
}

#loginScreen .login-error {
  align-self: stretch;
  min-height: 0;
  margin: -6px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 98, 132, .46);
  border-radius: 8px;
  color: #ffdce6;
  background: rgba(36, 20, 34, .94);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.28;
}

#loginScreen .login-error.is-hidden {
  display: none;
}

@media (max-width: 700px) {
  #loginScreen.login-screen {
    padding: 20px;
    background-size: cover;
  }

  #loginScreen .login-card {
    width: min(320px, calc(100vw - 36px));
    gap: 16px;
    padding: 23px 22px 30px;
  }

  #loginScreen .login-mascot {
    flex-basis: 76px;
  }

  #loginScreen .login-mascot img {
    width: 84px;
    height: 80px;
  }

  #loginScreen .login-field {
    flex-basis: 50px;
  }

  #loginScreen .login-submit,
  #loginScreen .login-submit:hover,
  #loginScreen .login-submit:focus,
  #loginScreen .login-submit:focus-visible {
    flex-basis: 48px;
    height: 48px;
  }

  #loginScreen .login-field input,
  #loginScreen .login-field input:hover,
  #loginScreen .login-field input:focus,
  #loginScreen .login-field input:focus-visible,
  #loginScreen .login-field input:active {
    height: 50px;
    font-size: 15px;
  }
}

@media (max-height: 540px) {
  #loginScreen.login-screen {
    align-items: start;
    padding-top: 18px;
    overflow-y: auto;
  }

}

/* Dialog wallpaper: same finance doodle style as auth, calmer for message readability. */
.telegram-chat,
body.role-worker .telegram-chat,
.telegram-shell .telegram-chat,
.telegram-shell .telegram-chat.is-empty-dialog,
.telegram-shell.is-chat-open .telegram-chat,
body.role-worker .telegram-shell .telegram-chat,
body.role-worker .telegram-shell .telegram-chat.is-empty-dialog,
body.role-worker .telegram-shell.is-chat-open .telegram-chat {
  background-color: #030304 !important;
  background-image:
    linear-gradient(rgba(1, 2, 5, .12), rgba(1, 2, 5, .12)),
    url("/assets/dialog-doodle-background-4k.jpg?v=20260520-dialogs-doodle-v2") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.telegram-chat::before,
body.role-worker .telegram-chat::before {
  background: transparent !important;
  background-image: none !important;
}

.telegram-messages,
body.role-worker .telegram-messages {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Final targeted composer/left-panel overrides: order-sensitive, no palette changes. */
.telegram-send,
body.role-worker .telegram-send {
  border: 1px solid rgba(127, 145, 163, .28) !important;
  border-radius: 999px !important;
  background: rgba(23, 33, 43, .72) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 8px 18px rgba(0, 0, 0, .16) !important;
}

.telegram-send.is-voice,
body.role-worker .telegram-send.is-voice {
  color: #7f91a3 !important;
  border-color: rgba(127, 145, 163, .30) !important;
}

.telegram-send.is-send-ready,
.telegram-send.is-sending,
body.role-worker .telegram-send.is-send-ready,
body.role-worker .telegram-send.is-sending {
  color: #3390ec !important;
  border-color: rgba(51, 144, 236, .42) !important;
  background: rgba(51, 144, 236, .10) !important;
}

.telegram-send:disabled,
body.role-worker .telegram-send:disabled {
  opacity: .52 !important;
  cursor: default !important;
  transform: none !important;
}

.account-switcher-menu.dialog-mode-menu {
  min-height: min(420px, calc(100vh - 16px)) !important;
  max-height: calc(100vh - 16px) !important;
  grid-template-rows: auto auto minmax(120px, 1fr) auto auto auto !important;
}

.account-switcher-list,
.telegram-account-list,
.telegram-dialogs {
  scrollbar-width: thin;
}

.account-switcher-primary-actions,
.account-switcher-settings-panel,
.account-switcher-confirm {
  border-color: rgba(255, 255, 255, .055) !important;
}

.account-switcher-search input {
  box-sizing: border-box;
  padding-left: 37px !important;
}

.account-switcher-avatar.avatar,
.account-switcher-avatar.avatar.has-image,
.account-switcher-avatar.avatar.is-loading,
.account-switcher-avatar.avatar.is-miss {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.account-switcher-avatar.avatar::before,
.account-switcher-avatar.avatar::after {
  display: none !important;
}

.telegram-account,
.telegram-dialog,
.all-dialog-row {
  border-bottom: 1px solid rgba(255, 255, 255, .035) !important;
}

.telegram-account:last-child,
.telegram-dialog:last-child,
.all-dialog-row:last-child {
  border-bottom-color: transparent !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
  column-gap: 10px !important;
}

/* Final left-panel bugfix overrides: keep all-account mode as accounts -> dialogs -> chat. */
.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: minmax(220px, 280px) minmax(320px, 430px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-chat {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left > .telegram-search,
.telegram-shell.is-all-dialogs-mode #accountListMeta,
.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: grid !important;
}

.telegram-shell.is-all-dialogs-mode #accountListMeta,
.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: block !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-account {
  grid-template-columns: 48px minmax(0, 1fr) 38px !important;
}

.telegram-dialog.has-dialog-pin {
  grid-template-columns: 52px minmax(0, 1fr) 38px !important;
}

.dialog-pin-button {
  width: 34px !important;
  height: 34px !important;
  justify-self: center !important;
  align-self: center !important;
  font-size: 0 !important;
  opacity: .62 !important;
}

.telegram-dialog:hover .dialog-pin-button,
.telegram-dialog:focus-within .dialog-pin-button,
.dialog-pin-button:focus-visible,
.dialog-pin-button.is-pinned {
  opacity: 1 !important;
}

.telegram-accounts .avatar,
.telegram-left .dialog-avatar,
.account-selector-avatar.avatar,
.account-selector-mini-avatar.avatar,
.account-switcher-avatar.avatar,
.all-dialog-account-avatar.avatar {
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.telegram-accounts .avatar .avatar-image,
.telegram-accounts .avatar .avatar-initials,
.telegram-left .dialog-avatar .avatar-image,
.telegram-left .dialog-avatar .avatar-initials,
.account-selector-avatar.avatar .avatar-image,
.account-selector-avatar.avatar .avatar-initials,
.account-selector-mini-avatar.avatar .avatar-image,
.account-selector-mini-avatar.avatar .avatar-initials,
.account-switcher-avatar.avatar .avatar-image,
.account-switcher-avatar.avatar .avatar-initials,
.all-dialog-account-avatar.avatar .avatar-image,
.all-dialog-account-avatar.avatar .avatar-initials {
  border-radius: inherit !important;
  overflow: hidden !important;
}

.account-selector-avatar.avatar::before,
.account-selector-avatar.avatar::after,
.account-selector-mini-avatar.avatar::before,
.account-selector-mini-avatar.avatar::after,
.account-switcher-avatar.avatar::before,
.account-switcher-avatar.avatar::after,
.all-dialog-account-avatar.avatar::before,
.all-dialog-account-avatar.avatar::after {
  display: none !important;
}

@media (max-width: 900px) {
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell.is-all-dialogs-mode .telegram-accounts,
  .telegram-shell.is-all-dialogs-mode .telegram-left,
  .telegram-shell.is-all-dialogs-mode .telegram-chat {
    grid-column: 1 !important;
  }
}

/* Final all-accounts reference layout: one dialog list with account identity inside each row. */
.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: clamp(360px, 32vw, 440px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: none !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-chat {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accountbar {
  grid-template-columns: minmax(190px, 1fr) minmax(110px, .78fr) !important;
  column-gap: 8px !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-trigger {
  min-width: 0 !important;
  overflow: hidden !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-copy,
.telegram-shell.is-all-dialogs-mode .account-selector-title,
.telegram-shell.is-all-dialogs-mode .account-selector-subtitle {
  min-width: 0 !important;
  max-width: 100% !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-title,
.telegram-shell.is-all-dialogs-mode .account-selector-subtitle {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.telegram-shell.is-all-dialogs-mode #accountListMeta {
  display: block !important;
  padding: 0 !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: block !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
  grid-template-columns: 34px minmax(68px, 88px) 1px 42px minmax(0, 1fr) 34px !important;
  min-height: 66px !important;
  column-gap: 8px !important;
  padding: 8px 9px !important;
}

.all-dialog-account-marker.avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  align-self: center !important;
  font-size: 11px !important;
}

.all-dialog-account-marker.avatar .avatar-image,
.all-dialog-account-marker.avatar .avatar-initials {
  border-radius: inherit !important;
  overflow: hidden !important;
}

.all-dialog-account-marker.avatar::before,
.all-dialog-account-marker.avatar::after {
  display: none !important;
}

.all-dialog-account-pill {
  min-width: 0 !important;
  height: 26px !important;
  max-width: 88px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  padding: 0 10px !important;
  border: 1px solid rgba(127, 145, 163, .22) !important;
  border-radius: 999px !important;
  color: #e7eef5 !important;
  background: rgba(23, 33, 43, .40) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.all-dialog-account-pill span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.all-dialog-account-divider {
  width: 1px !important;
  height: 28px !important;
  align-self: center !important;
  background: rgba(127, 145, 163, .16) !important;
}

.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  align-self: center !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-main {
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-name,
.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-preview,
.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-kind {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.all-dialog-actions {
  width: 34px !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
}

.all-dialog-pin-button {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
}

.all-dialog-pin-button svg {
  width: 17px !important;
  height: 17px !important;
}

@media (max-width: 900px) {
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell.is-all-dialogs-mode .telegram-accounts,
  .telegram-shell.is-all-dialogs-mode .telegram-chat {
    grid-column: 1 !important;
  }

  .telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
    grid-template-columns: 30px minmax(58px, 76px) 1px 38px minmax(0, 1fr) 30px !important;
    column-gap: 6px !important;
    padding-inline: 7px !important;
  }

  .all-dialog-account-pill {
    max-width: 76px !important;
    padding-inline: 8px !important;
  }
}

/* Final scoped override: clickable account block inside all-account rows. */
.telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
  grid-template-columns: minmax(66px, 82px) 1px 42px minmax(0, 1fr) 34px !important;
  min-height: 76px !important;
}

.all-dialog-account-block-wrap {
  min-width: 0 !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
}

.all-dialog-account-block {
  appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 34px minmax(0, auto) !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  padding: 5px 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #e7eef5 !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: center !important;
}

.all-dialog-account-block:hover,
.all-dialog-account-block:focus-visible {
  background: rgba(32, 43, 54, .62) !important;
}

.all-dialog-account-block:focus-visible {
  outline: 1px solid rgba(51, 144, 236, .50) !important;
  outline-offset: -1px !important;
}

.all-dialog-account-name {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 72px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #e7eef5 !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  .telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
    grid-template-columns: minmax(58px, 70px) 1px 38px minmax(0, 1fr) 30px !important;
    min-height: 74px !important;
  }

  .all-dialog-account-block {
    grid-template-rows: 30px minmax(0, auto) !important;
    padding-inline: 3px !important;
  }

  .all-dialog-account-name {
    max-width: 62px !important;
    font-size: 10px !important;
  }
}

/* Final mode split: account list mode is accounts -> dialogs -> chat; all dialogs is flat list -> chat. */
.telegram-shell.is-single-account-mode {
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.telegram-shell.is-single-account-mode .telegram-accounts {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-single-account-mode .telegram-left {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-single-account-mode .telegram-chat {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  min-width: 0 !important;
}

.telegram-shell.is-single-account-mode #accountListMeta,
.telegram-shell.is-single-account-mode #inboxAccountList,
.telegram-shell.is-single-account-mode .telegram-left > .telegram-search {
  display: none !important;
}

.telegram-shell.is-single-account-mode .telegram-accountbar {
  grid-template-columns: minmax(170px, .95fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}

.telegram-shell.is-single-account-mode .account-selector-trigger {
  min-width: 0 !important;
}

.telegram-shell.is-single-account-mode .account-selector-copy {
  min-width: 0 !important;
}

.telegram-shell.is-account-list-mode {
  grid-template-columns: minmax(260px, 320px) minmax(320px, 430px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.telegram-shell.is-account-list-mode .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-account-list-mode .telegram-left {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-account-list-mode .telegram-chat {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.telegram-shell.is-account-list-mode #accountListMeta,
.telegram-shell.is-account-list-mode #inboxAccountList {
  display: block !important;
}

.telegram-shell.is-account-list-mode #inboxAccountList {
  min-height: 0 !important;
  overflow-y: auto !important;
}

.telegram-shell.is-account-list-mode .telegram-left > .telegram-search {
  display: flex !important;
}

.telegram-shell.is-account-list-mode .telegram-accountbar {
  grid-template-columns: minmax(178px, 1.15fr) minmax(86px, .85fr) !important;
  gap: 8px !important;
}

.telegram-shell.is-account-list-mode .account-selector-stack .account-selector-mini-avatar.avatar {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
}

.telegram-shell.is-account-list-mode .account-selector-stack .account-selector-mini-avatar.avatar + .account-selector-mini-avatar.avatar {
  margin-left: -8px !important;
}

.telegram-shell.is-account-list-mode .account-selector-title {
  max-width: none !important;
  white-space: nowrap !important;
}

.telegram-shell.is-account-list-mode .telegram-account {
  grid-template-columns: 48px minmax(0, 1fr) 34px !important;
}

.telegram-shell.is-all-dialogs-mode {
  grid-template-columns: clamp(360px, 32vw, 440px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-right: 1px solid #0f1a24 !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-left {
  display: none !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-chat {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.telegram-shell.is-all-dialogs-mode #accountListMeta,
.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  display: block !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  min-height: 0 !important;
  overflow-y: auto !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
  grid-template-columns: 42px minmax(0, 1fr) 34px !important;
  min-height: 66px !important;
  column-gap: 10px !important;
  padding: 8px 10px !important;
}

.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}

.telegram-shell.is-all-dialogs-mode .all-dialog-row .dialog-kind {
  color: #7f91a3 !important;
  font-size: 11px !important;
}

@media (max-width: 900px) {
  .telegram-shell.is-single-account-mode,
  .telegram-shell.is-account-list-mode,
  .telegram-shell.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  .telegram-shell.is-single-account-mode .telegram-accounts,
  .telegram-shell.is-single-account-mode .telegram-left,
  .telegram-shell.is-single-account-mode .telegram-chat,
  .telegram-shell.is-account-list-mode .telegram-accounts,
  .telegram-shell.is-account-list-mode .telegram-left,
  .telegram-shell.is-account-list-mode .telegram-chat,
  .telegram-shell.is-all-dialogs-mode .telegram-accounts,
  .telegram-shell.is-all-dialogs-mode .telegram-chat {
    grid-column: 1 !important;
  }

  .telegram-shell.is-single-account-mode .telegram-chat {
    grid-row: 1 !important;
  }

  .telegram-shell.is-all-dialogs-mode #inboxAccountList > .all-dialog-row {
    grid-template-columns: 38px minmax(0, 1fr) 30px !important;
  }
}

/* Final left-panel header polish: one selector + one search, spanning the whole left side in account-list modes. */
.telegram-shell.is-account-list-mode .telegram-left > .telegram-search {
  display: none !important;
}

.telegram-shell.is-account-list-mode .telegram-accountbar,
.telegram-shell.is-single-account-mode .telegram-accountbar,
.telegram-shell.is-all-dialogs-mode .telegram-accountbar {
  align-items: center !important;
}

.telegram-shell.is-account-list-mode .account-selector-trigger,
.telegram-shell.is-single-account-mode .account-selector-trigger,
.telegram-shell.is-all-dialogs-mode .account-selector-trigger {
  overflow: hidden !important;
}

.telegram-shell.is-account-list-mode .telegram-accountbar .telegram-account-search,
.telegram-shell.is-single-account-mode .telegram-accountbar .telegram-account-search,
.telegram-shell.is-all-dialogs-mode .telegram-accountbar .telegram-account-search {
  display: block !important;
  min-width: 0 !important;
}

.telegram-shell.is-account-list-mode .telegram-accountbar .telegram-search-input,
.telegram-shell.is-single-account-mode .telegram-accountbar .telegram-search-input,
.telegram-shell.is-all-dialogs-mode .telegram-accountbar .telegram-search-input {
  height: 42px !important;
  border-radius: 13px !important;
}

@media (min-width: 901px) {
  .telegram-shell.is-account-list-mode {
    grid-template-columns: minmax(260px, 320px) minmax(320px, 430px) minmax(0, 1fr) !important;
    grid-template-rows: 60px auto minmax(0, 1fr) !important;
  }

  .telegram-shell.is-account-list-mode .telegram-accounts {
    display: contents !important;
  }

  .telegram-shell.is-account-list-mode .telegram-accountbar {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(210px, 300px) minmax(220px, 1fr) !important;
    gap: 10px !important;
    min-width: 0 !important;
    border-right: 1px solid #0f1a24 !important;
    border-bottom: 1px solid #0f1a24 !important;
  }

  .telegram-shell.is-account-list-mode #accountListMeta {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    border-right: 1px solid #0f1a24 !important;
  }

  .telegram-shell.is-account-list-mode #inboxAccountList {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-right: 1px solid #0f1a24 !important;
  }

  .telegram-shell.is-account-list-mode .telegram-left {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .telegram-shell.is-account-list-mode .telegram-chat {
    grid-column: 3 !important;
    grid-row: 1 / span 3 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-stack .account-selector-mini-avatar.avatar {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-title {
    max-width: none !important;
    overflow: visible !important;
  }
}

/* Desktop-only accountbar alignment pass: keep one selector + one search as separate, even blocks. */
@media (min-width: 901px) {
  .telegram-shell.is-account-list-mode {
    --dialogs-account-col: 300px;
    --dialogs-list-col: minmax(360px, 430px);
    grid-template-columns: var(--dialogs-account-col) var(--dialogs-list-col) minmax(0, 1fr) !important;
    grid-template-rows: 64px auto minmax(0, 1fr) !important;
  }

  .telegram-shell.is-single-account-mode .telegram-accountbar,
  .telegram-shell.is-account-list-mode .telegram-accountbar,
  .telegram-shell.is-all-dialogs-mode .telegram-accountbar {
    height: 64px !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    background: #17212b !important;
    border-bottom: 1px solid #0f1a24 !important;
  }

  .telegram-shell.is-single-account-mode .telegram-accountbar {
    grid-template-columns: minmax(210px, 230px) minmax(0, 1fr) !important;
  }

  .telegram-shell.is-account-list-mode .telegram-accountbar {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    grid-template-columns: var(--dialogs-account-col) minmax(0, 1fr) !important;
    border-right: 1px solid #0f1a24 !important;
  }

  .telegram-shell.is-all-dialogs-mode .telegram-accountbar {
    grid-template-columns: minmax(200px, 220px) minmax(0, 1fr) !important;
  }

  .telegram-shell.is-single-account-mode .account-selector-trigger.telegram-icon-button,
  .telegram-shell.is-account-list-mode .account-selector-trigger.telegram-icon-button,
  .telegram-shell.is-all-dialogs-mode .account-selector-trigger.telegram-icon-button {
    height: 44px !important;
    min-height: 44px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 9px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    background: #242f3d !important;
    color: #e7eef5 !important;
    overflow: hidden !important;
  }

  .telegram-shell.is-single-account-mode .account-selector-trigger.telegram-icon-button:hover,
  .telegram-shell.is-single-account-mode .account-selector-trigger.telegram-icon-button:focus-visible,
  .telegram-shell.is-single-account-mode .account-selector-trigger.telegram-icon-button[aria-expanded="true"],
  .telegram-shell.is-account-list-mode .account-selector-trigger.telegram-icon-button:hover,
  .telegram-shell.is-account-list-mode .account-selector-trigger.telegram-icon-button:focus-visible,
  .telegram-shell.is-account-list-mode .account-selector-trigger.telegram-icon-button[aria-expanded="true"],
  .telegram-shell.is-all-dialogs-mode .account-selector-trigger.telegram-icon-button:hover,
  .telegram-shell.is-all-dialogs-mode .account-selector-trigger.telegram-icon-button:focus-visible,
  .telegram-shell.is-all-dialogs-mode .account-selector-trigger.telegram-icon-button[aria-expanded="true"] {
    background: #243243 !important;
  }

  .telegram-shell.is-single-account-mode .telegram-accountbar .telegram-account-search,
  .telegram-shell.is-account-list-mode .telegram-accountbar .telegram-account-search,
  .telegram-shell.is-all-dialogs-mode .telegram-accountbar .telegram-account-search {
    height: 44px !important;
    min-height: 44px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .telegram-shell.is-single-account-mode .telegram-accountbar .telegram-search-input,
  .telegram-shell.is-account-list-mode .telegram-accountbar .telegram-search-input,
  .telegram-shell.is-all-dialogs-mode .telegram-accountbar .telegram-search-input {
    height: 44px !important;
    min-height: 44px !important;
    width: 100% !important;
    padding: 0 14px 0 36px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    border-radius: 14px !important;
    background: #242f3d !important;
    line-height: 44px !important;
  }

  .telegram-shell.is-single-account-mode .telegram-accountbar .telegram-account-search::before,
  .telegram-shell.is-account-list-mode .telegram-accountbar .telegram-account-search::before,
  .telegram-shell.is-all-dialogs-mode .telegram-accountbar .telegram-account-search::before {
    left: 13px !important;
    width: 15px !important;
    height: 15px !important;
  }

  .telegram-shell.is-single-account-mode .account-selector-avatar.avatar,
  .telegram-shell.is-account-list-mode .account-selector-avatar.avatar,
  .telegram-shell.is-all-dialogs-mode .account-selector-avatar.avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .telegram-shell.is-single-account-mode .account-selector-stack,
  .telegram-shell.is-account-list-mode .account-selector-stack,
  .telegram-shell.is-all-dialogs-mode .account-selector-stack {
    min-width: 50px !important;
    max-width: 76px !important;
    overflow: visible !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-stack .account-selector-mini-avatar.avatar {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
  }

  .telegram-shell.is-single-account-mode .account-selector-stack .account-selector-mini-avatar.avatar,
  .telegram-shell.is-all-dialogs-mode .account-selector-stack .account-selector-mini-avatar.avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }

  .telegram-shell.is-single-account-mode .account-selector-stack .account-selector-mini-avatar.avatar + .account-selector-mini-avatar.avatar,
  .telegram-shell.is-account-list-mode .account-selector-stack .account-selector-mini-avatar.avatar + .account-selector-mini-avatar.avatar,
  .telegram-shell.is-all-dialogs-mode .account-selector-stack .account-selector-mini-avatar.avatar + .account-selector-mini-avatar.avatar {
    margin-left: -8px !important;
  }

  .telegram-shell.is-single-account-mode .account-selector-copy,
  .telegram-shell.is-account-list-mode .account-selector-copy,
  .telegram-shell.is-all-dialogs-mode .account-selector-copy {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .telegram-shell.is-single-account-mode .account-selector-title,
  .telegram-shell.is-account-list-mode .account-selector-title,
  .telegram-shell.is-all-dialogs-mode .account-selector-title {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-title {
    font-size: 12.5px !important;
  }

  .telegram-shell.is-single-account-mode .account-selector-arrow,
  .telegram-shell.is-account-list-mode .account-selector-arrow,
  .telegram-shell.is-all-dialogs-mode .account-selector-arrow {
    width: 14px !important;
    justify-self: end !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  .telegram-shell.is-account-list-mode .telegram-left > .telegram-search,
  .telegram-shell.is-single-account-mode .telegram-left > .telegram-search,
  .telegram-shell.is-all-dialogs-mode .telegram-left > .telegram-search {
    display: none !important;
  }

  .telegram-shell.is-account-list-mode #accountListMeta {
    grid-column: 1 !important;
    grid-row: 2 !important;
    border-right: 1px solid #0f1a24 !important;
    border-bottom: 1px solid #0f1a24 !important;
    box-sizing: border-box !important;
  }

  .telegram-shell.is-account-list-mode #inboxAccountList {
    grid-column: 1 !important;
    grid-row: 3 !important;
    border-right: 1px solid #0f1a24 !important;
    box-sizing: border-box !important;
  }

  .telegram-shell.is-account-list-mode .telegram-left {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    border-right: 1px solid #0f1a24 !important;
    box-sizing: border-box !important;
  }

  .telegram-shell.is-account-list-mode .telegram-chat {
    grid-column: 3 !important;
    grid-row: 1 / span 3 !important;
    min-width: 0 !important;
  }

  .telegram-shell.is-all-dialogs-mode .telegram-accounts {
    display: grid !important;
    grid-template-rows: 64px minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .telegram-shell.is-all-dialogs-mode #accountListMeta {
    display: none !important;
  }

  .telegram-shell.is-all-dialogs-mode #inboxAccountList {
    grid-row: 2 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* Desktop dropdown select-mode alignment: checkmark owns a centered column without moving avatar/text. */
@media (min-width: 901px) {
  .account-switcher-row.has-select {
    grid-template-columns: 30px 38px minmax(0, 1fr) auto 28px !important;
    column-gap: 8px !important;
    align-items: center !important;
  }

  .account-switcher-check {
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .account-switcher-row.has-select .account-switcher-avatar.avatar {
    grid-column: 2 !important;
    justify-self: center !important;
  }

  .account-switcher-row.has-select .account-switcher-row-copy {
    grid-column: 3 !important;
  }

  .account-switcher-row.has-select .unread-badge,
  .account-switcher-row.has-select > span:nth-last-child(2) {
    grid-column: 4 !important;
    justify-self: end !important;
  }

  .account-switcher-row.has-select .account-switcher-dots {
    grid-column: 5 !important;
    justify-self: center !important;
  }
}

/* Desktop single-account folder tabs: compact Telegram-like row, no old tile/cards. */
@media (min-width: 901px) {
  .telegram-dialog-folders {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-bottom: 1px solid #0f1a24 !important;
    background: #17212b !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .dialog-folder-tile {
    all: unset !important;
  }

  .dialog-folder-tab,
  .dialog-folder-tile {
    position: relative !important;
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 0 1px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #8a9bad !important;
    font-size: 12px !important;
    line-height: 40px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: color 150ms ease !important;
  }

  .dialog-folder-tab::after,
  .dialog-folder-tile::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    border-radius: 999px 999px 0 0 !important;
    background: var(--ops-violet-2, #8b5cf6) !important;
    opacity: 0 !important;
    transform: scaleX(.62) !important;
    transform-origin: center !important;
    transition: opacity 150ms ease, transform 150ms ease !important;
  }

  .dialog-folder-tab:hover,
  .dialog-folder-tab:focus-visible,
  .dialog-folder-tile:hover,
  .dialog-folder-tile:focus-visible {
    color: #c7d2df !important;
    outline: none !important;
  }

  .dialog-folder-tab.is-active,
  .dialog-folder-tile.is-active {
    color: var(--ops-violet-2, #8b5cf6) !important;
  }

  .dialog-folder-tab.is-active::after,
  .dialog-folder-tile.is-active::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }

  .dialog-folder-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: currentColor !important;
    color: inherit !important;
    box-shadow: none !important;
    opacity: .96 !important;
    display: inline-block !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
  }

  .dialog-folder-icon::before,
  .dialog-folder-icon::after {
    content: none !important;
    display: none !important;
  }

  .dialog-folder-icon.is-archive {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 8.2h15v10.3a1.8 1.8 0 0 1-1.8 1.8H6.3a1.8 1.8 0 0 1-1.8-1.8V8.2Z' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M6.2 4.6h11.6l1.7 3.6h-15l1.7-3.6Z' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9.4 11.4h5.2' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 8.2h15v10.3a1.8 1.8 0 0 1-1.8 1.8H6.3a1.8 1.8 0 0 1-1.8-1.8V8.2Z' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M6.2 4.6h11.6l1.7 3.6h-15l1.7-3.6Z' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9.4 11.4h5.2' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  }

  .dialog-folder-icon.is-private,
  .dialog-folder-icon.is-avatar {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.4' r='3' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M3.8 19.3c.7-3.4 2.4-5.1 4.7-5.1s4 1.7 4.7 5.1' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='16.4' cy='8.9' r='2.3' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M14.1 14.2c2.2.1 3.8 1.5 4.4 4.1' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.4' r='3' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M3.8 19.3c.7-3.4 2.4-5.1 4.7-5.1s4 1.7 4.7 5.1' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='16.4' cy='8.9' r='2.3' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M14.1 14.2c2.2.1 3.8 1.5 4.4 4.1' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  }

  .dialog-folder-icon.is-chats,
  .dialog-folder-icon.is-file {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 6.1h13.6v9.3H9.2L5.2 19v-3.6h0V6.1Z' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M8.5 9.6h7M8.5 12.3h4.7' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 6.1h13.6v9.3H9.2L5.2 19v-3.6h0V6.1Z' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M8.5 9.6h7M8.5 12.3h4.7' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  }

  .dialog-folder-icon.is-channels,
  .dialog-folder-icon.is-star {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.3 11.8 19.8 5l-3.1 14.2-4.3-4.2-2.8 2.7.2-4.2 7.6-6.3-9.6 5.2-3.5-.6Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.3 11.8 19.8 5l-3.1 14.2-4.3-4.2-2.8 2.7.2-4.2 7.6-6.3-9.6 5.2-3.5-.6Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  .dialog-folder-label {
    min-width: 0 !important;
  }
}

/* Desktop account-list selector: keep "All accounts" identity even after focusing an account. */
@media (min-width: 901px) {
  .telegram-shell.is-account-list-mode .account-selector-trigger.telegram-icon-button {
    grid-template-columns: auto minmax(0, 1fr) 16px !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-stack {
    min-width: 68px !important;
    max-width: 74px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-stack .account-selector-mini-avatar.avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 10px !important;
    box-shadow: 0 0 0 2px #242f3d !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-stack .account-selector-mini-avatar.avatar + .account-selector-mini-avatar.avatar {
    margin-left: -9px !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-stack .avatar::before,
  .telegram-shell.is-account-list-mode .account-selector-stack .avatar::after,
  .telegram-shell.is-account-list-mode .account-selector-stack .account-presence {
    content: none !important;
    display: none !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-copy.is-account-list-copy {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-copy.is-account-list-copy .account-selector-title {
    font-size: 13px !important;
    line-height: 18px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .telegram-shell.is-account-list-mode .account-selector-arrow {
    align-self: center !important;
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    margin: 0 !important;
    transform: translateY(-1px) !important;
  }
}

/* Flat all-dialogs selector is a single-line identity label. */
.telegram-shell.is-all-dialogs-mode .account-selector-copy {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.telegram-shell.is-all-dialogs-mode .account-selector-subtitle {
  display: none !important;
}

/* Desktop single-account hard reset: one left dialogs column + one full-width chat column. */
@media (min-width: 901px) {
  .telegram-shell.is-single-account-mode,
  body.role-worker .telegram-shell.is-single-account-mode {
    display: grid !important;
    grid-template-columns: clamp(380px, 31vw, 440px) minmax(0, 1fr) !important;
    grid-template-rows: 64px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .telegram-shell.is-single-account-mode .telegram-accounts,
  body.role-worker .telegram-shell.is-single-account-mode .telegram-accounts {
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .telegram-shell.is-single-account-mode .telegram-accountbar,
  body.role-worker .telegram-shell.is-single-account-mode .telegram-accountbar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(210px, 230px) minmax(0, 1fr) !important;
    height: 64px !important;
    min-height: 64px !important;
    min-width: 0 !important;
    border-right: 1px solid #0f1a24 !important;
    border-bottom: 1px solid #0f1a24 !important;
    box-sizing: border-box !important;
  }

  .telegram-shell.is-single-account-mode #accountListMeta,
  .telegram-shell.is-single-account-mode #inboxAccountList,
  body.role-worker .telegram-shell.is-single-account-mode #accountListMeta,
  body.role-worker .telegram-shell.is-single-account-mode #inboxAccountList {
    display: none !important;
  }

  .telegram-shell.is-single-account-mode .telegram-left,
  body.role-worker .telegram-shell.is-single-account-mode .telegram-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-right: 1px solid #0f1a24 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .telegram-shell.is-single-account-mode .telegram-left > .telegram-search,
  body.role-worker .telegram-shell.is-single-account-mode .telegram-left > .telegram-search {
    display: none !important;
  }

  .telegram-shell.is-single-account-mode #legacyAccountMeta,
  body.role-worker .telegram-shell.is-single-account-mode #legacyAccountMeta {
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #0f1a24 !important;
    box-sizing: border-box !important;
  }

  .telegram-shell.is-single-account-mode #dialogList,
  body.role-worker .telegram-shell.is-single-account-mode #dialogList {
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .telegram-shell.is-single-account-mode .telegram-chat,
  body.role-worker .telegram-shell.is-single-account-mode .telegram-chat {
    grid-column: 2 / -1 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }
}

/* Final account health/admin overrides. */
.overview-account-status.is-reconnecting,
.overview-account-status.is-flood_wait {
  color: var(--ov-amber, #e0a84f) !important;
  background: rgba(224, 168, 79, .13) !important;
}

.overview-account-status.is-auth_failed,
.overview-account-status.is-session_invalid,
.overview-account-status.is-session_missing,
.overview-account-status.is-error {
  color: var(--ov-red, #e05264) !important;
  background: rgba(224, 82, 100, .14) !important;
}

.overview-account-status.is-offline,
.overview-account-status.is-idle {
  color: var(--ov-muted, #7f91a3) !important;
  background: rgba(127, 145, 163, .13) !important;
}

.overview-account-healthline {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: var(--ov-text, #e7eef5) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
}

.overview-account-healthline span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.overview-account-healthline b {
  max-width: 46% !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  padding: 4px 7px !important;
  color: #ffd7dd !important;
  background: rgba(224, 82, 100, .14) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.overview-icon-button {
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid var(--ov-border, rgba(127,145,163,.22)) !important;
  border-radius: 999px !important;
  padding: 0 !important;
  color: var(--ov-text, #e7eef5) !important;
  background: rgba(255,255,255,.045) !important;
  cursor: pointer !important;
}

.overview-icon-button svg,
.overview-action-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.overview-icon-button:hover,
.overview-icon-button:focus-visible {
  border-color: var(--ov-border-strong, rgba(51,144,236,.32)) !important;
  color: #fff !important;
  background: rgba(51, 144, 236, .16) !important;
  outline: none !important;
}

.overview-icon-button.danger {
  color: #ffd7dd !important;
  border-color: rgba(224, 82, 100, .34) !important;
  background: rgba(224, 82, 100, .10) !important;
}

.overview-icon-button.danger:hover,
.overview-icon-button.danger:focus-visible {
  color: #fff !important;
  background: rgba(224, 82, 100, .18) !important;
  box-shadow: 0 0 0 3px rgba(224, 82, 100, .10) !important;
}

.overview-action-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 960 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(0, 0, 0, .46) !important;
}

.overview-action-modal {
  position: relative !important;
  width: min(430px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 28px) !important;
  display: grid !important;
  gap: 14px !important;
  overflow: auto !important;
  border: 1px solid rgba(127, 145, 163, .25) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  color: #e7eef5 !important;
  background: #17212b !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48) !important;
}

.overview-action-modal-head {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding-right: 30px !important;
}

.overview-action-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #8ac0f6 !important;
  background: rgba(51, 144, 236, .16) !important;
}

.overview-action-icon.danger {
  color: #ffd7dd !important;
  background: rgba(224, 82, 100, .16) !important;
}

.overview-action-modal h2,
.overview-action-modal p {
  margin: 0 !important;
}

.overview-action-modal h2 {
  overflow-wrap: anywhere !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.overview-action-modal-head p,
.overview-action-copy {
  color: #93a4b5 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.overview-action-field {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
  color: #93a4b5 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.overview-action-field input {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  border: 1px solid rgba(127, 145, 163, .25) !important;
  border-radius: 10px !important;
  padding: 0 11px !important;
  color: #e7eef5 !important;
  background: #242f3d !important;
  outline: none !important;
}

.overview-action-result {
  display: none !important;
  gap: 5px !important;
  border-radius: 10px !important;
  padding: 10px 11px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.overview-action-result.is-error,
.overview-action-result.is-warning,
.overview-action-result.is-ok {
  display: grid !important;
}

.overview-action-result.is-error {
  color: #ffd7dd !important;
  background: rgba(224, 82, 100, .13) !important;
}

.overview-action-result.is-warning {
  color: #ffe6b8 !important;
  background: rgba(224, 168, 79, .14) !important;
}

.overview-action-result.is-ok {
  color: #c9f6dd !important;
  background: rgba(79, 208, 139, .13) !important;
}

.overview-action-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.telegram-account.is-disabled,
.telegram-account[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .62 !important;
}

.telegram-account.is-connection-auth_failed .account-avatar::after,
.telegram-account.is-connection-session_invalid .account-avatar::after,
.telegram-account.is-connection-session_missing .account-avatar::after,
.telegram-account.is-connection-flood_wait .account-avatar::after {
  background: #e05264 !important;
}

.telegram-account.is-connection-reconnecting .account-avatar::after {
  background: #e0a84f !important;
}

@media (max-width: 640px) {
  .overview-account-top {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  .overview-account-status {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .overview-action-modal {
    width: min(100%, calc(100vw - 18px)) !important;
    padding: 16px !important;
  }
}

/* Frontend handoff fixes: account selector, pin, switcher, composer. */
.account-selector-trigger .account-presence,
.account-selector-trigger .avatar::before,
.account-selector-trigger .avatar::after,
.account-selector-trigger .account-selector-mini-avatar::before,
.account-selector-trigger .account-selector-mini-avatar::after {
  content: none !important;
  display: none !important;
}

.dialog-mode-button::after,
.account-selector-trigger::after {
  content: none !important;
  display: none !important;
}

.telegram-shell .account-selector-arrow {
  width: 16px !important;
  height: 16px !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
  color: #7f91a3 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.telegram-shell .account-selector-arrow::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.6px solid currentColor !important;
  border-bottom: 1.6px solid currentColor !important;
  transform: rotate(45deg) translateY(-1px) !important;
  transform-origin: center !important;
}

#accountListMeta:empty,
#legacyAccountMeta:empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.telegram-shell.is-account-list-mode #accountListMeta,
.telegram-shell.is-all-dialogs-mode #accountListMeta {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

@media (min-width: 901px) {
  .telegram-shell.is-account-list-mode {
    grid-template-rows: 64px minmax(0, 1fr) !important;
  }

  .telegram-shell.is-account-list-mode #inboxAccountList {
    grid-row: 2 !important;
  }

  .telegram-shell.is-account-list-mode .telegram-left {
    grid-row: 2 !important;
  }

  .telegram-shell.is-account-list-mode .telegram-chat {
    grid-row: 1 / span 2 !important;
  }
}

.telegram-pin-button,
.account-pin-button,
.dialog-pin-button,
.all-dialog-pin-button {
  border: 0 !important;
  background: transparent !important;
  color: #7f91a3 !important;
  box-shadow: none !important;
}

.telegram-pin-button svg,
.telegram-pin-button svg path,
.account-pin-button svg,
.account-pin-button svg path,
.dialog-pin-button svg,
.dialog-pin-button svg path,
.all-dialog-pin-button svg,
.all-dialog-pin-button svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.telegram-pin-button svg,
.account-pin-button svg,
.dialog-pin-button svg,
.all-dialog-pin-button svg {
  width: 18px !important;
  height: 18px !important;
}

.telegram-pin-button:hover,
.telegram-pin-button:focus-visible,
.account-pin-button:hover,
.account-pin-button:focus-visible,
.dialog-pin-button:hover,
.dialog-pin-button:focus-visible,
.all-dialog-pin-button:hover,
.all-dialog-pin-button:focus-visible {
  color: #8ac0f6 !important;
  background: rgba(51, 144, 236, .08) !important;
  outline: none !important;
}

.telegram-pin-button.is-pinned,
.account-pin-button.is-pinned,
.dialog-pin-button.is-pinned,
.all-dialog-pin-button.is-pinned {
  color: #6ab3ff !important;
  background: rgba(51, 144, 236, .10) !important;
  opacity: 1 !important;
}

.account-switcher-row,
.account-switcher-row.has-select {
  border-bottom: 1px solid rgba(127, 145, 163, .075) !important;
}

.account-switcher-row {
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  min-height: 52px !important;
}

.account-switcher-row.has-select {
  grid-template-columns: 30px 38px minmax(0, 1fr) auto !important;
}

.account-switcher-row:last-child {
  border-bottom: 0 !important;
}

.account-switcher-dots {
  display: none !important;
}

.account-switcher-row.is-disabled {
  cursor: not-allowed !important;
  opacity: .55 !important;
}

.account-switcher-check {
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 0 !important;
  transform: none !important;
}

.account-switcher-row.is-selected .account-switcher-check::before {
  content: "" !important;
  width: 8px !important;
  height: 5px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(-45deg) translateY(-1px) !important;
  transform-origin: center !important;
}

.account-switcher-row.is-selected .account-switcher-check {
  color: #fff !important;
  border-color: rgba(51, 144, 236, .85) !important;
  background: #3390ec !important;
}

.account-switcher-row-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

.account-switcher-row-copy strong,
.account-switcher-row-copy small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.telegram-composer,
body.role-worker .telegram-composer {
  height: auto !important;
  min-height: 48px !important;
  max-height: calc(33dvh + 72px) !important;
  align-items: end !important;
}

.telegram-textarea,
body.role-worker .telegram-textarea {
  min-height: 36px !important;
  max-height: min(33dvh, 220px) !important;
  resize: none !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(127, 145, 163, .48) transparent !important;
}

.telegram-textarea.is-scrollable,
body.role-worker .telegram-textarea.is-scrollable {
  overflow-y: auto !important;
}

.telegram-textarea::-webkit-scrollbar {
  width: 6px;
}

.telegram-textarea::-webkit-scrollbar-track {
  background: transparent;
}

.telegram-textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(127, 145, 163, .42);
}

@media (max-width: 700px) {
  .telegram-composer,
  body.role-worker .telegram-composer {
    max-height: calc(33dvh + 62px) !important;
  }

  .telegram-textarea,
  body.role-worker .telegram-textarea {
    max-height: min(33dvh, 180px) !important;
  }
}

@media (max-width: 700px) {
  .telegram-shell.is-account-list-mode {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .telegram-shell.is-account-list-mode .telegram-accounts,
  .telegram-shell.is-account-list-mode .telegram-left,
  .telegram-shell.is-account-list-mode .telegram-chat,
  .telegram-shell.is-account-list-mode #inboxAccountList {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .telegram-shell.is-account-list-mode #inboxAccountList {
    overflow-x: hidden !important;
  }

  .telegram-shell.is-account-list-mode .telegram-account {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 40px minmax(0, 1fr) 30px !important;
    column-gap: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .telegram-shell.is-account-list-mode .telegram-account .account-main,
  .telegram-shell.is-account-list-mode .telegram-account .account-name,
  .telegram-shell.is-account-list-mode .telegram-account .account-phone,
  .telegram-shell.is-account-list-mode .telegram-account .account-username,
  .telegram-shell.is-account-list-mode .telegram-account .account-tail-row {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .telegram-shell.is-account-list-mode .telegram-account .account-name,
  .telegram-shell.is-account-list-mode .telegram-account .account-phone,
  .telegram-shell.is-account-list-mode .telegram-account .account-username {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .telegram-shell.is-account-list-mode .telegram-pin-button,
  .telegram-shell.is-account-list-mode .account-pin-button {
    justify-self: end !important;
  }
}

.account-switcher-select-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  color: #6ab3ff !important;
}

.account-switcher-select-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.dialog-folder-tab:hover,
.dialog-folder-tab:focus-visible,
.dialog-folder-tile:hover,
.dialog-folder-tile:focus-visible,
.all-dialogs-tabs button:hover,
.all-dialogs-tabs button:focus-visible {
  color: #6ab3ff !important;
}

.dialog-folder-tab.is-active,
.dialog-folder-tile.is-active,
.all-dialogs-tabs button.is-active {
  color: #3390ec !important;
  border-color: rgba(51, 144, 236, .50) !important;
  background: rgba(51, 144, 236, .14) !important;
}

.dialog-folder-tab::after,
.dialog-folder-tile::after,
.dialog-folder-tab.is-active::after,
.dialog-folder-tile.is-active::after {
  background: #3390ec !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-template-rows: 64px auto minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode #accountListMeta {
  display: block !important;
  grid-row: 2 !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 2px 0 6px !important;
  border: 0 !important;
  overflow: visible !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  grid-row: 3 !important;
}

.block-reason-card {
  width: min(390px, calc(100vw - 36px)) !important;
}

.block-reason-field {
  display: grid !important;
  gap: 8px !important;
  color: #8fa1b2 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.block-reason-field textarea {
  width: 100% !important;
  min-height: 96px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  border: 1px solid rgba(127, 145, 163, .22) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  color: #e7eef5 !important;
  background: #111b26 !important;
  outline: none !important;
  font: inherit !important;
  text-transform: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(127, 145, 163, .48) transparent !important;
}

.block-reason-field textarea:focus {
  border-color: rgba(51, 144, 236, .62) !important;
  box-shadow: 0 0 0 3px rgba(51, 144, 236, .14) !important;
}

body.role-worker .telegram-chat [data-chat-menu],
body.role-worker .telegram-chat .chat-action-button,
body.role-worker .telegram-chat .message-menu-trigger,
body.role-worker .telegram-chat .message-mobile-menu,
body.role-worker .telegram-chat .message-reaction-trigger,
body.role-worker .telegram-chat .message-reply-button,
body.role-worker .telegram-chat [data-reply-message],
body.role-worker .telegram-chat [data-reaction-picker],
body.role-worker .telegram-chat [data-action-menu],
body.role-worker .telegram-chat [data-forward-message],
body.role-worker .telegram-chat [data-pin-message],
body.role-worker .telegram-chat [data-delete-message] {
  visibility: visible !important;
  pointer-events: auto;
}

/* Final dialogs/front-end bug pass, 20260526-bugs-ui-v2. */
body.auth-pending,
body.app-booting {
  background: #0e1621 !important;
}

body.auth-pending #appShell,
body.auth-pending #loginScreen,
body.app-booting #appShell,
body.app-booting #loginScreen {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.role-admin.tab-inbox .topbar,
body.role-admin.tab-inbox #safetyNotice,
body.role-admin.tab-inbox .live-inbox-top-panel {
  display: none !important;
}

body.role-admin.tab-inbox .main {
  min-height: 100vh !important;
  padding: 0 !important;
  background: #0e1621 !important;
}

body.role-admin.tab-inbox .content,
body.role-admin.tab-inbox .telegram-inbox-stack {
  min-height: 100vh !important;
  gap: 0 !important;
}

body.role-admin.tab-inbox .telegram-shell {
  height: 100vh !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body.role-admin.tab-inbox .telegram-inbox-stack {
  padding: 0 !important;
}

.motion-mode-switch .telegram-accounts,
.motion-mode-switch .telegram-dialogs,
.motion-column-enter {
  animation: none !important;
}

.motion-mobile-chat-enter .telegram-messages,
.motion-mobile-chat-enter .telegram-shell,
.motion-mobile-chat-enter .telegram-dialogs,
.motion-mobile-list-enter .telegram-accounts,
.motion-mobile-list-enter .telegram-dialogs,
.motion-chat-header-enter,
.motion-chat-list-enter,
.telegram-chat.motion-chat-open,
.telegram-composer.motion-chat-composer-enter {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.telegram-shell.is-mode-switching .telegram-accounts,
.telegram-shell.is-mode-switching .telegram-left {
  opacity: 1 !important;
  transform: none !important;
}

.dialog-mode-button::after {
  display: none !important;
}

.account-switcher-primary-dot {
  width: 7px !important;
  height: 7px !important;
  display: inline-block !important;
  border-radius: 999px !important;
  background: #3390ec !important;
  box-shadow: 0 0 0 2px rgba(51, 144, 236, .12) !important;
  transform: translateY(-1px) !important;
}

.account-switcher-menu button span,
.account-switcher-menu button i,
.account-switcher-select-icon,
.account-switcher-confirm-icon {
  transition:
    color 170ms cubic-bezier(.2,.8,.2,1),
    background-color 170ms cubic-bezier(.2,.8,.2,1),
    border-color 170ms cubic-bezier(.2,.8,.2,1),
    transform 170ms cubic-bezier(.2,.9,.25,1.12),
    box-shadow 170ms cubic-bezier(.2,.8,.2,1) !important;
}

.account-switcher-select-icon {
  color: #7f91a3 !important;
}

.account-switcher-select-icon svg {
  stroke: currentColor !important;
}

.account-switcher-primary-actions button:hover span,
.account-switcher-primary-actions button:focus-visible span,
.account-switcher-primary-actions button.is-active span,
.account-switcher-confirm:hover span,
.account-switcher-confirm:focus-visible span {
  color: #6ab3ff !important;
}

.account-switcher-primary-actions button:hover .account-switcher-select-icon,
.account-switcher-primary-actions button:focus-visible .account-switcher-select-icon,
.account-switcher-primary-actions button.is-active .account-switcher-select-icon {
  color: #6ab3ff !important;
  transform: scale(1.04) !important;
}

.account-switcher-check {
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid rgba(142, 160, 178, .24) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  transition:
    background-color 170ms cubic-bezier(.2,.8,.2,1),
    border-color 170ms cubic-bezier(.2,.8,.2,1),
    color 170ms cubic-bezier(.2,.8,.2,1),
    transform 170ms cubic-bezier(.2,.9,.25,1.12) !important;
}

.account-switcher-row:hover .account-switcher-check,
.account-switcher-row:focus-visible .account-switcher-check {
  border-color: rgba(106, 179, 255, .42) !important;
}

.account-switcher-row.is-selected .account-switcher-check {
  color: #fff !important;
  border-color: rgba(51, 144, 236, .72) !important;
  background: #3390ec !important;
}

.account-switcher-row.is-selected .account-switcher-check::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 8px !important;
  height: 5px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translate(-50%, -64%) rotate(-45deg) !important;
  transform-origin: center !important;
}

.account-switcher-confirm {
  color: #e7eef5 !important;
  background: rgba(51, 144, 236, .08) !important;
  transition:
    background-color 180ms cubic-bezier(.2,.8,.2,1),
    color 180ms cubic-bezier(.2,.8,.2,1),
    transform 160ms cubic-bezier(.2,.9,.25,1.12) !important;
}

.account-switcher-confirm-icon {
  width: 20px !important;
  height: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #7f91a3 !important;
  background: rgba(127, 145, 163, .12) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.account-switcher-confirm:hover,
.account-switcher-confirm:focus-visible {
  background: rgba(51, 144, 236, .16) !important;
  color: #6ab3ff !important;
}

.account-switcher-confirm:hover .account-switcher-confirm-icon,
.account-switcher-confirm:focus-visible .account-switcher-confirm-icon {
  color: #3390ec !important;
  background: rgba(51, 144, 236, .18) !important;
  transform: scale(1.05) !important;
}

.telegram-dialog-folders,
.all-dialogs-tabs {
  background: #17212b !important;
}

.dialog-folder-tab,
.dialog-folder-tile,
.all-dialogs-tabs button {
  position: relative !important;
  overflow: visible !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    color 160ms cubic-bezier(.2,.8,.2,1),
    transform 120ms cubic-bezier(.2,.9,.25,1.12) !important;
}

.dialog-folder-tab:hover,
.dialog-folder-tab:focus-visible,
.dialog-folder-tile:hover,
.dialog-folder-tile:focus-visible,
.all-dialogs-tabs button:hover,
.all-dialogs-tabs button:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  color: #6ab3ff !important;
}

.dialog-folder-tab.is-active,
.dialog-folder-tile.is-active,
.all-dialogs-tabs button.is-active {
  border-color: transparent !important;
  background: transparent !important;
  color: #3390ec !important;
}

.dialog-folder-tab::after,
.dialog-folder-tile::after,
.all-dialogs-tabs button::after {
  content: "" !important;
  position: absolute !important;
  left: 18% !important;
  right: 18% !important;
  bottom: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #3390ec !important;
  opacity: 0 !important;
  transform: scaleX(.55) !important;
  transform-origin: center !important;
  transition:
    opacity 160ms cubic-bezier(.2,.8,.2,1),
    transform 160ms cubic-bezier(.2,.8,.2,1) !important;
}

.dialog-folder-tab.is-active::after,
.dialog-folder-tile.is-active::after,
.all-dialogs-tabs button.is-active::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.dialog-folder-tab .dialog-folder-icon,
.dialog-folder-tile .dialog-folder-icon {
  color: inherit !important;
  transition: color 160ms cubic-bezier(.2,.8,.2,1) !important;
}

@media (max-width: 900px) {
  .dialog-folder-tab,
  .dialog-folder-tile {
    height: 42px !important;
    border-radius: 0 !important;
    padding-bottom: 2px !important;
  }

  .dialog-folder-tab .dialog-folder-icon,
  .dialog-folder-tile .dialog-folder-icon {
    border-color: transparent !important;
    background: transparent !important;
  }
}

.message-action-menu,
.message-action-menu.is-portaled {
  transition:
    min-height 180ms cubic-bezier(.2,.8,.2,1),
    height 180ms cubic-bezier(.2,.8,.2,1),
    opacity 140ms cubic-bezier(.2,.8,.2,1),
    transform 140ms cubic-bezier(.2,.8,.2,1) !important;
}

.message-action-expandable {
  display: grid !important;
  gap: 2px !important;
}

.message-action-expand-trigger {
  position: relative !important;
}

.message-action-expand-trigger::after {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  margin-left: auto !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  opacity: .48 !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 160ms cubic-bezier(.2,.9,.25,1.12), opacity 160ms ease !important;
}

.message-action-expandable.is-expanded .message-action-expand-trigger::after {
  opacity: .9 !important;
  transform: rotate(225deg) translate(-1px, -1px) !important;
}

.message-action-expand-panel {
  display: grid !important;
  gap: 2px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition:
    max-height 190ms cubic-bezier(.2,.8,.2,1),
    opacity 160ms cubic-bezier(.2,.8,.2,1),
    transform 170ms cubic-bezier(.2,.8,.2,1) !important;
}

.message-action-expandable.is-expanded .message-action-expand-panel {
  max-height: 112px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.message-action-menu .message-action-row.is-muted {
  color: #b8c5d2 !important;
}

.message-action-menu .message-action-row.is-danger,
.message-action-menu .message-delete-option.is-danger {
  color: #e05264 !important;
}

.message-action-menu .message-action-row.is-danger:hover,
.message-action-menu .message-action-row.is-danger:focus-visible,
.message-action-menu .message-delete-option.is-danger:hover,
.message-action-menu .message-delete-option.is-danger:focus-visible {
  background: rgba(224, 82, 100, .12) !important;
  color: #ff7b88 !important;
}

.pinned-message-panel {
  width: min(820px, calc(100% - 32px)) !important;
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 3px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  margin: 8px auto 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 8px 12px !important;
  background: rgba(23, 33, 43, .96) !important;
  color: #e7eef5 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition:
    background-color 160ms cubic-bezier(.2,.8,.2,1),
    transform 160ms cubic-bezier(.2,.9,.25,1.12),
    opacity 160ms cubic-bezier(.2,.8,.2,1) !important;
}

.pinned-message-panel.is-hidden {
  display: none !important;
}

.pinned-message-panel:hover,
.pinned-message-panel:focus-visible {
  background: rgba(30, 43, 56, .98) !important;
  outline: none !important;
}

.pinned-message-rule {
  align-self: stretch !important;
  border-radius: 999px !important;
  background: #3390ec !important;
}

.pinned-message-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.pinned-message-title {
  color: #6ab3ff !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 800 !important;
}

.pinned-message-text {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #dce7f2 !important;
  font-size: 13px !important;
  line-height: 17px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.telegram-video-card {
  position: relative !important;
  width: min(360px, 72vw) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 14px !important;
  margin: 0 !important;
  background: #111b26 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .20) !important;
}

.telegram-video-card video {
  width: 100% !important;
  max-height: 320px !important;
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  background: #0b111a !important;
}

.telegram-video-card .video-note-play {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  z-index: 2 !important;
  transform: translate(-50%, -50%) !important;
}

.telegram-video-card.is-playing .video-note-play {
  opacity: 0 !important;
}

.telegram-video-card:hover .video-note-play,
.telegram-video-card:focus-within .video-note-play {
  opacity: 1 !important;
}

.telegram-video-duration {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 2 !important;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, .48) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 14px !important;
  font-variant-numeric: tabular-nums !important;
}

.telegram-video-caption {
  padding: 7px 9px 9px !important;
  color: #dce7f2 !important;
  font-size: 13px !important;
  line-height: 17px !important;
}

.telegram-voice-card {
  --voice-progress: 0%;
}

.telegram-voice-card.is-playing .voice-play-button {
  background: rgba(51, 144, 236, .28) !important;
  color: #fff !important;
}

.telegram-voice-card.is-unavailable,
.telegram-video-card.is-unavailable,
.telegram-video-note.is-unavailable {
  opacity: .62 !important;
}

.dialog-mode-menu,
.all-dialog-context-menu,
.chat-header-menu {
  animation: none !important;
  opacity: 0 !important;
  transform: translateY(4px) scale(.98) !important;
  transition:
    opacity 140ms cubic-bezier(.2,.8,.2,1),
    transform 140ms cubic-bezier(.2,.8,.2,1) !important;
}

.dialog-mode-menu.is-open,
.all-dialog-context-menu.is-open,
.chat-header-menu.is-open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.dialog-mode-menu.is-opening,
.all-dialog-context-menu.is-opening,
.chat-header-menu.is-opening {
  animation: none !important;
}

.dialog-mode-menu.is-closing,
.all-dialog-context-menu.is-closing,
.chat-header-menu.is-closing {
  animation: none !important;
  opacity: 0 !important;
  transform: translateY(4px) scale(.98) !important;
  pointer-events: none !important;
}

.telegram-shell .account-selector-arrow::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  opacity: .64 !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition:
    transform 160ms cubic-bezier(.2,.9,.25,1.12),
    opacity 160ms ease,
    border-color 160ms ease !important;
}

.dialog-mode-button:hover .account-selector-arrow,
.dialog-mode-button:focus-visible .account-selector-arrow,
.dialog-mode-button[aria-expanded="true"] .account-selector-arrow {
  color: #8fc9ff !important;
}

.dialog-mode-button:hover .account-selector-arrow::before,
.dialog-mode-button:focus-visible .account-selector-arrow::before,
.dialog-mode-button[aria-expanded="true"] .account-selector-arrow::before {
  opacity: .95 !important;
}

.dialog-mode-button[aria-expanded="true"] .account-selector-arrow::before {
  transform: rotate(225deg) translate(-1px, -1px) !important;
}

.message-action-expand-trigger::after {
  content: none !important;
  display: none !important;
}

.mini-profile-account-row span em {
  display: inline !important;
}

.pin-icon-svg {
  transform: none !important;
  transform-origin: 50% 50% !important;
  transform-box: fill-box !important;
}

.telegram-pin-button svg.pin-icon-svg,
.account-pin-button svg.pin-icon-svg,
.dialog-pin-button svg.pin-icon-svg,
.all-dialog-pin-button svg.pin-icon-svg,
.message-pin-marker svg.pin-icon-svg,
.message-action-icon svg.pin-icon-svg {
  transform: none !important;
}

.pin-icon-svg path {
  vector-effect: non-scaling-stroke !important;
}

.inbox-toast-layer {
  right: 16px !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  width: min(372px, calc(100vw - 28px)) !important;
  gap: 8px !important;
}

.inbox-toast[data-toast-id] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 19px minmax(0, 1fr) 48px !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  column-gap: 7px !important;
  min-height: 82px !important;
  max-width: 372px !important;
  padding: 8px 8px 8px 9px !important;
  overflow: hidden !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 2px !important;
  background: #f4f4f4 !important;
  color: #151515 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
  text-align: left !important;
  backdrop-filter: none !important;
  animation: toastEnter 150ms cubic-bezier(.2,.8,.2,1) both !important;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 140ms ease,
    opacity 160ms ease,
    transform 160ms ease !important;
}

.inbox-toast[data-toast-id]:hover,
.inbox-toast[data-toast-id]:focus-visible {
  border-color: #cfcfcf !important;
  background: #f7f7f7 !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .2) !important;
  outline: none !important;
}

.inbox-toast[data-toast-id] .inbox-toast-app-icon {
  width: 18px !important;
  height: 18px !important;
  align-self: start !important;
  margin-top: 1px !important;
  display: inline-grid !important;
  place-items: center !important;
}

.inbox-toast[data-toast-id] .inbox-toast-app-icon svg,
.inbox-toast[data-toast-id] .inbox-toast-logo svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.inbox-toast[data-toast-id] .inbox-toast-app-icon svg circle,
.inbox-toast[data-toast-id] .inbox-toast-logo svg circle {
  fill: #2aabee !important;
}

.inbox-toast[data-toast-id] .inbox-toast-app-icon svg path,
.inbox-toast[data-toast-id] .inbox-toast-logo svg path {
  fill: #ffffff !important;
}

.inbox-toast[data-toast-id] .inbox-toast-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
}

.inbox-toast[data-toast-id] .inbox-toast-source {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #5f5f5f !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.inbox-toast[data-toast-id] .inbox-toast-title {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #111 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.inbox-toast[data-toast-id] .inbox-toast-preview {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #202020 !important;
  font-size: 13px !important;
  line-height: 17px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.inbox-toast[data-toast-id] .inbox-toast-preview > span:first-child {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-line-clamp: unset !important;
}

.inbox-toast[data-toast-id] .inbox-toast-meta {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #6b6b6b !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.inbox-toast[data-toast-id] .inbox-toast-actions {
  position: absolute !important;
  top: 5px !important;
  right: 8px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 35px !important;
  height: 18px !important;
  color: #8a8a8a !important;
  pointer-events: none !important;
}

.inbox-toast[data-toast-id] .inbox-toast-settings,
.inbox-toast[data-toast-id] .inbox-toast-x {
  width: 14px !important;
  height: 14px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 14px !important;
}

.inbox-toast[data-toast-id] .inbox-toast-settings svg {
  width: 13px !important;
  height: 13px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.45 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.inbox-toast[data-toast-id] .inbox-toast-x {
  color: #767676 !important;
  font-size: 18px !important;
  line-height: 12px !important;
  font-weight: 300 !important;
}

.inbox-toast[data-toast-id] .inbox-toast-logo {
  width: 44px !important;
  height: 44px !important;
  display: inline-grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: end !important;
  grid-column: 3 !important;
}

.inbox-toast[data-toast-id] .inbox-toast-close {
  position: absolute !important;
  top: 5px !important;
  right: 8px !important;
  z-index: 3 !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

.inbox-toast[data-toast-id] .inbox-toast-close:hover,
.inbox-toast[data-toast-id] .inbox-toast-close:focus-visible {
  background: rgba(0, 0, 0, .06) !important;
  outline: none !important;
}

@media (max-width: 700px) {
  body.role-admin.tab-inbox .shell {
    grid-template-columns: 1fr !important;
  }

  body.role-admin.tab-inbox .sidebar {
    display: none !important;
  }

  .pinned-message-panel {
    width: calc(100% - 16px) !important;
    margin-top: 6px !important;
  }

  .telegram-video-card {
    width: min(320px, 78vw) !important;
  }

  .inbox-toast-layer {
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
  }

  .inbox-toast[data-toast-id] {
    grid-template-columns: 18px minmax(0, 1fr) 42px !important;
    max-width: none !important;
  }

  .inbox-toast[data-toast-id] .inbox-toast-logo {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Native notification pass: in-site message toasts are disabled; this prompt only asks for browser permission. */
.notification-permission-layer {
  position: fixed !important;
  right: 16px !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  z-index: 1900 !important;
  width: min(360px, calc(100vw - 28px)) !important;
  pointer-events: none !important;
}

.notification-permission-prompt {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 10px !important;
  border: 1px solid rgba(210, 214, 219, .92) !important;
  border-radius: 4px !important;
  background: #f5f5f5 !important;
  color: #161616 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22) !important;
  pointer-events: auto !important;
}

.notification-permission-icon {
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
}

.notification-permission-icon svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

.notification-permission-icon svg circle {
  fill: #2aabee !important;
}

.notification-permission-icon svg path {
  fill: #fff !important;
}

.notification-permission-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.notification-permission-copy strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #111 !important;
  font-size: 13px !important;
  line-height: 17px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.notification-permission-copy span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #4f4f4f !important;
  font-size: 12px !important;
  line-height: 16px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.notification-permission-prompt button {
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  background: #3390ec !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  transition: background-color 150ms cubic-bezier(.2,.8,.2,1), transform 130ms cubic-bezier(.2,.9,.25,1.12) !important;
}

.notification-permission-prompt button:hover,
.notification-permission-prompt button:focus-visible {
  background: #2584df !important;
  transform: translateY(-1px) !important;
}

.notification-permission-prompt.is-denied {
  grid-template-columns: 30px minmax(0, 1fr) !important;
}

.telegram-gif-card {
  position: relative !important;
  width: min(340px, 72vw) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  margin: 0 !important;
  background: #111b26 !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
}

.telegram-gif-image {
  width: 100% !important;
  max-height: 320px !important;
  display: block !important;
  aspect-ratio: var(--media-ratio, 4 / 3) !important;
  object-fit: cover !important;
  background: #0b111a !important;
}

.telegram-gif-badge {
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  z-index: 2 !important;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  background: rgba(0, 0, 0, .52) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
}

@media (max-width: 700px) {
  .notification-permission-layer {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }

  .notification-permission-prompt {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

  .notification-permission-prompt button {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .telegram-gif-card {
    width: min(320px, 78vw) !important;
  }
}

.telegram-composer.is-action-mode {
  display: flex !important;
  align-items: stretch !important;
  min-height: 50px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #17212b !important;
}

.telegram-composer.is-action-mode > :not(.composer-action-bar) {
  display: none !important;
}

.composer-action-bar {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
}

.composer-action-button,
.composer-action-static {
  width: 100% !important;
  min-height: 50px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 18px !important;
  background: #17212b !important;
  color: #6ab3ff !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  cursor: default !important;
  transition: background 160ms cubic-bezier(.2,.8,.2,1), color 160ms cubic-bezier(.2,.8,.2,1) !important;
}

.composer-action-button {
  cursor: pointer !important;
}

.composer-action-button:hover,
.composer-action-button:focus-visible {
  background: #1d2b38 !important;
  color: #8bc7ff !important;
  outline: none !important;
}

.telegram-composer.is-blocked-mode .composer-action-static,
.telegram-composer.is-readonly-mode .composer-action-static {
  color: #8b9cab !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.telegram-composer.is-blocked-mode .composer-action-static {
  color: #ff8a98 !important;
}

.post-comments-row {
  width: min(100%, 520px) !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 10px !important;
  margin-top: 6px !important;
  padding: 7px 10px !important;
  background: #1f2c37 !important;
  color: #f28a3c !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 140ms ease, color 140ms ease !important;
}

.post-comments-row:hover,
.post-comments-row:focus-visible {
  background: #263644 !important;
  color: #ff9d54 !important;
  outline: none !important;
}

.post-comments-avatars {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 42px !important;
}

.comment-row-avatar {
  width: 24px !important;
  height: 24px !important;
  margin-left: -8px !important;
  border: 2px solid #1f2c37 !important;
  border-radius: 50% !important;
  font-size: 9px !important;
}

.comment-row-avatar:first-child {
  margin-left: 0 !important;
}

.comment-row-avatar.is-placeholder {
  display: inline-grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #4d86c8, #6d5dd5) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.post-comments-label {
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.post-comments-chevron {
  color: currentColor !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.comments-item {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: end !important;
  gap: 8px !important;
  margin: 5px 0 !important;
}

.comments-avatar,
.comments-composer-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 11px !important;
}

.comments-bubble {
  width: fit-content !important;
  max-width: min(520px, 78vw) !important;
  border-radius: 10px !important;
  padding: 7px 9px 6px !important;
  background: #242f3d !important;
  color: #f4f8fc !important;
}

.comments-author {
  margin-bottom: 2px !important;
  color: #6ab3ff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.comments-reply-preview {
  margin: 4px 0 5px !important;
  border-left: 3px solid #7b61ff !important;
  border-radius: 5px !important;
  padding: 4px 7px !important;
  background: rgba(123, 97, 255, .12) !important;
  color: #dce7f3 !important;
  font-size: 12px !important;
}

.comments-text {
  overflow-wrap: anywhere !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.comments-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
  color: #7f91a3 !important;
  font-size: 11px !important;
}

.comments-meta button {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #6ab3ff !important;
  font: inherit !important;
  cursor: pointer !important;
}

.comments-empty {
  margin: 42px auto !important;
  max-width: 440px !important;
  border-radius: 14px !important;
  padding: 16px !important;
  background: rgba(23, 33, 43, .86) !important;
  color: #8b9cab !important;
  text-align: center !important;
}

.comments-empty small {
  display: block !important;
  margin-top: 8px !important;
  color: #6f8190 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.comments-emoji,
.comments-attach,
.comments-send {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #8b9cab !important;
  cursor: pointer !important;
}

.comments-attach {
  color: #8b9cab !important;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

.comments-attach:hover,
.comments-attach:focus-visible {
  color: #6ab3ff !important;
  background: rgba(106, 179, 255, .10) !important;
  outline: none !important;
}

.comments-send {
  color: #6ab3ff !important;
}

.comments-reply-label {
  max-width: 150px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  background: rgba(106, 179, 255, .12) !important;
  color: #6ab3ff !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.telegram-chat-head.is-comments-head,
.message-head.is-comments-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  background: #17212b !important;
}

.comments-back-title {
  min-width: max-content !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 0 9px 0 6px !important;
  background: transparent !important;
  color: #f4f8fc !important;
  cursor: pointer !important;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

.comments-back-title:hover,
.comments-back-title:focus-visible {
  background: rgba(106, 179, 255, .11) !important;
  color: #6ab3ff !important;
  outline: none !important;
}

.comments-back-title:active {
  transform: scale(.98) !important;
}

.comments-back-arrow {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 25px !important;
  line-height: 1 !important;
}

.comments-head-title {
  min-width: max-content !important;
  color: #f4f8fc !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.comments-head-title strong {
  font-weight: 850 !important;
  color: currentColor !important;
}

.comments-post-preview {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 10px !important;
  padding: 4px 8px !important;
  background: rgba(36, 47, 61, .68) !important;
}

.comments-post-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 11px !important;
}

.comments-post-copy {
  min-width: 0 !important;
  display: block !important;
}

.comments-post-copy strong,
.comments-post-copy span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.comments-post-copy strong {
  color: #eef6fc !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.comments-post-copy span {
  color: #8b9cab !important;
  font-size: 12px !important;
}

.comments-join-button {
  min-height: 32px !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 0 12px !important;
  background: #2481cc !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 160ms ease, transform 160ms ease !important;
}

.comments-join-button:hover,
.comments-join-button:focus-visible {
  background: #2f9bed !important;
  outline: none !important;
}

.comments-join-button:active {
  transform: scale(.98) !important;
}

.telegram-messages.is-comments-view,
.message-list.is-comments-view {
  padding: 12px 16px 18px !important;
  background-color: #0e1621 !important;
  background-image: var(--tg-doodle, none) !important;
  background-size: 420px auto !important;
}

.comments-view-list {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

.telegram-composer.is-comments-composer {
  min-height: 54px !important;
  width: min(var(--telegram-dialog-lane-width), calc(100% - 32px)) !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 34px 34px minmax(0, auto) minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 12px !important;
  background: #17212b !important;
}

.telegram-composer.is-comments-composer textarea {
  width: 100% !important;
  min-height: 36px !important;
  max-height: 120px !important;
  resize: none !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 9px 12px !important;
  background: #242f3d !important;
  color: #f4f8fc !important;
  font: inherit !important;
  outline: none !important;
}

.telegram-composer.is-comments-composer textarea::placeholder {
  color: #7f91a3 !important;
}

.comments-header-menu button {
  min-height: 42px !important;
}

.chat-status {
  min-height: 15px !important;
  color: #6ab3ff !important;
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.chat-status.is-typing::after,
.dialog-typing::after {
  content: "..." !important;
  display: inline-block !important;
  width: 1.25em !important;
  text-align: left !important;
  animation: typingDots 1.2s ease-in-out infinite !important;
}

.dialog-typing {
  color: #6ab3ff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.dialog-typing[hidden] {
  display: none !important;
}

.telegram-dialog.is-typing .dialog-preview {
  color: #6ab3ff !important;
}

.account-switcher-primary-actions {
  display: grid !important;
  flex: 0 0 auto !important;
}

@keyframes typingDots {
  100% {
    opacity: .35;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 700px) {
  .comments-bubble {
    max-width: calc(100vw - 74px) !important;
  }

  .telegram-chat-head.is-comments-head,
  .message-head.is-comments-head {
    height: auto !important;
    min-height: 66px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "back menu"
      "preview preview"
      "join join" !important;
    align-items: center !important;
    padding: 7px 10px !important;
  }

  .comments-back-title {
    grid-area: back !important;
    min-width: 0 !important;
    justify-self: start !important;
  }

  .comments-head-title {
    min-width: 0 !important;
  }

  .comments-head-actions {
    grid-area: menu !important;
  }

  .comments-post-preview {
    grid-area: preview !important;
    width: 100% !important;
    padding: 5px 7px !important;
  }

  .comments-join-button {
    grid-area: join !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  .telegram-messages.is-comments-view,
  .message-list.is-comments-view {
    padding-inline: 10px !important;
  }

  .telegram-composer.is-comments-composer {
    width: calc(100% - 14px) !important;
    grid-template-columns: 32px 34px minmax(0, 1fr) 36px 38px !important;
  }

  .telegram-composer.is-comments-composer .comments-reply-label {
    display: none !important;
  }
}

/* Comments composer must keep the regular Telegram composer geometry. */
.telegram-composer.is-comments-composer,
body.role-admin .telegram-composer.is-comments-composer,
body.role-worker .telegram-composer.is-comments-composer {
  width: min(var(--telegram-dialog-lane-width), calc(100% - 32px)) !important;
  min-height: 48px !important;
  max-height: calc(33dvh + 72px) !important;
  display: grid !important;
  grid-template-columns: 34px 36px minmax(0, 1fr) 38px 42px !important;
  align-items: end !important;
  gap: 5px !important;
  margin: 8px auto 12px !important;
  padding: 7px 12px 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--tgw-border, rgba(255, 255, 255, .07)) !important;
  border-radius: 18px !important;
  background: rgba(23, 33, 43, .90) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.telegram-composer.is-comments-composer .comments-composer-avatar,
body.role-worker .telegram-composer.is-comments-composer .comments-composer-avatar {
  grid-column: 1 !important;
  align-self: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}

.telegram-composer.is-comments-composer .comments-emoji,
body.role-worker .telegram-composer.is-comments-composer .comments-emoji {
  grid-column: 2 !important;
  align-self: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  color: #7f91a3 !important;
}

.telegram-composer.is-comments-composer .comments-reply-label,
body.role-worker .telegram-composer.is-comments-composer .comments-reply-label {
  display: none !important;
}

.telegram-composer.is-comments-composer .telegram-textarea,
body.role-worker .telegram-composer.is-comments-composer .telegram-textarea {
  grid-column: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  max-height: min(33dvh, 220px) !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 8px 10px !important;
  background: transparent !important;
  color: var(--tgw-text, #f4f8fc) !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  resize: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.telegram-composer.is-comments-composer .comments-send,
body.role-worker .telegram-composer.is-comments-composer .comments-send {
  grid-column: 5 !important;
  align-self: center !important;
  width: 42px !important;
  height: 40px !important;
  min-width: 42px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #3390ec !important;
}

.telegram-composer.is-comments-composer .comments-attach,
body.role-worker .telegram-composer.is-comments-composer .comments-attach {
  grid-column: 4 !important;
  align-self: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
}

.composer-action-button.is-pending {
  color: #8bc7ff !important;
  cursor: progress !important;
  opacity: .86 !important;
}

@media (max-width: 700px) {
  .telegram-composer.is-comments-composer,
  body.role-worker .telegram-composer.is-comments-composer {
    width: min(var(--telegram-dialog-lane-width), calc(100% - 32px)) !important;
    grid-template-columns: 34px 36px minmax(0, 1fr) 38px 42px !important;
  }
}

/* Channel post albums, inline reactions and centered channel/comment lanes. */
.telegram-messages.is-channel-view,
body.role-worker .telegram-messages.is-channel-view {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

.telegram-messages.is-channel-view > .telegram-message,
.telegram-messages.is-channel-view > .message-day,
body.role-worker .telegram-messages.is-channel-view > .telegram-message,
body.role-worker .telegram-messages.is-channel-view > .message-day {
  flex: 0 0 auto !important;
  width: 100% !important;
}

.telegram-messages.is-channel-view .telegram-message,
body.role-worker .telegram-messages.is-channel-view .telegram-message {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.telegram-messages.is-channel-view .message-stack,
body.role-worker .telegram-messages.is-channel-view .message-stack,
.telegram-messages.is-channel-view .telegram-message.outgoing .message-stack,
body.role-worker .telegram-messages.is-channel-view .telegram-message.outgoing .message-stack {
  width: min(640px, calc(100% - 24px)) !important;
  max-width: min(640px, calc(100% - 24px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.telegram-messages.is-channel-view .message-bubble,
body.role-worker .telegram-messages.is-channel-view .message-bubble {
  max-width: 100% !important;
}

.telegram-messages.is-comments-view .comments-view-list,
body.role-worker .telegram-messages.is-comments-view .comments-view-list {
  width: min(640px, 100%) !important;
  max-width: min(640px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.telegram-album-grid {
  width: min(520px, 100%) !important;
  max-height: min(480px, 62vh) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(118px, 180px) !important;
  gap: 2px !important;
  margin: 0 !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  background: #101b27 !important;
}

.telegram-album-grid.is-count-3 .telegram-album-cell:first-child {
  grid-row: span 2 !important;
}

.telegram-album-grid[data-album-count="2"] {
  grid-auto-rows: minmax(160px, 220px) !important;
}

.telegram-album-grid[data-album-count="5"] .telegram-album-cell:first-child {
  grid-column: span 2 !important;
}

.telegram-album-cell {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  height: 100% !important;
  background: #101b27 !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.telegram-album-cell img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.telegram-message.has-photo-media .telegram-album-grid {
  width: 100% !important;
  max-width: 100% !important;
}

.telegram-message.has-photo-media .telegram-album-cell img {
  border-radius: 0 !important;
}

.message-bubble > .message-reactions,
body.role-worker .message-bubble > .message-reactions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-self: flex-start !important;
  gap: 5px !important;
  max-width: 100% !important;
  margin: 6px 0 2px !important;
  padding: 0 !important;
  z-index: 1 !important;
}

.message-bubble > .message-reactions.is-empty,
body.role-worker .message-bubble > .message-reactions.is-empty {
  display: none !important;
}

.message-bubble > .message-reactions .message-reaction,
body.role-worker .message-bubble > .message-reactions .message-reaction {
  border: 1px solid rgba(142, 209, 255, .22) !important;
  appearance: none !important;
  cursor: pointer !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.message-bubble,
body.role-worker .message-bubble {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.message-bubble > .message-media,
body.role-worker .message-bubble > .message-media,
.message-bubble > .telegram-album-grid,
body.role-worker .message-bubble > .telegram-album-grid {
  position: relative !important;
  z-index: 0 !important;
  display: block !important;
  max-width: 100% !important;
  margin-bottom: 6px !important;
  clear: both !important;
}

.message-bubble > .telegram-photo-card,
.message-bubble > .telegram-gif-card,
.message-bubble > .telegram-video-card,
.message-bubble > .telegram-video-note,
body.role-worker .message-bubble > .telegram-photo-card,
body.role-worker .message-bubble > .telegram-gif-card,
body.role-worker .message-bubble > .telegram-video-card,
body.role-worker .message-bubble > .telegram-video-note {
  width: 100% !important;
  max-width: 100% !important;
}

.message-bubble .telegram-photo-button,
.message-bubble .telegram-photo-image,
.message-bubble .telegram-gif-image,
.message-bubble .telegram-video-player,
body.role-worker .message-bubble .telegram-photo-button,
body.role-worker .message-bubble .telegram-photo-image,
body.role-worker .message-bubble .telegram-gif-image,
body.role-worker .message-bubble .telegram-video-player {
  width: 100% !important;
  max-width: 100% !important;
}

.message-bubble > .telegram-album-grid,
body.role-worker .message-bubble > .telegram-album-grid {
  display: grid !important;
}

.message-bubble > .message-text,
body.role-worker .message-bubble > .message-text {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  max-width: 100% !important;
  clear: both !important;
  overflow-wrap: anywhere !important;
}

.message-bubble > .message-reactions,
body.role-worker .message-bubble > .message-reactions {
  position: relative !important;
  clear: both !important;
  overflow: visible !important;
}

.message-stack > .post-comments-row,
body.role-worker .message-stack > .post-comments-row {
  position: relative !important;
  z-index: 4 !important;
  clear: both !important;
  max-width: 100% !important;
  margin-top: 2px !important;
}

.reaction-emoji,
.reaction-count {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.message-meta-stack {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 1px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1 !important;
}

.message-footer {
  max-width: 100% !important;
  overflow: hidden !important;
}

.message-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(210, 226, 238, .72) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.telegram-message.outgoing .message-views {
  color: rgba(231, 244, 255, .78) !important;
}

.message-views svg {
  width: 11px !important;
  height: 11px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
}

@media (max-width: 720px) {
  .telegram-messages.is-channel-view .message-stack,
  body.role-worker .telegram-messages.is-channel-view .message-stack,
  .telegram-messages.is-channel-view .telegram-message.outgoing .message-stack,
  body.role-worker .telegram-messages.is-channel-view .telegram-message.outgoing .message-stack {
    width: min(94vw, 640px) !important;
    max-width: min(94vw, 640px) !important;
  }

  .telegram-album-grid {
    grid-auto-rows: minmax(104px, 1fr) !important;
  }
}

/* All-dialogs has no folder tabs; keep channel centering scoped away from dialog lists. */
.telegram-shell.is-all-dialogs-mode #accountListMeta {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.telegram-shell.is-all-dialogs-mode .telegram-accounts {
  grid-template-rows: 64px minmax(0, 1fr) !important;
}

.telegram-shell.is-all-dialogs-mode #inboxAccountList {
  grid-row: 2 !important;
}

.telegram-shell.is-single-account-mode .telegram-left {
  align-content: stretch !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  place-content: stretch !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.telegram-shell.is-single-account-mode #legacyAccountMeta {
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

.telegram-shell.is-single-account-mode #dialogList {
  display: block !important;
  grid-row: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  place-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#dialogList.is-channel-view,
#dialogList.is-comments-view,
#inboxAccountList.is-channel-view,
#inboxAccountList.is-comments-view {
  align-content: stretch !important;
  justify-content: stretch !important;
  place-content: stretch !important;
}

/* Final media containment: older photo rules use stronger !important widths. */
.telegram-messages.is-channel-view .telegram-message.has-photo-media .message-bubble,
body.role-worker .telegram-messages.is-channel-view .telegram-message.has-photo-media .message-bubble,
.telegram-messages.is-comments-view .telegram-message.has-photo-media .message-bubble,
body.role-worker .telegram-messages.is-comments-view .telegram-message.has-photo-media .message-bubble {
  width: min(100%, 420px) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.telegram-message.has-photo-media .message-bubble > .telegram-photo-card.has-full-source.message-media,
body.role-worker .telegram-message.has-photo-media .message-bubble > .telegram-photo-card.has-full-source.message-media,
.telegram-message.has-photo-media .message-bubble > .telegram-photo-card.message-media,
body.role-worker .telegram-message.has-photo-media .message-bubble > .telegram-photo-card.message-media {
  inline-size: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.telegram-message.has-photo-media .message-bubble > .telegram-photo-card.has-full-source.message-media .telegram-photo-button,
.telegram-message.has-photo-media .message-bubble > .telegram-photo-card.has-full-source.message-media .telegram-photo-image,
body.role-worker .telegram-message.has-photo-media .message-bubble > .telegram-photo-card.has-full-source.message-media .telegram-photo-button,
body.role-worker .telegram-message.has-photo-media .message-bubble > .telegram-photo-card.has-full-source.message-media .telegram-photo-image {
  inline-size: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Forward + multi-select refinements */
.telegram-message {
  position: relative;
}

.message-select-circle {
  position: absolute;
  z-index: 3;
  left: max(8px, calc(50% - 386px));
  top: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(168, 184, 199, .66);
  border-radius: 50%;
  background: rgba(17, 27, 33, .78);
  color: #fff;
  opacity: 0;
  pointer-events: auto;
  transform: translate(-6px, -50%) scale(.92);
  transition:
    opacity 150ms cubic-bezier(.2,.8,.2,1),
    transform 170ms cubic-bezier(.16,1,.3,1),
    background-color 150ms ease,
    border-color 150ms ease;
}

.message-select-circle span {
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(.75);
  transition: opacity 140ms ease, transform 160ms cubic-bezier(.16,1,.3,1);
}

.telegram-messages.is-selecting-messages .message-select-circle,
.telegram-message:hover .message-select-circle,
.message-select-circle:focus-visible,
.telegram-message.is-message-selected .message-select-circle {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.telegram-message.is-message-selected .message-select-circle {
  border-color: rgba(51, 144, 236, .72);
  background: #3390ec;
}

.telegram-message.is-message-selected .message-select-circle span {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.telegram-messages.is-selecting-messages .telegram-message .message-bubble {
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms cubic-bezier(.16,1,.3,1);
}

.telegram-messages.is-selecting-messages .telegram-message.is-message-selected .message-bubble {
  box-shadow: 0 0 0 1px rgba(51,144,236,.34), 0 8px 22px rgba(51,144,236,.12);
}

.message-actions .message-post-forward {
  display: inline-grid;
  place-items: center;
  color: #9fb0bf;
  transition: color 150ms ease, background-color 150ms ease, transform 150ms cubic-bezier(.16,1,.3,1);
}

.message-actions .message-post-forward svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-actions .message-post-forward:hover,
.message-actions .message-post-forward:focus-visible {
  color: #3390ec;
  background: rgba(51,144,236,.12);
  outline: none;
}

.telegram-composer.is-selection-mode {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding-inline: 0 !important;
  background: transparent !important;
  border-top-color: transparent !important;
  box-shadow: none !important;
}

.telegram-composer.is-selection-mode > :not(.message-selection-bar) {
  display: none !important;
}

.message-selection-bar {
  width: min(70%, 540px);
  min-height: 48px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(31, 31, 31, .97);
  color: #f2f6fa;
  box-shadow: 0 12px 34px rgba(0,0,0,.34);
  animation: selectionBarIn 170ms cubic-bezier(.16,1,.3,1);
}

.selection-count {
  min-width: 0;
  overflow: hidden;
  color: #f4f7fb;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.selection-status {
  min-width: 0;
  color: #8aa2b8;
  font-size: 12px;
  white-space: nowrap;
}

.selection-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.selection-icon-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9fb0bf;
  transition: color 150ms ease, background-color 150ms ease, transform 150ms cubic-bezier(.16,1,.3,1);
}

.selection-icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.selection-icon-button:hover,
.selection-icon-button:focus-visible {
  color: #3390ec;
  background: rgba(51,144,236,.12);
  outline: none;
}

.selection-icon-button.is-pressing {
  transform: scale(.94);
}

.selection-delete {
  color: #ff5f72;
}

.selection-delete:hover,
.selection-delete:focus-visible {
  color: #ff7586;
  background: rgba(255,95,114,.13);
}

.selection-delete-panel {
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-top: 6px;
}

.message-selection-bar.is-delete-expanded .selection-delete-panel {
  display: grid;
}

.selection-delete-panel button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  color: #d7e1eb;
  font-weight: 700;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms cubic-bezier(.16,1,.3,1);
}

.selection-delete-panel button:hover,
.selection-delete-panel button:focus-visible {
  background: rgba(51,144,236,.16);
  color: #6ab3ff;
  outline: none;
}

.selection-delete-panel button.is-danger {
  color: #ff6b7b;
}

.selection-delete-panel button.is-danger:hover,
.selection-delete-panel button.is-danger:focus-visible {
  background: rgba(255,95,114,.14);
  color: #ff8390;
}

.selection-confirm-text {
  color: #dce6ef;
  font-size: 13px;
  font-weight: 700;
}

@keyframes selectionBarIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#forwardModalOverlay.forward-modal-v2 {
  z-index: 2400;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(2px);
}

#forwardModalOverlay.forward-modal-v2 .forward-modal {
  width: min(430px, calc(100vw - 22px));
  max-height: min(760px, calc(100vh - 24px));
  grid-template-rows: auto auto auto minmax(220px, 1fr) auto auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: #1f1f1f;
  box-shadow: 0 28px 80px rgba(0,0,0,.52);
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-head {
  height: 52px;
  padding: 0 14px;
  gap: 12px;
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-head h2 {
  margin: 0;
  color: #f3f7fb;
  font-size: 18px;
  font-weight: 800;
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #aeb8c2;
  font-size: 0;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms cubic-bezier(.16,1,.3,1);
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-close svg,
#forwardModalOverlay.forward-modal-v2 .forward-submit-round svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-close:hover,
#forwardModalOverlay.forward-modal-v2 .forward-modal-close:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.08);
  outline: none;
}

#forwardModalOverlay.forward-modal-v2 .forward-selected-strip {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 5px 12px 9px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

#forwardModalOverlay.forward-modal-v2 .forward-selected-strip.is-empty {
  color: #7e8a96;
  font-size: 13px;
}

#forwardModalOverlay.forward-modal-v2 .forward-selected-chip {
  max-width: 148px;
  min-width: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: rgba(51,144,236,.16);
  color: #82c0ff;
  padding: 4px 10px 4px 5px;
  font-weight: 700;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms cubic-bezier(.16,1,.3,1);
}

#forwardModalOverlay.forward-modal-v2 .forward-selected-chip:hover,
#forwardModalOverlay.forward-modal-v2 .forward-selected-chip:focus-visible {
  color: #fff;
  background: rgba(51,144,236,.28);
  outline: none;
}

#forwardModalOverlay.forward-modal-v2 .forward-selected-chip span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#forwardModalOverlay.forward-modal-v2 .forward-chip-avatar.avatar,
#forwardModalOverlay.forward-modal-v2 .forward-selected-chip .avatar {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-search {
  padding: 8px 12px 10px;
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-search input {
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #2a2a2a;
  color: #f2f6fa;
  font-size: 14px;
  padding-inline: 16px;
}

#forwardModalOverlay.forward-modal-v2 .forward-target-list {
  padding: 4px 8px 8px;
  background: #1f1f1f;
}

#forwardModalOverlay.forward-modal-v2 .forward-target-row {
  min-height: 62px;
  grid-template-columns: 46px minmax(0, 1fr) 28px;
  border-radius: 12px;
  padding: 7px 9px;
  transition: background-color 150ms ease, transform 150ms cubic-bezier(.16,1,.3,1);
}

#forwardModalOverlay.forward-modal-v2 .forward-target-row:hover,
#forwardModalOverlay.forward-modal-v2 .forward-target-row:focus-visible,
#forwardModalOverlay.forward-modal-v2 .forward-target-row.is-selected {
  background: rgba(51,144,236,.13);
}

#forwardModalOverlay.forward-modal-v2 .forward-target-text strong {
  color: #f5f8fb;
  font-size: 14px;
  font-weight: 800;
}

#forwardModalOverlay.forward-modal-v2 .forward-target-text small {
  color: #98a6b3;
  font-size: 13px;
}

#forwardModalOverlay.forward-modal-v2 .forward-target-check {
  width: 23px;
  height: 23px;
  border: 2px solid rgba(160,171,181,.44);
  font-size: 13px;
  font-weight: 900;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms cubic-bezier(.16,1,.3,1);
}

#forwardModalOverlay.forward-modal-v2 .forward-target-row.is-selected .forward-target-check {
  border-color: rgba(51,144,236,.9);
  background: #3390ec;
  transform: scale(1.02);
}

#forwardModalOverlay.forward-modal-v2 .forward-caption-wrap {
  padding: 8px 72px 8px 14px;
  background: #1f1f1f;
}

#forwardModalOverlay.forward-modal-v2 [data-forward-caption] {
  width: 100%;
  min-height: 36px;
  max-height: 96px;
  resize: none;
  border: 0;
  outline: none;
  border-radius: 12px;
  background: transparent;
  color: #eef3f7;
  font: inherit;
  line-height: 1.35;
  padding: 8px 0;
}

#forwardModalOverlay.forward-modal-v2 [data-forward-caption]::placeholder {
  color: #8f9aa5;
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-footer {
  position: relative;
  min-height: 58px;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(255,255,255,.05);
  background: #1f1f1f;
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-status {
  max-width: calc(100% - 66px);
  overflow: hidden;
  color: #8fa0af;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#forwardModalOverlay.forward-modal-v2 .forward-modal-status.is-error {
  color: #ff6f7f;
}

#forwardModalOverlay.forward-modal-v2 .forward-submit-round {
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #3390ec;
  color: #fff;
  box-shadow: 0 10px 28px rgba(51,144,236,.34);
  transition: background-color 150ms ease, opacity 150ms ease, transform 160ms cubic-bezier(.16,1,.3,1);
}

#forwardModalOverlay.forward-modal-v2 .forward-submit-round:hover,
#forwardModalOverlay.forward-modal-v2 .forward-submit-round:focus-visible {
  background: #4aa3f7;
  outline: none;
}

#forwardModalOverlay.forward-modal-v2 .forward-submit-round:disabled {
  opacity: .48;
  box-shadow: none;
}

#forwardModalOverlay.forward-modal-v2 .forward-submit-round.is-pending svg {
  opacity: 0;
}

#forwardModalOverlay.forward-modal-v2 .forward-submit-round.is-pending::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: telegramSpin 700ms linear infinite;
}

@media (max-width: 700px) {
  .message-select-circle {
    left: 8px;
  }

  .message-selection-bar {
    width: min(86%, 520px);
  }

  #forwardModalOverlay.forward-modal-v2 {
    align-items: end;
    padding: 0;
  }

  #forwardModalOverlay.forward-modal-v2 .forward-modal {
    width: 100%;
    max-height: min(86vh, 760px);
    border-radius: 18px 18px 0 0;
  }
}

/* Telegram-like layout pass for comments, channel posts and replacement composers. */
.telegram-chat-head.is-comments-head,
.message-head.is-comments-head {
  min-height: 50px !important;
  height: 50px !important;
  grid-template-columns: auto minmax(220px, 680px) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  background: rgba(23, 33, 43, .96) !important;
}

.comments-back-title {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 8px 0 4px !important;
}

.comments-head-title {
  font-size: 14px !important;
}

.comments-post-preview {
  justify-self: stretch !important;
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  min-height: 38px !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  background: rgba(36, 47, 61, .70) !important;
}

.comments-post-avatar {
  width: 32px !important;
  height: 32px !important;
}

.comments-post-copy strong,
.comments-post-copy span {
  line-height: 1.15 !important;
}

.telegram-messages.is-comments-view,
.message-list.is-comments-view {
  padding: 8px 16px 10px !important;
  align-items: center !important;
}

.telegram-messages.is-comments-view .comments-view-list,
body.role-worker .telegram-messages.is-comments-view .comments-view-list {
  width: min(560px, calc(100% - 16px)) !important;
  max-width: min(560px, calc(100% - 16px)) !important;
  min-height: auto !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  padding: 4px 0 8px !important;
}

.comments-item {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 7px !important;
  margin: 2px 0 !important;
}

.comments-avatar {
  width: 32px !important;
  height: 32px !important;
  align-self: end !important;
}

.comments-bubble {
  width: fit-content !important;
  max-width: min(470px, calc(100vw - 92px)) !important;
  border-radius: 11px !important;
  padding: 6px 9px 5px !important;
  background: #202f3d !important;
  box-shadow: none !important;
}

.comments-author {
  margin-bottom: 1px !important;
  font-size: 12px !important;
}

.comments-text {
  font-size: 14px !important;
  line-height: 1.28 !important;
}

.comments-reply-preview {
  border-left-color: #3390ec !important;
  background: rgba(51, 144, 236, .12) !important;
}

.comments-meta {
  gap: 7px !important;
  margin-top: 3px !important;
  flex-wrap: wrap !important;
}

.comments-reactions {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  max-width: 100% !important;
}

.telegram-composer.is-comments-composer,
body.role-worker .telegram-composer.is-comments-composer {
  width: min(var(--telegram-dialog-lane-width), calc(100% - 32px)) !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 34px 36px minmax(0, 1fr) 38px 42px !important;
  align-items: end !important;
  gap: 5px !important;
  margin: 6px auto 8px !important;
  padding: 7px 12px 8px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel, #17212b) !important;
  box-shadow: none !important;
}

.telegram-composer.is-comments-composer .comments-composer-avatar {
  align-self: center !important;
  width: 34px !important;
  height: 34px !important;
}

.telegram-composer.is-comments-composer .comments-emoji,
.telegram-composer.is-comments-composer .comments-attach {
  align-self: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #7f91a3 !important;
}

.telegram-composer.is-comments-composer .comments-attach {
  grid-column: 4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.telegram-composer.is-comments-composer .telegram-textarea {
  grid-column: 3 !important;
  min-height: 36px !important;
  max-height: min(33dvh, 180px) !important;
  padding: 8px 8px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.telegram-composer.is-comments-composer .comments-send {
  grid-column: 5 !important;
  align-self: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.telegram-composer.is-selection-mode,
body.role-admin .telegram-composer.is-selection-mode,
body.role-worker .telegram-composer.is-selection-mode {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 7px 0 9px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.telegram-composer.is-selection-mode > :not(.message-selection-bar) {
  display: none !important;
}

.message-selection-bar {
  width: min(70%, 520px) !important;
  min-height: 46px !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 2px 8px !important;
  padding: 5px 8px !important;
  border-radius: 12px !important;
  background: rgba(31,31,31,.98) !important;
}

.selection-count {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

.selection-status {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-height: 0 !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.selection-status:empty {
  display: none !important;
}

.selection-actions {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  gap: 5px !important;
}

.selection-icon-button {
  width: 32px !important;
  height: 32px !important;
}

.selection-icon-button svg {
  width: 18px !important;
  height: 18px !important;
}

.selection-delete-panel {
  grid-column: 1 / -1 !important;
  margin-top: 4px !important;
}

.message-select-circle {
  left: calc(50% - min(330px, 42vw)) !important;
  width: 22px !important;
  height: 22px !important;
  border-width: 1.5px !important;
  background: rgba(17, 27, 33, .62) !important;
}

.telegram-message.is-message-selected .message-select-circle {
  background: #3390ec !important;
  border-color: rgba(51,144,236,.88) !important;
}

.message-select-circle span {
  width: 9px !important;
  height: 5px !important;
  border-left-width: 2px !important;
  border-bottom-width: 2px !important;
}

.telegram-composer.is-action-mode,
body.role-admin .telegram-composer.is-action-mode,
body.role-worker .telegram-composer.is-action-mode {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 7px 0 9px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.telegram-composer.is-action-mode > :not(.composer-action-bar) {
  display: none !important;
}

.composer-action-bar {
  width: min(70%, 520px) !important;
  min-height: 44px !important;
  display: flex !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(23,33,43,.96) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
}

.composer-action-button,
.composer-action-static {
  min-height: 44px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.composer-action-button:hover,
.composer-action-button:focus-visible {
  background: rgba(51,144,236,.14) !important;
  color: #8bc7ff !important;
}

.telegram-messages.is-channel-view .message-stack,
body.role-worker .telegram-messages.is-channel-view .message-stack,
.telegram-messages.is-channel-view .telegram-message.outgoing .message-stack,
body.role-worker .telegram-messages.is-channel-view .telegram-message.outgoing .message-stack {
  width: min(520px, calc(100% - 24px)) !important;
  max-width: min(520px, calc(100% - 24px)) !important;
}

.telegram-messages.is-channel-view .message-bubble,
body.role-worker .telegram-messages.is-channel-view .message-bubble {
  width: min(100%, 420px) !important;
  max-width: min(100%, 420px) !important;
}

.telegram-messages.is-channel-view .telegram-message.has-photo-media .message-bubble,
body.role-worker .telegram-messages.is-channel-view .telegram-message.has-photo-media .message-bubble {
  width: min(100%, 420px) !important;
}

.telegram-messages.is-channel-view .telegram-photo-card,
.telegram-messages.is-channel-view .telegram-gif-card,
.telegram-messages.is-channel-view .telegram-video-card,
body.role-worker .telegram-messages.is-channel-view .telegram-photo-card,
body.role-worker .telegram-messages.is-channel-view .telegram-gif-card,
body.role-worker .telegram-messages.is-channel-view .telegram-video-card {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 360px !important;
  overflow: hidden !important;
}

.telegram-messages.is-channel-view .telegram-photo-image,
.telegram-messages.is-channel-view .telegram-gif-image,
.telegram-messages.is-channel-view .telegram-video-player,
body.role-worker .telegram-messages.is-channel-view .telegram-photo-image,
body.role-worker .telegram-messages.is-channel-view .telegram-gif-image,
body.role-worker .telegram-messages.is-channel-view .telegram-video-player {
  max-height: 360px !important;
  object-fit: cover !important;
}

.telegram-album-grid {
  width: min(420px, 100%) !important;
  max-height: 360px !important;
  grid-auto-rows: minmax(104px, 170px) !important;
}

.telegram-album-grid[data-album-count="2"] {
  grid-auto-rows: minmax(138px, 190px) !important;
}

.message-bubble > .message-reactions,
body.role-worker .message-bubble > .message-reactions {
  width: 100% !important;
  margin: 7px 0 3px !important;
  overflow: hidden !important;
}

.message-bubble > .message-reactions .message-reaction,
body.role-worker .message-bubble > .message-reactions .message-reaction {
  max-width: 100% !important;
  min-height: 22px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.reaction-emoji {
  max-width: 34px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.reaction-count {
  font-size: 11px !important;
  line-height: 1 !important;
}

.message-stack > .post-comments-row,
body.role-worker .message-stack > .post-comments-row {
  width: min(100%, 420px) !important;
  max-width: min(100%, 420px) !important;
  min-height: 36px !important;
  margin-top: 1px !important;
  padding: 6px 10px !important;
  border-radius: 0 0 10px 10px !important;
}

.message-footer {
  width: 100% !important;
  min-width: 0 !important;
  align-items: flex-end !important;
}

.message-meta-stack,
.message-views {
  max-width: 100% !important;
}

@media (max-width: 700px) {
  .telegram-chat-head.is-comments-head,
  .message-head.is-comments-head {
    height: auto !important;
    min-height: 54px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "back preview menu"
      "join join join" !important;
    padding: 6px 8px !important;
  }

  .comments-post-preview {
    grid-area: preview !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .message-selection-bar,
  .composer-action-bar {
    width: min(86%, 520px) !important;
  }

  .message-select-circle {
    left: 10px !important;
  }

  .telegram-composer.is-comments-composer,
  body.role-worker .telegram-composer.is-comments-composer {
    width: calc(100% - 16px) !important;
    grid-template-columns: 32px 34px minmax(0, 1fr) 36px 40px !important;
    padding-inline: 8px !important;
  }
}

/* Final compact pass: make replacement modes replace, not overlay, the old composer/message surface. */
.telegram-chat-head.is-comments-head,
.message-head.is-comments-head {
  grid-template-columns: auto minmax(240px, 560px) auto auto !important;
}

.comments-post-preview {
  justify-self: center !important;
  width: min(100%, 560px) !important;
  max-width: 560px !important;
}

.telegram-messages.is-comments-view .comments-view-list,
body.role-worker .telegram-messages.is-comments-view .comments-view-list {
  width: min(520px, calc(100% - 16px)) !important;
  max-width: min(520px, calc(100% - 16px)) !important;
}

.comments-bubble {
  max-width: min(430px, calc(100vw - 92px)) !important;
  border-radius: 10px !important;
  padding: 6px 8px 5px !important;
}

#replyForm.telegram-composer.is-comments-composer,
body.role-admin #replyForm.telegram-composer.is-comments-composer,
body.role-worker #replyForm.telegram-composer.is-comments-composer {
  width: min(560px, calc(100% - 32px)) !important;
  max-width: min(560px, calc(100% - 32px)) !important;
  min-height: 50px !important;
  margin: 5px auto 7px !important;
  padding: 6px 10px 7px !important;
  border-radius: 0 !important;
}

#replyForm.telegram-composer.is-selection-mode,
body.role-admin #replyForm.telegram-composer.is-selection-mode,
body.role-worker #replyForm.telegram-composer.is-selection-mode,
#replyForm.telegram-composer.is-action-mode,
body.role-admin #replyForm.telegram-composer.is-action-mode,
body.role-worker #replyForm.telegram-composer.is-action-mode {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.message-selection-bar {
  width: min(70%, 500px) !important;
  min-height: 42px !important;
  padding: 4px 8px !important;
  align-items: center !important;
}

.selection-icon-button {
  width: 30px !important;
  height: 30px !important;
}

.composer-action-bar {
  flex: 0 1 420px !important;
  width: 420px !important;
  max-width: calc(100% - 32px) !important;
  min-height: 40px !important;
  border-radius: 10px !important;
}

.composer-action-button,
.composer-action-static {
  min-height: 40px !important;
}

.message-stack > .message-select-circle {
  left: -8px !important;
  right: auto !important;
  top: 50% !important;
  transform: translate(0, -50%) scale(.92) !important;
}

.telegram-message.outgoing .message-stack > .message-select-circle {
  left: -8px !important;
  right: auto !important;
}

.message-select-circle {
  width: 21px !important;
  height: 21px !important;
  border-width: 1.4px !important;
  background: rgba(17, 27, 33, .70) !important;
}

.telegram-messages.is-channel-view .message-stack,
body.role-worker .telegram-messages.is-channel-view .message-stack,
.telegram-messages.is-channel-view .telegram-message.outgoing .message-stack,
body.role-worker .telegram-messages.is-channel-view .telegram-message.outgoing .message-stack {
  width: min(500px, calc(100% - 24px)) !important;
  max-width: min(500px, calc(100% - 24px)) !important;
}

.telegram-messages.is-channel-view .message-bubble,
body.role-worker .telegram-messages.is-channel-view .message-bubble,
.telegram-messages.is-channel-view .telegram-message.has-photo-media .message-bubble,
body.role-worker .telegram-messages.is-channel-view .telegram-message.has-photo-media .message-bubble {
  width: min(100%, 410px) !important;
  max-width: min(100%, 410px) !important;
}

.telegram-album-grid {
  width: min(410px, 100%) !important;
  max-height: 340px !important;
  grid-auto-rows: minmax(96px, 164px) !important;
}

.telegram-album-grid[data-album-count="2"] {
  grid-auto-rows: minmax(128px, 180px) !important;
}

.message-bubble > .message-reactions {
  margin: 6px 0 2px !important;
  overflow: hidden !important;
}

.message-bubble > .message-reactions .message-reaction {
  max-width: 100% !important;
  overflow: hidden !important;
}

.message-stack > .post-comments-row,
body.role-worker .message-stack > .post-comments-row {
  width: min(100%, 410px) !important;
  max-width: min(100%, 410px) !important;
  margin-top: 0 !important;
}

.message-footer,
.message-meta-stack,
.message-views {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 700px) {
  .telegram-chat-head.is-comments-head,
  .message-head.is-comments-head {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .comments-post-preview {
    max-width: 100% !important;
  }

  #replyForm.telegram-composer.is-comments-composer,
  body.role-admin #replyForm.telegram-composer.is-comments-composer,
  body.role-worker #replyForm.telegram-composer.is-comments-composer {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }

  .message-selection-bar {
    width: min(86%, 500px) !important;
  }

  .message-stack > .message-select-circle,
  .telegram-message.outgoing .message-stack > .message-select-circle {
    left: -8px !important;
  }

  .composer-action-bar {
    flex-basis: 420px !important;
    width: 420px !important;
    max-width: 92% !important;
  }
}

/* Shared worker dialogs workspace for admin inbox.
   The admin sidebar stays outside; everything inside .telegram-shell follows worker geometry. */
body.role-admin.tab-inbox {
  --tgw-bg: #0e1621;
  --tgw-panel: #17212b;
  --tgw-panel-soft: #1b2733;
  --tgw-border: #0b141d;
  --tgw-border-soft: rgba(127, 145, 163, .12);
  --tgw-hover: #202b36;
  --tgw-active: #2b5278;
  --tgw-incoming: #182533;
  --tgw-outgoing: #2b5278;
  --tgw-text: #e7eef5;
  --tgw-muted: #7f91a3;
  --tgw-muted-2: #6f8192;
  --tgw-blue: #3390ec;
  --tgw-read: #8ed1ff;
  --tgw-danger: #e05264;
}

body.role-admin.tab-inbox .content,
body.role-admin.tab-inbox .telegram-inbox-stack.is-worker-dialog-layout {
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--tgw-bg) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.theme-dark,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.theme-light {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--tgw-panel) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-accountbar,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-search {
  height: 54px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tgw-border) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel) !important;
  box-shadow: none !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-search-input {
  height: 36px !important;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #242f3d !important;
  color: var(--tgw-text) !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-search-input::placeholder {
  color: var(--tgw-muted) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-accounts,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-left {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--tgw-border) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel) !important;
  box-shadow: none !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-meta {
  color: var(--tgw-muted) !important;
  background: var(--tgw-panel) !important;
  border-bottom: 1px solid rgba(15, 26, 36, .62) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 600 !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #legacyAccountMeta:not(:empty) {
  display: block !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog-folders {
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-bottom: 1px solid var(--tgw-border) !important;
  background: var(--tgw-panel) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-account-list,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialogs {
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: var(--tgw-panel) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(127, 145, 163, .42) transparent !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-account,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .all-dialog-row {
  min-height: 64px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: background-color 120ms cubic-bezier(.2,.8,.2,1) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-account::after,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog::after,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .all-dialog-row::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 62px !important;
  height: 1px !important;
  background: rgba(255,255,255,.045) !important;
  pointer-events: none !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-account:hover,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog:hover,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .all-dialog-row:hover,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-account:focus-visible,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog:focus-visible,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .all-dialog-row:focus-visible {
  background: rgba(255,255,255,.045) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-account.is-active,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog.is-active,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .all-dialog-row.is-active {
  background: var(--tgw-active) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog.has-dialog-pin {
  grid-template-columns: 52px minmax(0, 1fr) 38px !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-avatar,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .account-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-main {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  row-gap: 0 !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-name,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-title,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .account-name {
  color: var(--tgw-text) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-date,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-preview,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-kind,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-username,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-subline,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .dialog-time,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .account-phone,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .account-username {
  color: var(--tgw-muted) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-account.is-active .account-name,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-account.is-active .account-phone,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-account.is-active .account-username,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog.is-active .dialog-name,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog.is-active .dialog-title,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog.is-active .dialog-date,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog.is-active .dialog-preview,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog.is-active .dialog-kind,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-dialog.is-active .dialog-username,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .all-dialog-row.is-active .dialog-title,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .all-dialog-row.is-active .dialog-preview,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .all-dialog-row.is-active .dialog-subline,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .all-dialog-row.is-active .dialog-time {
  color: #f4f8fc !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat-head {
  z-index: 2 !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 6px 14px !important;
  gap: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tgw-border) !important;
  border-radius: 0 !important;
  background: rgba(23, 33, 43, .92) !important;
  box-shadow: none !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat-head .mini-avatar,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat-head .chat-avatar,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat-head .dialog-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-messages {
  z-index: 1 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-content: stretch !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 8px max(18px, calc((100% - var(--telegram-dialog-lane-width)) / 2)) 11px !important;
  background: transparent !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(127, 145, 163, .48) transparent !important;
}

body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
.telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
  z-index: 2 !important;
  width: min(var(--telegram-dialog-lane-width), calc(100% - 32px)) !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: calc(33dvh + 72px) !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 36px 42px !important;
  gap: 5px !important;
  align-items: end !important;
  margin: 8px auto 12px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--tgw-border) !important;
  border-radius: 18px !important;
  background: rgba(23, 33, 43, .90) !important;
  box-shadow: none !important;
}

body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea,
body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea,
.telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea,
body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea {
  min-height: 36px !important;
  max-height: min(33dvh, 220px) !important;
  padding: 7px 4px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--tgw-text) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  resize: none !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea::placeholder {
  color: var(--tgw-muted) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #attachButton,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #emojiButton,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-send {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #attachButton,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #emojiButton {
  border: 0 !important;
  background: transparent !important;
  color: var(--tgw-muted) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-send {
  border: 1px solid rgba(127, 145, 163, .28) !important;
  background: rgba(23, 33, 43, .72) !important;
  color: var(--tgw-muted) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #attachButton:hover,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #emojiButton:hover,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-send:hover,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #attachButton:focus-visible,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #emojiButton:focus-visible,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-send:focus-visible {
  background: rgba(51, 144, 236, .10) !important;
  color: var(--tgw-read) !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-send.is-send-ready,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-send.is-sending {
  color: var(--tgw-blue) !important;
  border-color: rgba(51, 144, 236, .42) !important;
  background: rgba(51, 144, 236, .10) !important;
}

@media (min-width: 901px) {
  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode {
    grid-template-columns: 284px 374px minmax(0, 1fr) !important;
    grid-template-rows: 54px minmax(0, 1fr) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode .telegram-accounts {
    display: contents !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode .telegram-accountbar {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    grid-template-columns: 284px minmax(0, 1fr) !important;
    border-right: 1px solid var(--tgw-border) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode #inboxAccountList {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    border-right: 1px solid var(--tgw-border) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode .telegram-left {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode #legacyAccountMeta {
    grid-row: 1 !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode #dialogList {
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode .telegram-chat {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode {
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important;
    grid-template-rows: 54px minmax(0, 1fr) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode .telegram-accountbar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(176px, 220px) minmax(0, 1fr) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode .telegram-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode .telegram-chat {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-all-dialogs-mode {
    grid-template-columns: 430px minmax(0, 1fr) !important;
    grid-template-rows: 54px minmax(0, 1fr) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-all-dialogs-mode .telegram-accounts {
    display: contents !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-all-dialogs-mode .telegram-accountbar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-all-dialogs-mode #inboxAccountList {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    border-right: 1px solid var(--tgw-border) !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-all-dialogs-mode .telegram-left {
    display: none !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-all-dialogs-mode .telegram-chat {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }
}

@media (max-width: 900px) {
  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout,
  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode,
  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode,
  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-all-dialogs-mode {
    grid-template-columns: 1fr !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-accounts,
  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-left {
    display: none !important;
  }

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout:not(.is-chat-open) .telegram-chat {
    display: none !important;
  }
}

/* Admin overview compact two-column workspace */
body.role-admin.tab-overview {
  overflow: hidden;
}

body.role-admin.tab-overview .topbar,
body.role-admin.tab-overview #safetyNotice,
body.role-admin.tab-overview .overview-hero,
body.role-admin.tab-overview .overview-chart-panel,
body.role-admin.tab-overview .overview-dashboard-side {
  display: none !important;
}

body.role-admin.tab-overview .main {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 16px 18px !important;
}

body.role-admin.tab-overview .content {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.role-admin.tab-overview .overview-command-center {
  --ov-panel: #17212b;
  --ov-panel-strong: #1d2a36;
  --ov-hover: #202b36;
  --ov-border: rgba(91, 112, 131, .36);
  --ov-border-strong: rgba(51, 144, 236, .35);
  --ov-text: #eef4f8;
  --ov-muted: #8ea0b2;
  --ov-blue: #3390ec;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  padding: 0;
}

body.role-admin.tab-overview .overview-dashboard-layout {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
}

body.role-admin.tab-overview .overview-bottom-grid {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
}

body.role-admin.tab-overview .overview-dashboard-main {
  height: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
}

body.role-admin.tab-overview .overview-accounts-panel,
body.role-admin.tab-overview .overview-risk-panel {
  height: 100%;
  min-height: 0;
  padding: 0;
  display: grid;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--ov-border);
  background: linear-gradient(180deg, rgba(23, 33, 43, .98), rgba(15, 23, 32, .98));
  box-shadow: none;
}

body.role-admin.tab-overview .overview-accounts-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

body.role-admin.tab-overview .overview-risk-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

body.role-admin.tab-overview .overview-panel-head {
  min-height: 58px;
  margin: 0;
  padding: 12px 14px 10px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(91, 112, 131, .24);
}

body.role-admin.tab-overview .overview-panel-head h2 {
  font-size: 16px;
  line-height: 20px;
}

body.role-admin.tab-overview .overview-panel-head p {
  margin-top: 3px;
  color: var(--ov-muted);
  font-size: 12px;
  line-height: 16px;
}

body.role-admin.tab-overview .overview-add-account-button {
  min-height: 34px;
  white-space: nowrap;
}

body.role-admin.tab-overview .overview-add-account-button[data-overview-add-accounts] {
  margin-left: auto;
}

body.role-admin.tab-overview .overview-account-toolbar {
  margin: 0;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid rgba(91, 112, 131, .18);
}

body.role-admin.tab-overview .overview-account-search {
  gap: 0;
}

body.role-admin.tab-overview .overview-account-search > span {
  display: none;
}

body.role-admin.tab-overview .overview-account-search input {
  height: 34px;
  border-radius: 9px;
  background: #202b36;
}

body.role-admin.tab-overview .overview-account-filters {
  gap: 6px;
  flex-wrap: nowrap;
}

body.role-admin.tab-overview .overview-filter-chip {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

body.role-admin.tab-overview #overviewAccountsGrid {
  min-height: 0;
  overflow: auto;
  padding: 10px 14px 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 10px;
  align-content: start;
  scrollbar-width: thin;
}

body.role-admin.tab-overview #overviewRiskCenter {
  min-height: 0;
  max-height: none !important;
  overflow: auto;
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start;
  scrollbar-width: thin;
}

body.role-admin.tab-overview .overview-load-more {
  display: none;
}

body.role-admin.tab-overview .overview-account-card {
  min-height: 128px;
  height: max-content;
  padding: 10px;
  display: grid;
  gap: 8px;
  border-radius: 9px;
  border-color: rgba(91, 112, 131, .28);
  background: #202b36;
  box-shadow: none;
  transform: none;
}

body.role-admin.tab-overview .overview-account-card:hover {
  background: #253342;
  transform: none;
  box-shadow: none;
}

body.role-admin.tab-overview .overview-account-top {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
}

body.role-admin.tab-overview .overview-account-avatar,
body.role-admin.tab-overview .overview-row-avatar {
  width: 40px;
  height: 40px;
}

body.role-admin.tab-overview .overview-account-title strong {
  font-size: 13px;
  line-height: 17px;
}

body.role-admin.tab-overview .overview-account-title span {
  color: var(--ov-muted);
  font-size: 12px;
}

body.role-admin.tab-overview .overview-account-status {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

body.role-admin.tab-overview .overview-account-healthline,
body.role-admin.tab-overview .overview-hitlin {
  display: none !important;
}

body.role-admin.tab-overview .overview-account-stats {
  display: block;
  margin: 0;
}

body.role-admin.tab-overview .overview-account-stats > div {
  display: none !important;
}

body.role-admin.tab-overview .overview-account-stats > .overview-account-stat.is-last-online {
  min-height: 22px;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  border: 0;
  background: transparent;
}

body.role-admin.tab-overview .overview-account-stats > .overview-account-stat.is-last-online span {
  display: inline;
  color: var(--ov-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

body.role-admin.tab-overview .overview-account-stats > .overview-account-stat.is-last-online span::after {
  content: ":";
}

body.role-admin.tab-overview .overview-account-stats > .overview-account-stat.is-last-online b {
  max-width: 100%;
  overflow: hidden;
  color: var(--ov-muted);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.role-admin.tab-overview .overview-account-actions {
  gap: 6px;
  margin-top: 0;
}

body.role-admin.tab-overview .overview-button.small {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

body.role-admin.tab-overview .overview-icon-button {
  width: 30px;
  height: 30px;
}

body.role-admin.tab-overview .overview-risk-row {
  padding: 10px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px;
  border-radius: 9px;
  border-color: rgba(91, 112, 131, .28);
  background: #202b36;
  box-shadow: none;
}

body.role-admin.tab-overview .overview-risk-row .overview-button {
  grid-column: 2;
  justify-self: start;
}

body.role-admin.tab-overview .overview-risk-row p {
  margin: 4px 0 0;
  color: var(--ov-text);
  font-size: 12px;
  line-height: 16px;
}

body.role-admin.tab-overview .overview-empty-state {
  min-height: 88px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(91, 112, 131, .35);
  border-radius: 9px;
  background: rgba(32, 43, 54, .55);
  color: var(--ov-muted);
  font-size: 13px;
}

/* Admin channels dashboard: Telegram-style contract UI */
body.role-admin.tab-channels {
  overflow: hidden;
}

body.role-admin.tab-channels .topbar {
  display: none !important;
}

body.role-admin.tab-channels #safetyNotice {
  display: none !important;
}

body.role-admin.tab-channels .main {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 10px 10px 10px 14px !important;
}

body.role-admin.tab-channels .content {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.channels-dashboard {
  --ch-bg: #0e1721;
  --ch-panel: #17212b;
  --ch-panel-2: #1b2834;
  --ch-row: #15202a;
  --ch-row-hover: #1f2d3a;
  --ch-border: rgba(91, 112, 131, .38);
  --ch-border-soft: rgba(91, 112, 131, .24);
  --ch-text: #edf5fb;
  --ch-muted: #91a3b4;
  --ch-blue: #3390ec;
  --ch-red: #e05a6b;
  --ch-green: #37c978;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(380px, 37%) minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  color: var(--ch-text);
}

.channels-left-panel,
.channels-right-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.channels-left-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid var(--ch-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(23, 33, 43, .98), rgba(13, 21, 30, .98));
}

.channels-right-panel {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  align-content: stretch;
}

.channel-toolbar-mount {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  display: grid;
  justify-items: end;
  max-width: min(360px, 100%);
  pointer-events: none;
}

.channel-toolbar-mount > * {
  pointer-events: auto;
}

.channel-tasks-mount {
  grid-row: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.channel-tasks-workspace {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  width: min(100%, 650px);
  grid-template-columns: repeat(2, minmax(280px, 320px));
  align-items: start;
  justify-content: start;
  gap: 10px;
  overflow: hidden;
}

.channels-right-empty {
  min-height: 0;
  border: 1px solid var(--ch-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15, 24, 34, .72), rgba(10, 18, 27, .72));
}

.channel-selector-mount,
.channel-settings-mount {
  border-bottom: 1px solid var(--ch-border-soft);
}

.channel-selector {
  position: relative;
  padding: 8px;
}

.channel-current-button,
.channel-dropdown-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 9px;
  padding: 8px;
  color: var(--ch-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.channel-current-button:hover,
.channel-dropdown-row:hover {
  background: var(--ch-row-hover);
}

.channel-current-avatar,
.channel-dropdown-avatar,
.channel-status-avatar,
.channel-empty-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
}

.channel-current-copy,
.channel-dropdown-row span,
.channel-status-channel span,
.channel-selected-empty > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.channel-current-copy strong,
.channel-dropdown-row strong,
.channel-status-channel strong,
.channel-selected-empty strong {
  overflow: hidden;
  color: var(--ch-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-current-copy span,
.channel-dropdown-row em,
.channel-status-channel em,
.channel-selected-empty span {
  overflow: hidden;
  color: var(--ch-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-chevron {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ch-muted);
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.channel-chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.channel-selector.is-open .channel-chevron {
  color: #fff;
  background: rgba(51, 144, 236, .14);
  transform: rotate(180deg);
}

.channel-dropdown {
  max-height: 0;
  overflow: hidden;
  border-top: 0 solid transparent;
  opacity: 0;
  transform: translateY(-3px);
  transition: max-height 180ms ease, opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.channel-selector.is-open .channel-dropdown {
  max-height: 260px;
  overflow: auto;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--ch-border-soft);
  opacity: 1;
  transform: translateY(0);
}

.channel-dropdown-row.is-active {
  background: rgba(51, 144, 236, .16);
}

.channel-dropdown-empty,
.channel-panel-empty,
.channel-status-empty,
.channel-live-empty,
.channel-selected-empty {
  color: var(--ch-muted);
  font-size: 13px;
}

.channel-selected-empty {
  min-height: 74px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
}

.channel-empty-avatar {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #45a8ff, #2f6fa8);
  font-weight: 900;
}

.channel-panel-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 14px;
}

.channel-settings-panel {
  display: grid;
  gap: 8px;
  padding: 10px 14px 12px;
}

.channel-section-head {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ch-muted);
  font-size: 12px;
}

.channel-section-head h2 {
  color: var(--ch-text);
  font-size: 14px;
  line-height: 18px;
}

.channel-section-head b {
  color: var(--ch-blue);
}

.channel-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ch-border-soft);
  border-radius: 10px;
  overflow: hidden;
}

.channel-setting-row {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-right: 1px solid var(--ch-border-soft);
  border-bottom: 1px solid var(--ch-border-soft);
  background: rgba(21, 32, 42, .76);
}

.channel-setting-row:nth-child(2n) {
  border-right: 0;
}

.channel-setting-row:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.channel-setting-row span {
  color: var(--ch-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 13px;
  overflow-wrap: anywhere;
}

.channel-setting-input {
  width: 100%;
  min-width: 64px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 6px;
  color: var(--ch-blue);
  background: transparent;
  font: inherit;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.channel-setting-input:hover,
.channel-setting-input:focus {
  border-color: rgba(51, 144, 236, .38);
  background: rgba(51, 144, 236, .10);
  outline: none;
}

.channel-comments-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 10px 0 0;
}

.channel-comments-panel.has-source-post {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.channel-comments-panel .channel-section-head {
  padding: 0 14px 8px;
}

.channel-comments-editor-wrap {
  min-height: 0;
  max-height: 100%;
  display: block;
  overflow: auto;
  scrollbar-color: rgba(91, 112, 131, .68) rgba(10, 18, 27, .45);
  border-top: 1px solid var(--ch-border-soft);
  border-bottom: 1px solid var(--ch-border-soft);
  background: rgba(21, 32, 42, .76);
  scrollbar-width: thin;
}

.channel-comments-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  padding: 0 14px 8px;
  overflow: visible;
}

.channel-comments-actions [data-channel-generation-picker],
.channel-comments-actions [data-channel-shuffle-comments] {
  grid-column: span 3;
}

.channel-generation-picker {
  position: relative;
  z-index: 4;
  min-width: 0;
}

.channel-discussion-generation-picker {
  position: relative;
  z-index: 4;
  min-width: 132px;
}

.channel-generation-interaction-shield {
  position: absolute;
  z-index: 45;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
}

.channel-generation-picker > .channel-action-button,
.channel-generation-mode-menu > .channel-action-button,
.channel-discussion-generation-picker > .channel-action-button,
.channel-discussion-generation-mode-menu > .channel-action-button {
  width: 100%;
}

.channel-generation-mode-menu {
  position: absolute;
  z-index: 61;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: max-height .18s ease, opacity .18s ease, transform .18s ease;
}

.channel-generation-mode-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(51, 144, 236, .46);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #152536;
  box-shadow: 0 14px 24px rgba(0, 0, 0, .32);
}

.channel-discussion-generation-mode-menu {
  position: absolute;
  z-index: 61;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: max-height .18s ease, opacity .18s ease, transform .18s ease;
}

.channel-discussion-generation-mode-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(91, 112, 131, .30);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #15202a;
  box-shadow: 0 -14px 24px rgba(0, 0, 0, .32);
}

.channel-generation-picker.is-open {
  z-index: 60;
}

.channel-discussion-generation-picker.is-open {
  z-index: 60;
}

.channel-generation-picker.is-open [data-channel-generate-comments] {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.channel-discussion-generation-picker.is-open [data-channel-discussion-generate] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.channel-generation-picker.is-open .channel-generation-mode-menu {
  max-height: 42px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.channel-discussion-generation-picker.is-open .channel-discussion-generation-mode-menu {
  max-height: 42px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.channel-generation-mode-menu .channel-action-button,
.channel-discussion-generation-mode-menu .channel-action-button {
  background: linear-gradient(180deg, rgba(27, 40, 52, .96), rgba(18, 28, 38, .96));
  box-shadow: none;
}

.channel-generation-mode-menu .channel-action-button {
  border-top-color: rgba(51, 144, 236, .26);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.channel-discussion-generation-mode-menu .channel-action-button {
  border-bottom-color: rgba(91, 112, 131, .30);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.channel-generation-mode-menu .channel-action-button:hover,
.channel-generation-mode-menu .channel-action-button:focus-visible,
.channel-discussion-generation-mode-menu .channel-action-button:hover,
.channel-discussion-generation-mode-menu .channel-action-button:focus-visible {
  border-color: rgba(51, 144, 236, .45);
  background: rgba(51, 144, 236, .16);
}

.channel-comments-actions [data-channel-create-task],
.channel-comments-actions [data-channel-create-discussion],
.channel-comments-actions [data-channel-clear-comments] {
  grid-column: span 2;
}

.channel-source-selected {
  min-height: 0;
  max-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 14px 8px;
  border: 1px solid rgba(51, 144, 236, .24);
  border-radius: 9px;
  padding: 6px 9px;
  color: var(--ch-muted);
  background: rgba(51, 144, 236, .09);
  font-size: 12px;
  overflow: hidden;
}

.channel-source-selected-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.channel-source-selected-copy span,
.channel-source-selected-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-source-selected-copy small {
  max-height: 32px;
  overflow-y: auto;
  white-space: normal;
  color: var(--ch-muted);
  font-size: 12px;
  line-height: 16px;
  scrollbar-width: thin;
}

.channel-source-selected b {
  color: var(--ch-text);
}

.channel-source-selected .channel-source-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.channel-source-selected button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 4px 8px;
  color: #dcedff;
  background: rgba(51, 144, 236, .16);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.channel-action-button.compact {
  min-height: 34px;
  gap: 7px;
  border-radius: 9px;
  padding: 0 9px;
}

.channel-tasks-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ch-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(23, 33, 43, .96), rgba(12, 20, 29, .96));
}

.channel-active-tasks-panel {
  max-width: 320px;
}

.channel-completed-tasks-panel {
  max-width: 320px;
}

@media (max-width: 1320px) {
  body.role-admin.tab-channels .channel-toolbar {
    width: 150px;
    grid-template-columns: minmax(132px, 1fr);
  }

  body.role-admin.tab-channels .channel-toolbar-test {
    grid-column: 1;
  }

  body.role-admin.tab-channels .channel-tasks-workspace {
    width: calc(100% - 160px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.role-admin.tab-channels .channel-active-tasks-panel,
  body.role-admin.tab-channels .channel-completed-tasks-panel {
    max-width: none;
  }
}

.channel-tasks-head {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--ch-border-soft);
  padding: 10px 14px;
}

.channel-tasks-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.channel-tasks-head h2 {
  color: var(--ch-text);
  font-size: 16px;
  line-height: 20px;
}

.channel-tasks-head span {
  color: var(--ch-muted);
  font-size: 12px;
}

.channel-tasks-loading {
  display: grid;
  place-items: center;
}

.channel-tasks-list {
  min-height: 0;
  max-height: 100%;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 112, 131, .68) rgba(10, 18, 27, .45);
}

.channel-tasks-empty {
  min-height: 142px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(91, 112, 131, .35);
  border-radius: 12px;
  padding: 18px;
  color: var(--ch-muted);
  background: rgba(10, 18, 27, .22);
  font-size: 13px;
  text-align: center;
}

.channel-task-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--ch-border-soft);
  border-radius: 12px;
  padding: 12px;
  background: rgba(21, 32, 42, .82);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    opacity 160ms ease;
}

.channel-task-card:hover {
  border-color: rgba(51, 144, 236, .34);
  background: rgba(31, 45, 58, .86);
}

.channel-task-card.is-busy {
  opacity: .72;
}

.channel-completed-task-card {
  border-color: rgba(55, 201, 120, .22);
  background: rgba(19, 36, 35, .64);
}

.channel-completed-task-card:hover {
  border-color: rgba(55, 201, 120, .36);
  background: rgba(24, 48, 45, .72);
}

.channel-task-card-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.channel-task-card-main > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-task-card-main strong {
  color: var(--ch-text);
  font-size: 14px;
}

.channel-task-card-main span {
  color: var(--ch-muted);
  font-size: 12px;
}

.channel-task-card-main .channel-task-channel {
  color: #dcecff;
  font-weight: 800;
}

.channel-task-card-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.channel-prompt-status {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 8px;
  color: var(--ch-muted);
  font-size: 12px;
}

.channel-prompt-status > span {
  color: var(--ch-text);
  font-weight: 800;
}

.channel-prompt-status.is-ok > span,
.channel-prompt-status .is-ok {
  color: var(--ch-green);
}

.channel-prompt-status.is-error > span,
.channel-prompt-status .is-error {
  color: var(--ch-red);
}

.channel-prompt-status em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-prompt-details {
  margin: 0 14px 8px;
  border: 1px solid var(--ch-border-soft);
  border-radius: 10px;
  background: rgba(10, 18, 27, .26);
}

.channel-prompt-details summary {
  min-height: 28px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 10px;
  color: var(--ch-muted);
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}

.channel-prompt-details summary::-webkit-details-marker {
  display: none;
}

.channel-prompt-details summary::after {
  content: "⌄";
  margin-left: auto;
  color: var(--ch-blue);
  font-size: 14px;
}

.channel-prompt-details[open] summary::after {
  transform: rotate(180deg);
}

.channel-prompt-file-list {
  display: grid;
  border-top: 1px solid var(--ch-border-soft);
}

.channel-prompt-file-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, .52fr) minmax(0, 1fr);
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid rgba(42, 56, 70, .52);
  color: var(--ch-text);
  font-size: 12px;
}

.channel-prompt-file-row:first-child {
  border-top: 0;
}

.channel-prompt-file-row span,
.channel-prompt-file-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-prompt-file-row em {
  color: var(--ch-muted);
  font-style: normal;
}

.channel-prompt-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 0 14px 8px;
}

.channel-prompt-chip {
  min-width: 0;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--ch-border-soft);
  border-radius: 999px;
  padding: 0 7px;
  color: var(--ch-muted);
  background: rgba(10, 18, 27, .28);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-prompt-chip.is-generating {
  color: #dcedff;
  border-color: rgba(51, 144, 236, .38);
  background: rgba(51, 144, 236, .12);
}

.channel-prompt-chip.is-done {
  color: var(--ch-green);
  border-color: rgba(55, 201, 120, .28);
  background: rgba(55, 201, 120, .10);
}

.channel-prompt-chip.is-error {
  color: #ffd8de;
  border-color: rgba(224, 90, 107, .35);
  background: rgba(224, 90, 107, .11);
}

.channel-comment-rows {
  min-width: 0;
  display: grid;
}

.channel-comment-row {
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 34px 40px;
  align-items: center;
  border-bottom: 1px solid var(--ch-border-soft);
  overflow: hidden;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    height 180ms ease,
    min-height 180ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
  will-change: opacity, transform, height;
}

.channel-comment-row.is-entering {
  opacity: 0;
  transform: translateY(-5px);
}

.channel-comment-row.is-removing {
  min-height: 0 !important;
  height: 0 !important;
  opacity: 0;
  transform: translateY(-5px);
  border-color: transparent;
  pointer-events: none;
}

.channel-comment-row.is-locked {
  background: rgba(55, 201, 120, .07);
}

.channel-comment-number {
  color: var(--ch-muted);
  font-size: 13px;
  text-align: center;
}

.channel-comment-input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  color: var(--ch-text);
  background: transparent;
  font: inherit;
  font-size: 13px;
  outline: none;
}

input.channel-comment-input {
  height: 34px;
  padding: 0 8px;
  overflow: hidden;
  font: 13px/34px inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

textarea.channel-comment-input {
  min-height: 34px;
  max-height: 132px;
  padding: 7px 8px;
  overflow: hidden;
  line-height: 18px;
  resize: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  scrollbar-width: thin;
}

.channel-comment-input:focus {
  background: rgba(51, 144, 236, .09);
}

.channel-comment-row.is-locked .channel-comment-input {
  color: #cfe7da;
}

.channel-comment-attach,
.channel-comment-confirm {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(51, 144, 236, .36);
  border-radius: 50%;
  color: var(--ch-blue);
  background: rgba(51, 144, 236, .10);
  cursor: pointer;
}

.channel-comment-attach svg,
.channel-comment-confirm svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.channel-comment-attach.has-media {
  color: var(--ch-green);
  border-color: rgba(55, 201, 120, .38);
  background: rgba(55, 201, 120, .12);
}

.channel-comment-confirm .small-spinner {
  width: 15px;
  height: 15px;
}

.channel-comment-attach:hover,
.channel-comment-attach:focus-visible,
.channel-comment-confirm:hover,
.channel-comment-confirm:focus-visible {
  color: #fff;
  background: rgba(51, 144, 236, .22);
  outline: none;
}

.channel-comment-confirm.is-confirmed {
  color: var(--ch-green);
  border-color: rgba(55, 201, 120, .38);
  background: rgba(55, 201, 120, .12);
}

.channel-comment-attach:disabled,
.channel-comment-confirm:disabled {
  cursor: default;
  opacity: .7;
}

.channel-comments-gutter {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ch-muted);
  border-right: 1px solid var(--ch-border-soft);
  background: rgba(10, 18, 27, .22);
  font-size: 13px;
  line-height: 31px;
  text-align: center;
}

.channel-comments-editor {
  width: 100%;
  min-height: 100%;
  border: 0;
  resize: none;
  padding: 0 10px 10px;
  color: var(--ch-text);
  background: transparent;
  font: 13px/31px inherit;
  outline: none;
  white-space: pre-wrap;
}

.channel-comments-foot {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  color: var(--ch-muted);
  font-size: 12px;
  overflow: hidden;
  contain: inline-size;
}

.channel-save-notice {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--ch-muted);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-save-notice.is-ok {
  color: var(--ch-green);
}

.channel-save-notice.is-error {
  color: var(--ch-red);
}

.channel-toolbar {
  width: max-content;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(132px, 1fr) minmax(132px, 1fr);
  justify-content: end;
  justify-self: end;
  gap: 8px;
  align-items: center;
  overflow: hidden;
}

.channel-toolbar [data-add-channel] {
  order: 1;
}

.channel-toolbar [data-delete-channel] {
  order: 2;
}

.channel-toolbar [data-add-test-channel] {
  order: 3;
  grid-column: 1 / -1;
  width: 100%;
}

.channel-toolbar-notices {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.channel-toolbar-notice {
  max-width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid rgba(51, 144, 236, .26);
  border-radius: 10px;
  padding: 8px 11px;
  color: #cfe6ff;
  background: rgba(51, 144, 236, .10);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-toolbar-notice.is-ok {
  color: #d7f8e6;
  border-color: rgba(55, 201, 120, .28);
  background: rgba(55, 201, 120, .10);
}

.channel-toolbar-notice.is-error {
  color: #ffd8de;
  border-color: rgba(224, 90, 107, .34);
  background: rgba(224, 90, 107, .10);
}

.channel-action-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--ch-border);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--ch-text);
  background: linear-gradient(180deg, rgba(27, 40, 52, .96), rgba(18, 28, 38, .96));
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.channel-action-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-action-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.channel-action-button > .small-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.channel-action-button:hover,
.channel-action-button:focus-visible {
  border-color: rgba(51, 144, 236, .45);
  background: rgba(51, 144, 236, .16);
  outline: none;
}

.channel-action-button.primary {
  color: #dcedff;
  border-color: rgba(51, 144, 236, .46);
}

.channel-action-button.danger {
  color: #ffd8de;
  border-color: rgba(224, 90, 107, .42);
}

.channel-action-button.soft-danger:hover,
.channel-action-button.soft-danger:focus-visible {
  color: #ffd8de;
  border-color: rgba(224, 90, 107, .38);
  background: rgba(224, 90, 107, .10);
}

.channel-action-button.soft-danger:active {
  transform: translateY(1px) scale(.99);
}

.channel-action-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.channel-toolbar-spacer {
  height: 38px;
  border: 1px solid var(--ch-border-soft);
  border-radius: 10px;
  background: rgba(21, 32, 42, .62);
}

.channel-enable-toggle {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--ch-border-soft);
  border-radius: 10px;
  padding: 0 10px;
  overflow: hidden;
  color: var(--ch-muted);
  background: rgba(21, 32, 42, .62);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.channel-enable-toggle.is-on {
  color: var(--ch-green);
  border-color: rgba(55, 201, 120, .28);
  background: rgba(55, 201, 120, .10);
}

.channel-enable-toggle.is-off {
  color: #f2b8c0;
  border-color: rgba(224, 90, 107, .32);
  background: rgba(224, 90, 107, .10);
}

.channel-enable-toggle:hover,
.channel-enable-toggle:focus-visible {
  border-color: rgba(51, 144, 236, .42);
  color: #fff;
  outline: none;
}

.channel-enable-toggle:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.channel-compact-error {
  display: none;
  margin-top: 4px;
  border: 1px solid rgba(224, 90, 107, .32);
  border-radius: 9px;
  padding: 7px 10px;
  color: #ffd8de;
  background: rgba(224, 90, 107, .10);
  font-size: 12px;
}

.channel-compact-error.is-visible {
  display: block;
}

.channel-status-panel,
.channel-live-panel {
  min-height: 0;
  height: 100%;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--ch-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(23, 33, 43, .98), rgba(13, 21, 30, .98));
}

.channel-status-panel {
  grid-template-rows: 42px minmax(0, 1fr);
}

.channel-status-header,
.channel-status-row {
  display: grid;
  grid-template-columns: minmax(132px, 1.15fr) minmax(92px, .85fr) minmax(104px, .95fr) minmax(60px, .48fr) minmax(104px, 1.25fr);
  align-items: stretch;
}

.channel-status-header {
  border-bottom: 1px solid var(--ch-border-soft);
  color: var(--ch-muted);
  background: rgba(21, 32, 42, .76);
  font-size: 12px;
  font-weight: 800;
}

.channel-status-header span,
.channel-status-row > span {
  min-width: 0;
  display: grid;
  align-items: center;
  border-right: 1px solid var(--ch-border-soft);
  padding: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-status-header span:last-child,
.channel-status-row > span:last-child {
  border-right: 0;
}

.channel-status-table-scroll,
.channel-live-log-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 112, 131, .68) rgba(10, 18, 27, .45);
}

.channel-status-row {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid var(--ch-border-soft);
  color: var(--ch-text);
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.channel-status-row:hover {
  background: var(--ch-row-hover);
}

.channel-status-row.is-active {
  background: rgba(51, 144, 236, .14);
  box-shadow: inset 3px 0 0 var(--ch-blue);
}

.channel-status-channel {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
}

.channels-dashboard *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.channels-dashboard *::-webkit-scrollbar-track {
  background: rgba(10, 18, 27, .45);
}

.channels-dashboard *::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(91, 112, 131, .68);
}

.channel-error-reasons {
  gap: 2px;
  align-content: center;
}

.channel-error-reasons em {
  overflow: hidden;
  color: var(--ch-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-status-empty,
.channel-live-empty {
  height: 100%;
  min-height: 110px;
  display: grid;
  place-items: center;
}

.channel-live-panel {
  grid-template-rows: 30px minmax(0, 1fr);
}

.channel-live-title {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--ch-border-soft);
  color: var(--ch-blue);
  font-size: 14px;
  font-weight: 850;
}

.channel-live-log-scroll {
  padding: 8px 12px 12px;
}

.channel-live-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 3px 0;
  color: #dce7f1;
  font-size: 13px;
  line-height: 18px;
  animation: channelLiveIn 180ms ease both;
}

.channel-live-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--ch-blue);
}

.channel-live-row.is-success .channel-live-dot {
  background: var(--ch-green);
}

.channel-live-row.is-warning .channel-live-dot {
  background: #e0a84f;
}

.channel-live-row.is-error .channel-live-dot {
  background: var(--ch-red);
}

.channel-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .48);
  animation: motionBackdropIn 160ms ease both;
}

.channel-modal-overlay.is-closing {
  animation: motionBackdropOut 140ms ease both;
}

.channel-modal {
  position: relative;
  width: min(380px, calc(100vw - 30px));
  display: grid;
  gap: 12px;
  border: 1px solid var(--ch-border, rgba(91, 112, 131, .38));
  border-radius: 13px;
  padding: 18px;
  color: var(--ch-text, #edf5fb);
  background: #17212b;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .44);
  animation: motionModalIn 160ms ease both;
}

.channel-source-modal,
.channel-task-modal,
.channel-delete-modal {
  width: min(560px, calc(100vw - 30px));
}

.channel-modal h2 {
  font-size: 17px;
}

.channel-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: var(--ch-muted, #91a3b4);
  background: transparent;
  cursor: pointer;
}

.channel-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.channel-modal-input {
  height: 40px;
  border: 1px solid rgba(91, 112, 131, .38);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--ch-text, #edf5fb);
  background: #202b36;
  font: inherit;
}

.channel-modal-input:focus {
  border-color: rgba(51, 144, 236, .46);
  outline: none;
}

.channel-modal-error {
  min-height: 16px;
  color: var(--ch-red, #e05a6b);
  font-size: 12px;
}

.channel-modal-hint {
  margin: -4px 0 0;
  color: var(--ch-muted, #91a3b4);
  font-size: 12px;
  line-height: 17px;
}

.channel-test-existing {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(91, 112, 131, .28);
  border-radius: 10px;
  padding: 12px;
  background: rgba(10, 18, 27, .22);
}

.channel-test-existing p {
  margin: 0;
  color: var(--ch-text, #edf5fb);
  font-size: 14px;
}

.channel-add-progress {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(91, 112, 131, .30);
  border-radius: 11px;
  padding: 10px;
  background: rgba(10, 18, 27, .26);
}

.channel-add-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ch-muted, #91a3b4);
  font-size: 12px;
}

.channel-add-progress-row b {
  color: var(--ch-text, #edf5fb);
  font-size: 13px;
}

.channel-add-progress-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(91, 112, 131, .24);
}

.channel-add-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ch-blue, #3390ec), #37c978);
  transition: width 180ms ease;
}

.channel-add-progress.is-error .channel-add-progress-bar span,
.channel-add-progress.is-partial_failed .channel-add-progress-bar span {
  background: linear-gradient(90deg, #e0a84f, var(--ch-red, #e05a6b));
}

.channel-add-reasons {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 16px;
  color: #ffd8de;
  font-size: 12px;
  line-height: 16px;
}

.channel-modal-empty {
  min-height: 82px;
  display: grid;
  place-items: center;
  color: var(--ch-muted, #91a3b4);
  font-size: 13px;
}

.channel-source-list,
.channel-delete-list,
.channel-task-list {
  min-height: 120px;
  max-height: min(360px, 52vh);
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  border: 1px solid rgba(91, 112, 131, .28);
  border-radius: 10px;
  padding: 6px;
  background: rgba(10, 18, 27, .22);
  scrollbar-width: thin;
}

.channel-source-row,
.channel-delete-row,
.channel-task-row {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 10px;
  color: var(--ch-text, #edf5fb);
  background: rgba(21, 32, 42, .76);
  text-align: left;
  cursor: pointer;
}

.channel-source-row {
  grid-template-columns: 54px minmax(0, .85fr) minmax(0, 1.15fr);
}

.channel-task-row {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.channel-delete-row {
  grid-template-columns: 42px minmax(0, 1fr);
}

.channel-source-row:hover,
.channel-delete-row:hover,
.channel-task-row:hover,
.channel-source-row.is-active,
.channel-delete-row.is-active,
.channel-task-row.is-active {
  border-color: rgba(51, 144, 236, .42);
  background: rgba(51, 144, 236, .14);
}

.channel-source-row span,
.channel-delete-row span,
.channel-task-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.channel-source-thumb {
  position: relative;
  width: 54px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  color: var(--ch-muted, #91a3b4);
  background: rgba(91, 112, 131, .18);
}

.channel-source-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.channel-source-thumb b {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(4, 12, 20, .74);
  font-size: 11px;
  line-height: 1;
}

.channel-source-thumb.is-empty {
  opacity: .55;
}

.channel-delete-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.channel-source-row strong,
.channel-delete-row strong,
.channel-task-row strong,
.channel-source-row em,
.channel-delete-row em,
.channel-task-row em,
.channel-source-row small,
.channel-task-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-source-row strong,
.channel-delete-row strong,
.channel-task-row strong {
  font-size: 13px;
}

.channel-source-row em,
.channel-delete-row em,
.channel-task-row em,
.channel-source-row small,
.channel-task-row small {
  color: var(--ch-muted, #91a3b4);
  font-size: 12px;
  font-style: normal;
}

.channel-source-row small.is-muted {
  opacity: .72;
}

.channel-delete-confirm {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(224, 90, 107, .28);
  border-radius: 10px;
  padding: 12px;
  background: rgba(224, 90, 107, .08);
}

.channel-delete-confirm b {
  color: var(--ch-text, #edf5fb);
  font-size: 15px;
}

.channel-delete-confirm span {
  color: var(--ch-muted, #91a3b4);
  font-size: 12px;
}

.channel-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.channel-source-explain-toggle {
  margin-right: auto;
}

.channel-source-explain-toggle.is-active {
  color: #fff;
  border-color: rgba(51, 144, 236, .46);
  background: rgba(51, 144, 236, .18);
}

.channel-source-explain-box[hidden] {
  display: none;
}

.channel-source-explain-text {
  min-height: 96px;
  resize: vertical;
  line-height: 18px;
}

.channel-post-modal {
  width: min(680px, calc(100vw - 30px));
}

.channel-task-confirmed-list {
  min-height: 120px;
  max-height: min(440px, 60vh);
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  border: 1px solid rgba(91, 112, 131, .28);
  border-radius: 10px;
  padding: 8px;
  background: rgba(10, 18, 27, .22);
  scrollbar-width: thin;
}

.channel-task-confirmed-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid rgba(55, 201, 120, .20);
  border-radius: 9px;
  padding: 8px 10px;
  color: #dce7f1;
  background: rgba(55, 201, 120, .07);
  font-size: 13px;
  line-height: 18px;
}

.channel-task-confirmed-row b {
  color: var(--ch-green, #37c978);
  font-weight: 850;
}

.channel-task-confirmed-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.channel-task-confirmed-row p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.channel-task-view-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--ch-muted, #91a3b4);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-post-preview {
  min-width: 0;
  max-height: min(650px, 72vh);
  display: grid;
  gap: 10px;
  overflow: auto;
  border: 1px solid rgba(91, 112, 131, .28);
  border-radius: 12px;
  padding: 10px;
  background: rgba(10, 18, 27, .22);
  scrollbar-width: thin;
}

.channel-post-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ch-muted, #91a3b4);
  font-size: 12px;
}

.channel-post-preview-text {
  color: var(--ch-text, #edf5fb);
  font-size: 14px;
  line-height: 19px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.channel-post-preview-text.is-muted {
  color: var(--ch-muted, #91a3b4);
}

.channel-post-preview .message-media-card,
.channel-post-preview .media-card {
  max-width: 100%;
}

.channel-post-no-media {
  min-height: 92px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(91, 112, 131, .32);
  border-radius: 11px;
  color: var(--ch-muted, #91a3b4);
  font-size: 13px;
  background: rgba(21, 32, 42, .55);
}

.channel-discussion-modal {
  width: min(1040px, calc(100vw - 34px));
  height: min(720px, calc(100vh - 34px));
  max-height: calc(100vh - 34px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

.channel-discussion-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
  gap: 12px;
  height: auto;
}

.channel-discussion-accounts,
.channel-discussion-work {
  min-height: 0;
  display: grid;
  border: 1px solid rgba(91, 112, 131, .28);
  border-radius: 12px;
  background: rgba(10, 18, 27, .24);
  overflow: hidden;
}

.channel-discussion-accounts {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 10px;
  gap: 10px;
}

.channel-discussion-search {
  height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(91, 112, 131, .34);
  border-radius: 10px;
  padding: 0 10px;
  color: var(--ch-muted, #91a3b4);
  background: rgba(21, 32, 42, .86);
}

.channel-discussion-search svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.channel-discussion-search input {
  min-width: 0;
  border: 0;
  color: var(--ch-text, #edf5fb);
  background: transparent;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.channel-discussion-account-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.channel-discussion-account-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 7px;
  color: var(--ch-text, #edf5fb);
  background: rgba(21, 32, 42, .72);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.channel-discussion-account-row:hover,
.channel-discussion-account-row:focus-visible {
  border-color: rgba(51, 144, 236, .42);
  background: rgba(51, 144, 236, .14);
  outline: none;
}

.channel-discussion-account-row:active {
  transform: none;
}

.channel-discussion-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.channel-discussion-account-row span,
.channel-discussion-row-person {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.channel-discussion-account-row strong,
.channel-discussion-account-row em,
.channel-discussion-row-person strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-discussion-account-row strong,
.channel-discussion-row-person strong {
  font-size: 13px;
}

.channel-discussion-account-row em {
  color: var(--ch-muted, #91a3b4);
  font-size: 12px;
  font-style: normal;
}

.channel-discussion-work {
  grid-template-rows: auto auto minmax(0, 1fr);
  position: relative;
}

.channel-discussion-topbar {
  position: relative;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(91, 112, 131, .26);
  padding: 10px 14px;
}

.channel-discussion-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.channel-discussion-title h2 {
  margin: 0;
  font-size: 17px;
}

.channel-discussion-menu-button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(91, 112, 131, .32);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ch-text, #edf5fb);
  background: rgba(21, 32, 42, .78);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.channel-discussion-menu-button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 160ms ease;
}

.channel-discussion-menu-button.is-open svg {
  transform: rotate(180deg);
}

.channel-discussion-context {
  min-height: 32px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(91, 112, 131, .18);
  padding: 0 14px;
  color: var(--ch-muted, #91a3b4);
  font-size: 12px;
}

.channel-discussion-rows {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  scrollbar-width: thin;
}

.channel-discussion-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(91, 112, 131, .34);
  border-radius: 12px;
  color: var(--ch-muted, #91a3b4);
  font-size: 13px;
}

.channel-discussion-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(130px, .7fr) minmax(180px, 1fr) minmax(96px, auto);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(91, 112, 131, .24);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(21, 32, 42, .74);
}

.channel-discussion-row-number {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #dcedff;
  background: rgba(51, 144, 236, .18);
  font-size: 12px;
  font-weight: 900;
}

.channel-discussion-row-person {
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 4px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.channel-discussion-row-person:hover,
.channel-discussion-row-person:focus-visible {
  border-color: rgba(51, 144, 236, .42);
  background: rgba(51, 144, 236, .12);
  outline: none;
}

.channel-discussion-row-person.is-replacing {
  border-color: rgba(51, 144, 236, .72);
  background: rgba(51, 144, 236, .22);
  box-shadow: 0 0 0 1px rgba(51, 144, 236, .18) inset;
}

.channel-discussion-attach {
  width: 26px;
  height: 26px;
}

.channel-discussion-attach svg {
  width: 16px;
  height: 16px;
}

.channel-discussion-text {
  min-width: 0;
  min-height: 42px;
  max-height: 96px;
  resize: vertical;
  border: 1px solid rgba(91, 112, 131, .30);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ch-text, #edf5fb);
  background: rgba(10, 18, 27, .50);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  outline: none;
}

.channel-discussion-text:focus {
  border-color: rgba(51, 144, 236, .50);
  background: rgba(10, 18, 27, .72);
}

.channel-discussion-reply {
  display: inline-grid;
  grid-template-columns: 24px 50px 32px;
  align-items: center;
  gap: 6px;
}

.channel-discussion-reply-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ch-muted, #91a3b4);
  background: rgba(91, 112, 131, .16);
}

.channel-discussion-reply-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.channel-discussion-reply select {
  min-width: 0;
  width: 50px;
  height: 34px;
  border: 1px solid rgba(91, 112, 131, .30);
  border-radius: 9px;
  color: var(--ch-text, #edf5fb);
  background: #202b36;
  font: inherit;
  font-size: 13px;
  padding: 0 4px;
}

.channel-discussion-reply select:disabled {
  opacity: .48;
}

.channel-discussion-row-delete {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91, 112, 131, .34);
  border-radius: 9px;
  color: var(--ch-red, #ff6b7a);
  background: rgba(10, 18, 27, .42);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.channel-discussion-row-delete svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.channel-discussion-row-delete:hover,
.channel-discussion-row-delete:focus-visible {
  border-color: rgba(91, 112, 131, .54);
  background: rgba(255, 107, 122, .12);
  outline: none;
}

.channel-discussion-row-delete:active {
  transform: scale(.96);
}

.channel-discussion-menu {
  position: absolute;
  top: calc(100% - 5px);
  right: 14px;
  z-index: 4;
  width: min(310px, calc(100vw - 70px));
  display: grid;
  gap: 10px;
  border: 1px solid rgba(91, 112, 131, .35);
  border-radius: 14px;
  padding: 10px;
  background: #17212b;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}

.channel-discussion-menu-list {
  max-height: 250px;
  display: grid;
  gap: 6px;
  overflow: auto;
  scrollbar-width: thin;
}

.channel-discussion-menu-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ch-text, #edf5fb);
  background: rgba(21, 32, 42, .74);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.channel-discussion-menu-row:not(:has(.channel-discussion-delete-circle)) {
  grid-template-columns: minmax(0, 1fr);
}

.channel-discussion-menu-row.is-active,
.channel-discussion-menu-row:hover,
.channel-discussion-menu-row:focus-visible {
  border-color: rgba(51, 144, 236, .42);
  background: rgba(51, 144, 236, .14);
  outline: none;
}

.channel-discussion-delete-circle {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(145, 163, 180, .76);
  border-radius: 999px;
}

.channel-discussion-delete-circle.is-selected {
  border-color: var(--ch-red, #e05a6b);
  box-shadow: inset 0 0 0 4px #17212b;
  background: var(--ch-red, #e05a6b);
}

.channel-discussion-menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.channel-discussion-footer {
  min-height: 42px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid rgba(91, 112, 131, .22);
  padding-top: 10px;
}

.channel-discussion-footer-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.channel-discussion-footer-actions .channel-action-button {
  min-width: 132px;
  justify-content: center;
}

@keyframes channelLiveIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .channels-dashboard {
    grid-template-columns: minmax(360px, 38%) minmax(0, 1fr);
  }

  .channel-status-header,
  .channel-status-row {
    grid-template-columns: minmax(124px, 1.1fr) minmax(86px, .8fr) minmax(98px, .9fr) minmax(56px, .45fr) minmax(96px, 1.2fr);
  }
}

@media (max-width: 900px) {
  .channels-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .channels-right-panel {
    grid-template-rows: auto minmax(0, 1fr) minmax(150px, 34%);
  }

  .channel-tasks-workspace {
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  }

  .channel-discussion-modal {
    height: calc(100vh - 24px);
  }

  .channel-discussion-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(160px, 32%) minmax(0, 1fr);
  }

  .channel-discussion-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(86px, auto);
  }

  .channel-discussion-text {
    grid-column: 2 / -1;
  }
}

@media (max-width: 1280px) {
  body.role-admin.tab-overview .overview-command-center {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 340px);
  }

  body.role-admin.tab-overview #overviewAccountsGrid {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
  }
}

@media (max-width: 980px) {
  body.role-admin.tab-overview {
    overflow: hidden;
  }

  body.role-admin.tab-overview .main,
  body.role-admin.tab-overview .content {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.role-admin.tab-overview .overview-command-center {
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(220px, 35vh);
  }

  body.role-admin.tab-overview .overview-bottom-grid {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Telegram media reference pass: stickers, GIFs, voice and round videos. */
.telegram-message.incoming .message-ticks,
.telegram-message.incoming .message-status-spinner,
.telegram-message.incoming .message-status-failed,
body.role-worker .telegram-message.incoming .message-ticks,
body.role-worker .telegram-message.incoming .message-status-spinner,
body.role-worker .telegram-message.incoming .message-status-failed {
  display: none !important;
}

.telegram-message.is-sticker-only .message-bubble,
.telegram-message.is-media-only .message-bubble,
body.role-worker .telegram-message.is-sticker-only .message-bubble,
body.role-worker .telegram-message.is-media-only .message-bubble {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.telegram-message.is-sticker-only .message-bubble,
body.role-worker .telegram-message.is-sticker-only .message-bubble {
  width: min(220px, 54vw) !important;
  max-width: min(220px, 54vw) !important;
}

.telegram-message.has-gif-media.is-media-only .message-bubble,
body.role-worker .telegram-message.has-gif-media.is-media-only .message-bubble {
  width: min(340px, 72vw) !important;
  max-width: min(340px, 72vw) !important;
}

.telegram-message.has-video-note-media.is-media-only .message-bubble,
body.role-worker .telegram-message.has-video-note-media.is-media-only .message-bubble {
  width: min(245px, 58vw) !important;
  max-width: min(245px, 58vw) !important;
}

.telegram-message.is-sticker-only .message-bubble::after,
.telegram-message.is-media-only .message-bubble::after,
body.role-worker .telegram-message.is-sticker-only .message-bubble::after,
body.role-worker .telegram-message.is-media-only .message-bubble::after {
  content: none !important;
  display: none !important;
}

.telegram-sticker-card {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.telegram-sticker-media {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(220px, 54vw) !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

.telegram-message.is-sticker-only .message-text,
.telegram-message.is-sticker-only .telegram-photo-caption,
.telegram-message.is-sticker-only .media-caption,
.telegram-message.is-sticker-only .media-title,
body.role-worker .telegram-message.is-sticker-only .message-text,
body.role-worker .telegram-message.is-sticker-only .telegram-photo-caption,
body.role-worker .telegram-message.is-sticker-only .media-caption,
body.role-worker .telegram-message.is-sticker-only .media-title {
  display: none !important;
}

.telegram-message.is-sticker-only .message-footer,
.telegram-message.is-media-only .message-footer,
body.role-worker .telegram-message.is-sticker-only .message-footer,
body.role-worker .telegram-message.is-media-only .message-footer {
  position: absolute !important;
  right: 6px !important;
  bottom: 6px !important;
  z-index: 5 !important;
  float: none !important;
  margin: 0 !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 12px) !important;
  padding: 3px 5px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .46) !important;
  color: #fff !important;
  transform: none !important;
  backdrop-filter: blur(6px) !important;
}

.telegram-message.is-sticker-only .message-time,
.telegram-message.is-media-only .message-time,
body.role-worker .telegram-message.is-sticker-only .message-time,
body.role-worker .telegram-message.is-media-only .message-time {
  color: rgba(255, 255, 255, .86) !important;
}

.telegram-message.has-gif-media .message-bubble > .telegram-gif-card,
body.role-worker .telegram-message.has-gif-media .message-bubble > .telegram-gif-card {
  width: min(340px, 72vw) !important;
  max-width: min(340px, 72vw) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.telegram-message.has-gif-media .telegram-gif-image,
.telegram-message.has-gif-media .telegram-gif-video,
body.role-worker .telegram-message.has-gif-media .telegram-gif-image,
body.role-worker .telegram-message.has-gif-media .telegram-gif-video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 360px !important;
  aspect-ratio: var(--media-ratio, auto) !important;
  object-fit: contain !important;
  border-radius: 13px !important;
  background: #0b111a !important;
}

.telegram-gif-badge {
  display: none !important;
}

.telegram-message.has-voice-media .message-bubble,
body.role-worker .telegram-message.has-voice-media .message-bubble {
  min-width: min(255px, 76vw) !important;
  padding: 7px 9px 6px !important;
  border-radius: 13px !important;
}

.telegram-message.outgoing.has-voice-media .message-bubble,
body.role-worker .telegram-message.outgoing.has-voice-media .message-bubble {
  background: #7b61d9 !important;
  color: #fff !important;
}

.telegram-message.has-voice-media .message-footer,
body.role-worker .telegram-message.has-voice-media .message-footer {
  position: absolute !important;
  right: 9px !important;
  bottom: 6px !important;
  z-index: 4 !important;
  float: none !important;
  margin: 0 !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 18px) !important;
  transform: none !important;
}

.telegram-message.has-voice-media .telegram-voice-card,
body.role-worker .telegram-message.has-voice-media .telegram-voice-card {
  width: min(236px, 68vw) !important;
  height: 42px !important;
  grid-template-columns: 34px minmax(0, 1fr) 48px !important;
  grid-template-rows: 25px 15px !important;
  column-gap: 9px !important;
  row-gap: 0 !important;
}

.telegram-message.has-voice-media .voice-play-button,
body.role-worker .telegram-message.has-voice-media .voice-play-button {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  background: rgba(255, 255, 255, .95) !important;
  color: #7b61d9 !important;
}

.telegram-message.has-voice-media .voice-waveform,
body.role-worker .telegram-message.has-voice-media .voice-waveform {
  grid-column: 2 / span 2 !important;
  grid-row: 1 !important;
  height: 23px !important;
}

.telegram-message.has-voice-media .voice-duration,
body.role-worker .telegram-message.has-voice-media .voice-duration {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: end !important;
  min-width: 0 !important;
  color: rgba(255, 255, 255, .92) !important;
  text-align: left !important;
}

.telegram-message.has-voice-media .voice-waveform span,
body.role-worker .telegram-message.has-voice-media .voice-waveform span {
  background: rgba(255, 255, 255, .74) !important;
}

.telegram-message.has-voice-media .voice-waveform::after,
body.role-worker .telegram-message.has-voice-media .voice-waveform::after {
  background: rgba(255, 255, 255, .96) !important;
}

.telegram-message.has-video-note-media .message-bubble > .telegram-video-note,
body.role-worker .telegram-message.has-video-note-media .message-bubble > .telegram-video-note {
  width: min(245px, 58vw) !important;
  max-width: min(245px, 58vw) !important;
  height: min(245px, 58vw) !important;
  max-height: min(245px, 58vw) !important;
  aspect-ratio: 1 / 1 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #101820 !important;
  box-shadow: none !important;
}

.telegram-message.has-video-note-media .telegram-video-note video,
body.role-worker .telegram-message.has-video-note-media .telegram-video-note video {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.telegram-video-note-indicator {
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 18px !important;
  border-radius: 999px !important;
  padding: 2px 6px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, .48) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.video-note-sound {
  width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4Zm12.5 3a4 4 0 0 0-1.7-3.3v6.6A4 4 0 0 0 16.5 12Zm0-7.4v2.1A7 7 0 0 1 19 12a7 7 0 0 1-2.5 5.3v2.1A9 9 0 0 0 21 12a9 9 0 0 0-4.5-7.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4Zm12.5 3a4 4 0 0 0-1.7-3.3v6.6A4 4 0 0 0 16.5 12Zm0-7.4v2.1A7 7 0 0 1 19 12a7 7 0 0 1-2.5 5.3v2.1A9 9 0 0 0 21 12a9 9 0 0 0-4.5-7.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.telegram-video-note.is-muted .video-note-sound {
  opacity: .58 !important;
}

/* 2026-05-28 frontend contract fixes: overview/channels scroll and selection delete panel. */
html:has(body.role-admin.tab-overview),
html:has(body.role-admin.tab-channels),
html:has(body.role-admin.tab-inbox) {
  height: 100% !important;
  overflow: hidden !important;
}

body.role-admin.tab-overview,
body.role-admin.tab-channels,
body.role-admin.tab-inbox {
  min-height: 100% !important;
  overflow: hidden !important;
}

body.role-admin.tab-overview .main,
body.role-admin.tab-channels .main,
body.role-admin.tab-inbox .main {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.role-admin.tab-overview #appShell,
body.role-admin.tab-overview .shell,
body.role-admin.tab-channels #appShell,
body.role-admin.tab-channels .shell,
body.role-admin.tab-inbox #appShell,
body.role-admin.tab-inbox .shell {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.role-admin.tab-overview .content,
body.role-admin.tab-overview #overviewCommandCenter,
body.role-admin.tab-overview .overview-dashboard-layout,
body.role-admin.tab-overview .overview-dashboard-main,
body.role-admin.tab-overview .overview-bottom-grid,
body.role-admin.tab-overview .overview-accounts-panel,
body.role-admin.tab-overview .overview-risk-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.role-admin.tab-overview #overviewAccountsGrid,
body.role-admin.tab-overview #overviewRiskCenter {
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

body.role-admin.tab-channels .content,
body.role-admin.tab-channels .channels-dashboard,
body.role-admin.tab-channels .channels-left-panel,
body.role-admin.tab-channels .channels-right-panel,
body.role-admin.tab-channels #channelCommentsMount,
body.role-admin.tab-channels #channelTasksMount,
body.role-admin.tab-channels .channel-tasks-workspace,
body.role-admin.tab-channels .channel-tasks-panel,
body.role-admin.tab-channels .channel-comments-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.role-admin.tab-channels .channels-right-panel {
  grid-template-rows: minmax(0, 1fr) !important;
}

body.role-admin.tab-channels #channelSettingsMount {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body.role-admin.tab-channels .channel-comments-editor-wrap {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Dialog account unread badge: backend private_unread_count/private_unread_badge only. */
.telegram-account {
  grid-template-columns: 44px minmax(0, 1fr) 24px 24px 10px !important;
}

.telegram-shell.is-account-list-mode .telegram-account,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.is-account-list-mode .telegram-account {
  grid-template-columns: 48px minmax(0, 1fr) 24px 24px 10px !important;
}

.account-unread-slot {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: center;
}

.account-unread-slot.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.account-private-unread-badge {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #3390ec;
  box-shadow: 0 0 0 1px rgba(51, 144, 236, .28);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
}

.account-switcher-row .account-unread-slot {
  justify-self: end;
}

.account-switcher-menu .account-switcher-row,
.account-switcher-menu .account-switcher-row.has-select {
  align-items: center !important;
  column-gap: 8px !important;
  text-align: left !important;
}

.account-switcher-menu .account-switcher-row {
  grid-template-columns: 38px minmax(0, 1fr) 24px !important;
}

.account-switcher-menu .account-switcher-row.has-select {
  grid-template-columns: 26px 38px minmax(0, 1fr) 24px !important;
}

.account-switcher-menu .account-switcher-row.has-select .account-switcher-check {
  grid-column: 1 !important;
  justify-self: center !important;
}

.account-switcher-menu .account-switcher-row .account-switcher-avatar.avatar {
  grid-column: 1 !important;
  justify-self: center !important;
}

.account-switcher-menu .account-switcher-row.has-select .account-switcher-avatar.avatar {
  grid-column: 2 !important;
}

.account-switcher-menu .account-switcher-row > .account-switcher-row-copy {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 1px !important;
  align-content: center !important;
  justify-items: start !important;
  justify-self: stretch !important;
  width: 100% !important;
  text-align: left !important;
}

.account-switcher-menu .account-switcher-row.has-select > .account-switcher-row-copy {
  grid-column: 3 !important;
  justify-self: stretch !important;
  width: 100% !important;
}

.account-switcher-menu .account-switcher-row > .account-switcher-row-copy strong,
.account-switcher-menu .account-switcher-row > .account-switcher-row-copy small {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

.account-switcher-menu .account-switcher-row .account-unread-slot {
  grid-column: 3 !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
  min-width: 24px !important;
}

.account-switcher-menu .account-switcher-row .account-private-unread-badge {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 24px !important;
  max-width: 34px !important;
  height: 24px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 24px !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

.account-switcher-menu .account-switcher-row.has-select .account-unread-slot {
  grid-column: 4 !important;
}

.account-switcher-pin-slot {
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  pointer-events: none !important;
  opacity: .42;
  color: #7f91a3;
}

.account-switcher-pin-slot.is-pinned {
  opacity: 1;
  color: #6ab3ff;
}

.account-switcher-menu .account-switcher-row .account-switcher-pin-slot {
  grid-column: 4 !important;
}

.account-switcher-menu .account-switcher-row.has-select .account-switcher-pin-slot {
  grid-column: 5 !important;
}

@media (max-width: 900px) {
  body.role-admin.tab-channels .channels-dashboard {
    grid-template-rows: minmax(0, 68%) minmax(0, 32%) !important;
  }

  body.role-admin.tab-channels .channels-left-panel {
    grid-template-rows: auto minmax(64px, 30%) minmax(80px, 1fr) !important;
  }
}

.message-selection-bar.is-delete-expanded .selection-delete-panel,
body.role-admin .message-selection-bar.is-delete-expanded .selection-delete-panel,
body.role-worker .message-selection-bar.is-delete-expanded .selection-delete-panel {
  display: grid !important;
  height: auto !important;
  min-height: 0 !important;
  visibility: visible !important;
}

.message-selection-bar:not(.is-delete-expanded) .selection-delete-panel {
  display: none !important;
}

/* 2026-05-28 dialog restore: keep media fixes, but return worker/admin private chats to normal Telegram geometry. */
.telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-author-avatar,
body.role-worker .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-author-avatar,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-author-avatar {
  display: none !important;
}

.telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming,
body.role-worker .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming {
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
  justify-content: stretch !important;
  justify-items: start !important;
}

.telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing,
body.role-worker .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: end !important;
}

.telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message,
body.role-worker .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  align-self: stretch !important;
}

.telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack,
.telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing .message-stack,
body.role-worker .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack,
body.role-worker .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing .message-stack,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing .message-stack {
  width: fit-content !important;
  max-width: min(486px, 78%) !important;
  min-width: 0 !important;
}

.telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble,
body.role-worker .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-text,
body.role-worker .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-text,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-text {
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 7px 12px 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--tgw-border) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel) !important;
  box-shadow: none !important;
  grid-template-columns: 34px minmax(0, 1fr) 36px 42px !important;
  gap: 5px !important;
  align-items: end !important;
}

body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea {
  min-height: 36px !important;
  max-height: 118px !important;
  padding: 8px 10px !important;
}

body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #emojiButton,
body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #attachButton,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #emojiButton,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #attachButton {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--tgw-muted) !important;
  box-shadow: none !important;
}

body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-send,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-send {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 0 !important;
  background: transparent !important;
  color: #5aa9ff !important;
  box-shadow: none !important;
}

body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-send.is-send-ready,
body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-send.is-sending,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-send.is-send-ready,
body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-send.is-sending {
  border: 0 !important;
  background: rgba(51, 144, 236, .10) !important;
  color: var(--tgw-blue) !important;
}

body.role-admin.tab-inbox .notification-permission-prompt,
body.role-worker .notification-permission-prompt {
  display: none !important;
}

@media (max-width: 1040px) {
  body.role-admin.tab-inbox #appShell,
  body.role-admin.tab-inbox .shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body.role-admin.tab-inbox .main,
  body.role-admin.tab-inbox .content,
  body.role-admin.tab-inbox .telegram-inbox-stack,
  body.role-admin.tab-inbox .telegram-inbox-stack.is-worker-dialog-layout,
  body.role-admin.tab-inbox .telegram-shell,
  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout,
  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.theme-dark,
  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout.theme-light {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  body.role-admin.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat {
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* Worker composer restore must win over older capsule composer passes. */
body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
  width: 100% !important;
  max-width: none !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 7px 12px 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--tgw-border, #0b141d) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel, #17212b) !important;
  box-shadow: none !important;
  grid-template-columns: 34px minmax(0, 1fr) 36px 42px !important;
  gap: 5px !important;
  align-items: end !important;
}

body.role-worker #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea {
  min-height: 36px !important;
  max-height: 118px !important;
  padding: 8px 10px !important;
}

/* Final private-dialog composer reset: keep worker/admin on the same grid. */
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
  box-sizing: border-box !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 52px !important;
  margin: 0 !important;
  margin-block: 0 !important;
  margin-inline: 0 !important;
  padding: 7px 12px 8px !important;
  padding-block: 7px 8px !important;
  padding-inline: 12px !important;
  border: 0 !important;
  border-top: 1px solid var(--tgw-border, #0b141d) !important;
  border-radius: 0 !important;
  background: var(--tgw-panel, #17212b) !important;
  background-color: var(--tgw-panel, #17212b) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 36px 42px !important;
  gap: 5px !important;
  align-items: end !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  top: auto !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  justify-self: stretch !important;
}

/* 2026-05-28 Telegram reference pass: scoped private dialog lane + composer. */
html body.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open {
  --tg-private-lane: 70%;
  --tg-private-bubble-max: min(520px, 78%);
  --tg-private-scrollbar-gutter: 10px;
  --tg-private-in: #25272e;
  --tg-private-out: #7665e8;
  --tg-private-out-2: #5e77e9;
  overflow: clip !important;
  overscroll-behavior: contain !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-chat,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-chat {
  background-color: #000 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-messages:not(.is-channel-view):not(.is-comments-view),
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-messages:not(.is-channel-view):not(.is-comments-view) {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  width: 100% !important;
  padding: 18px 0 12px !important;
  overflow-x: hidden !important;
  background-color: #000 !important;
  background-image: url("/assets/dialog-doodle-background-4k.jpg?v=20260528-private-dialog-v12") !important;
  background-repeat: repeat !important;
  background-size: 520px auto !important;
  background-position: center center !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .message-day,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .message-day {
  align-self: center !important;
  width: auto !important;
  max-width: min(92%, 260px) !important;
  margin: 9px auto 8px !important;
  padding: 4px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(34, 39, 48, .78) !important;
  color: rgba(234, 240, 248, .78) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  text-align: center !important;
  backdrop-filter: blur(10px) !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages.is-channel-view > .message-day,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages.is-channel-view > .message-day {
  align-self: center !important;
  width: auto !important;
  max-width: min(92%, 260px) !important;
  margin: 9px auto 8px !important;
  padding: 4px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(34, 39, 48, .78) !important;
  color: rgba(234, 240, 248, .78) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  text-align: center !important;
  backdrop-filter: blur(10px) !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages.is-channel-view .message-author-avatar,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages.is-channel-view .message-author-avatar {
  display: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages.is-channel-view > .telegram-message.incoming,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages.is-channel-view > .telegram-message.incoming {
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: var(--tg-private-lane) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  column-gap: 0 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.has-direction-gap,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.has-direction-gap {
  margin-top: 8px !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.is-group-single,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.is-group-single {
  margin-top: 5px !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-author-avatar,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-author-avatar {
  display: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming {
  justify-items: start !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing {
  justify-items: end !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: var(--tg-private-bubble-max) !important;
  margin: 0 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-sticker-only .message-stack,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-sticker-only .message-stack,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-video-note .message-stack,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-video-note .message-stack {
  min-width: 0 !important;
  max-width: min(320px, 72vw) !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-photo-media .message-stack,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-photo-media .message-stack,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-media .message-stack,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-media .message-stack,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .message-stack,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .message-stack {
  min-width: min(220px, 100%) !important;
  max-width: min(420px, 100%) !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble {
  box-sizing: border-box !important;
  display: block !important;
  width: auto !important;
  min-width: min(48px, 42vw) !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 7px 9px 5px !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .14) !important;
  color: #f2f5fa !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming .message-bubble {
  background: var(--tg-private-in) !important;
  border-bottom-left-radius: 5px !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing .message-bubble {
  background: linear-gradient(135deg, var(--tg-private-out), var(--tg-private-out-2)) !important;
  border-bottom-right-radius: 5px !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-sticker-only .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-sticker-only .message-bubble,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-video-note .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-video-note .message-bubble {
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-photo-media .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-photo-media .message-bubble,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-media .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-media .message-bubble,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .message-bubble {
  min-width: min(220px, 100%) !important;
  max-width: 100% !important;
  padding: 4px !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble > .media-card,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble > .media-card,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble > .telegram-photo-card,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble > .telegram-photo-card,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble > .telegram-video-card,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble > .telegram-video-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-text,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-text,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-caption,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-caption {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .bubble-reply.message-reply-preview,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .bubble-reply.message-reply-preview {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 5px !important;
  padding: 5px 7px 5px 8px !important;
  border: 0 !important;
  border-left: 3px solid #8ed1ff !important;
  border-radius: 7px !important;
  background: rgba(0, 0, 0, .18) !important;
  overflow: hidden !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .bubble-reply.message-reply-preview strong,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .bubble-reply.message-reply-preview strong {
  color: #9ed8ff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .bubble-reply.message-reply-preview span,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .bubble-reply.message-reply-preview span {
  color: rgba(238, 244, 251, .78) !important;
  font-size: 11.5px !important;
  line-height: 14px !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-footer,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-footer {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 13px !important;
  margin: 2px 0 0 8px !important;
  padding: 0 !important;
  color: rgba(235, 242, 250, .62) !important;
  font-size: 11px !important;
  line-height: 12px !important;
  white-space: nowrap !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming .message-ticks,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming .message-ticks,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming .message-status-spinner,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming .message-status-spinner,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming .message-status-failed,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.incoming .message-status-failed {
  display: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing .message-ticks,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing .message-ticks {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 13px !important;
  color: rgba(190, 228, 255, .86) !important;
  letter-spacing: 0 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
  box-sizing: border-box !important;
  inline-size: var(--tg-private-lane) !important;
  width: var(--tg-private-lane) !important;
  max-width: var(--tg-private-lane) !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 auto 10px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 5px 7px !important;
  border: 0 !important;
  border-radius: 19px !important;
  background: #202329 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(16px) !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px 36px !important;
  gap: 4px !important;
  align-items: end !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #emojiButton,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #emojiButton,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #attachButton,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #attachButton,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8d99a7 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  justify-self: center !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send.is-send-ready,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send.is-send-ready,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send.is-sending,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send.is-sending {
  background: transparent !important;
  color: #66adff !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--composer-textarea-height, 36px) !important;
  min-height: 36px !important;
  max-height: var(--composer-textarea-max-height, min(33vh, 240px)) !important;
  margin: 0 !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f2f5f8 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  overflow-x: hidden !important;
  overflow-y: var(--composer-textarea-overflow-y, hidden) !important;
  resize: none !important;
  align-self: end !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea::placeholder,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea::placeholder {
  color: #8c97a4 !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  html body.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open {
    --tg-private-lane: min(100%, calc(100vw - 18px));
    --tg-private-bubble-max: min(86%, 520px);
    --tg-private-scrollbar-gutter: 0px;
  }

  html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-messages:not(.is-channel-view):not(.is-comments-view),
  html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-messages:not(.is-channel-view):not(.is-comments-view) {
    padding: 14px 9px 10px !important;
  }

  html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
  html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
    inline-size: min(var(--tg-private-lane), calc(100% - 18px)) !important;
    width: min(var(--tg-private-lane), calc(100% - 18px)) !important;
    max-width: calc(100% - 18px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 8px !important;
  }
}

/* Inline channel comments composer: same Telegram capsule, with selected account avatar on the left. */
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer {
  box-sizing: border-box !important;
  position: relative !important;
  inline-size: min(var(--tg-private-lane), calc(100% - 36px - var(--tg-private-scrollbar-gutter))) !important;
  width: min(var(--tg-private-lane), calc(100% - 36px - var(--tg-private-scrollbar-gutter))) !important;
  max-width: calc(100% - 36px - var(--tg-private-scrollbar-gutter)) !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 auto 10px !important;
  margin-left: max(18px, calc((100% - var(--tg-private-lane) - var(--tg-private-scrollbar-gutter)) / 2)) !important;
  margin-right: auto !important;
  padding: 5px 7px !important;
  border: 0 !important;
  border-radius: 19px !important;
  background: #202329 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(16px) !important;
  display: grid !important;
  grid-template-columns: 32px 34px minmax(0, 1fr) 34px 36px !important;
  gap: 4px !important;
  align-items: end !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar {
  grid-column: 1 !important;
  box-sizing: border-box !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  align-self: center !important;
  justify-self: center !important;
  box-shadow: none !important;
  font-size: 10px !important;
  line-height: 30px !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar::before,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar::after,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar::before,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar::after {
  display: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar .avatar-image,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar .avatar-initials,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar .avatar-image,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-composer-avatar .avatar-initials {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-emoji,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-emoji,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-attach,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-attach,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-send],
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-send] {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8d99a7 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-emoji,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-emoji {
  grid-column: 2 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-attach,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-attach {
  grid-column: 4 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-send],
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-send] {
  grid-column: 5 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  justify-self: center !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-send].is-send-ready,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-send].is-send-ready,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-send].is-sending,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-send].is-sending {
  background: transparent !important;
  color: #66adff !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-input],
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-input] {
  grid-column: 3 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--composer-textarea-height, 36px) !important;
  min-height: 36px !important;
  max-height: var(--composer-textarea-max-height, min(33vh, 240px)) !important;
  margin: 0 !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f2f5f8 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  overflow-x: hidden !important;
  overflow-y: var(--composer-textarea-overflow-y, hidden) !important;
  resize: none !important;
  align-self: end !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-input]::placeholder,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-input]::placeholder {
  color: #8c97a4 !important;
  opacity: 1 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-reply-label,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer .comments-reply-label {
  position: absolute !important;
  left: 80px !important;
  right: 80px !important;
  top: -25px !important;
  width: auto !important;
  max-width: calc(100% - 160px) !important;
  padding: 3px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(32, 35, 41, .92) !important;
  color: rgba(238, 244, 251, .8) !important;
  font-size: 11.5px !important;
  line-height: 15px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .20) !important;
}

@media (max-width: 760px) {
  html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer,
  html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer {
    inline-size: min(var(--tg-private-lane), calc(100% - 18px)) !important;
    width: min(var(--tg-private-lane), calc(100% - 18px)) !important;
    max-width: calc(100% - 18px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 8px !important;
    grid-template-columns: 30px 32px minmax(0, 1fr) 32px 36px !important;
  }
}

/* Final controlled autogrow layer for worker/admin private and inline comments composers. */
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-selection-mode):not(.is-action-mode) .telegram-textarea {
  box-sizing: border-box !important;
  height: var(--composer-textarea-height, 36px) !important;
  min-height: 36px !important;
  max-height: var(--composer-textarea-max-height, min(33vh, 240px)) !important;
  padding: 8px 4px !important;
  line-height: 20px !important;
  overflow-x: hidden !important;
  overflow-y: var(--composer-textarea-overflow-y, hidden) !important;
  resize: none !important;
  align-self: end !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(128, 145, 162, .58) transparent !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-selection-mode):not(.is-action-mode) .telegram-textarea::-webkit-scrollbar {
  width: 4px !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-selection-mode):not(.is-action-mode) .telegram-textarea::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(128, 145, 162, .48) !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-selection-mode):not(.is-action-mode) .telegram-icon-button,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-selection-mode):not(.is-action-mode) #emojiButton,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-selection-mode):not(.is-action-mode) #attachButton {
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  align-self: end !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-selection-mode):not(.is-action-mode) > .telegram-send,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer.is-comments-composer [data-comments-send] {
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  align-self: end !important;
}

/* Empty dialog state: no selected chat means only Telegram wallpaper, no disabled composer chrome. */
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat.is-empty-dialog {
  background-color: #030304 !important;
  background-image:
    linear-gradient(rgba(1, 2, 5, .12), rgba(1, 2, 5, .12)),
    url("/assets/dialog-doodle-background-4k.jpg?v=20260520-dialogs-doodle-v2") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat.is-empty-dialog .reply-preview,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat.is-empty-dialog .composer-notice,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat.is-empty-dialog #replyForm.telegram-composer,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-chat.is-empty-dialog #replyForm.telegram-composer.is-empty-hidden {
  display: none !important;
}

/* Accounts tab: compact Telegram dark profile/settings surface. */
#safetyNotice {
  display: none !important;
}

body.tab-accounts {
  --acc-bg: #0e1621;
  --acc-panel: #17212b;
  --acc-panel-soft: #1b2733;
  --acc-hover: #202b36;
  --acc-input: #242f3d;
  --acc-line: #0f1a24;
  --acc-line-soft: rgba(127, 145, 163, .22);
  --acc-text: #e7eef5;
  --acc-muted: #7f91a3;
  --acc-blue: #3390ec;
  --acc-blue-soft: rgba(51, 144, 236, .14);
  background: var(--acc-bg) !important;
  color: var(--acc-text) !important;
}

body.tab-accounts .main {
  background: var(--acc-bg) !important;
}

body.tab-accounts .topbar {
  display: none !important;
}

body.tab-accounts .content {
  padding-top: 0 !important;
}

body.tab-accounts .account-settings-layout {
  min-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--acc-line);
  border-radius: 8px;
  background: var(--acc-line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

body.tab-accounts .panel {
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--acc-panel) !important;
  color: var(--acc-text) !important;
  box-shadow: none !important;
}

body.tab-accounts .account-list-panel {
  min-height: 0;
}

body.tab-accounts .panel-header {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--acc-line) !important;
  padding: 0 16px !important;
  background: var(--acc-panel) !important;
}

body.tab-accounts .panel-header h2 {
  margin: 0;
  color: var(--acc-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

body.tab-accounts .dialog-meta,
body.tab-accounts .profile-avatar-status {
  color: var(--acc-muted) !important;
  font-size: 12px;
  line-height: 1.35;
}

body.tab-accounts .account-list {
  max-height: calc(100vh - 112px);
  display: grid;
  gap: 2px;
  overflow: auto;
  padding: 8px;
}

body.tab-accounts .account-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--acc-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

body.tab-accounts .account-row:hover,
body.tab-accounts .account-row:focus-visible {
  background: var(--acc-hover);
  outline: none;
}

body.tab-accounts .account-row.is-active {
  background: #2b5278;
  color: #ffffff;
}

body.tab-accounts .account-row .dialog-avatar,
body.tab-accounts .account-row .dialog-avatar.avatar {
  width: 42px;
  height: 42px;
  font-size: 13px;
}

body.tab-accounts .account-phone,
body.tab-accounts .account-state {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.tab-accounts .account-phone {
  color: inherit;
  font-size: 14px;
  font-weight: 760;
}

body.tab-accounts .account-state {
  margin-top: 3px;
  color: var(--acc-muted);
  font-size: 12px;
  font-weight: 650;
}

body.tab-accounts .account-row.is-active .account-state {
  color: rgba(255, 255, 255, .76);
}

body.tab-accounts .account-profile {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
}

body.tab-accounts .profile-avatar-card {
  display: grid;
  justify-items: center;
  gap: 10px;
}

body.tab-accounts .profile-avatar {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(51, 144, 236, .18);
  border-radius: 50%;
  background: linear-gradient(135deg, #55b3ff, #2f6ea5);
  color: #ffffff;
  font-size: 30px;
  font-weight: 850;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .26);
}

body.tab-accounts .profile-avatar-inner,
body.tab-accounts .profile-avatar-inner.avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  font-size: inherit;
}

body.tab-accounts .profile-avatar-button,
body.tab-accounts .secondary-button,
body.tab-accounts .primary-button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 0 13px;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

body.tab-accounts .profile-avatar-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--acc-blue-soft);
  color: #8ac0f6;
}

body.tab-accounts .profile-avatar-button-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
}

body.tab-accounts .profile-avatar-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.tab-accounts .secondary-button {
  background: var(--acc-input);
  color: var(--acc-text);
}

body.tab-accounts .primary-button {
  background: var(--acc-blue);
  box-shadow: 0 10px 24px rgba(51, 144, 236, .22);
}

body.tab-accounts .profile-avatar-button:hover,
body.tab-accounts .profile-avatar-button:focus-visible,
body.tab-accounts .secondary-button:hover,
body.tab-accounts .secondary-button:focus-visible {
  background: rgba(51, 144, 236, .20);
  color: #ffffff;
  outline: none;
}

body.tab-accounts .primary-button:hover,
body.tab-accounts .primary-button:focus-visible {
  background: #2f9af4;
  outline: none;
}

body.tab-accounts .profile-avatar-button:active,
body.tab-accounts .secondary-button:active,
body.tab-accounts .primary-button:active {
  transform: translateY(1px);
}

body.tab-accounts .profile-avatar-button:disabled,
body.tab-accounts .secondary-button:disabled,
body.tab-accounts .primary-button:disabled {
  cursor: default;
  opacity: .58;
  transform: none;
}

body.tab-accounts .profile-avatar-status {
  min-height: 17px;
  max-width: 140px;
  text-align: center;
}

body.tab-accounts .profile-avatar-status.is-pending {
  color: #8ac0f6 !important;
}

body.tab-accounts .profile-avatar-status.is-ok {
  color: #7bd88f !important;
}

body.tab-accounts .profile-avatar-status.is-error {
  color: #ff8797 !important;
}

body.tab-accounts .profile-form {
  display: grid;
  gap: 11px;
}

body.tab-accounts .profile-form label {
  display: grid;
  gap: 6px;
  color: var(--acc-muted);
  font-size: 12px;
  font-weight: 760;
}

body.tab-accounts .input,
body.tab-accounts .textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--acc-line-soft);
  border-radius: 8px;
  background: var(--acc-input);
  color: var(--acc-text);
  outline: none;
  font: inherit;
  font-size: 14px;
}

body.tab-accounts .username-input-wrap {
  position: relative;
  min-width: 0;
  display: block;
}

body.tab-accounts .username-prefix {
  position: absolute;
  left: 11px;
  top: 50%;
  z-index: 1;
  color: var(--acc-muted);
  font-size: 14px;
  font-weight: 800;
  transform: translateY(-50%);
  pointer-events: none;
}

body.tab-accounts .username-input-wrap .input {
  padding-left: 28px;
}

body.tab-accounts .profile-field-status {
  min-height: 15px;
  color: var(--acc-muted);
  font-size: 11px;
  line-height: 1.35;
}

body.tab-accounts .profile-field-status.is-error {
  color: #ff8797;
}

body.tab-accounts .profile-field-status.is-ok {
  color: #7bd88f;
}

body.tab-accounts .input {
  height: 36px;
  padding: 0 11px;
}

body.tab-accounts .textarea {
  min-height: 92px;
  padding: 10px 11px;
  line-height: 1.4;
  resize: vertical;
}

body.tab-accounts .input:focus,
body.tab-accounts .textarea:focus {
  border-color: rgba(51, 144, 236, .72);
  box-shadow: 0 0 0 3px rgba(51, 144, 236, .13);
}

body.tab-accounts .input:disabled {
  color: rgba(231, 238, 245, .62);
  background: rgba(36, 47, 61, .64);
  cursor: default;
}

body.tab-accounts .profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

@media (max-width: 980px) {
  body.tab-accounts .account-settings-layout {
    grid-template-columns: 1fr;
  }

  body.tab-accounts .account-list {
    max-height: 260px;
  }

  body.tab-accounts .account-profile {
    grid-template-columns: 1fr;
  }

  body.tab-accounts .profile-avatar-card {
    justify-items: start;
  }
}

@media (max-width: 560px) {
  body.tab-accounts .account-settings-layout {
    min-height: auto;
    border-radius: 0;
  }

  body.tab-accounts .account-profile {
    padding: 14px;
  }

  body.tab-accounts .profile-actions {
    justify-content: stretch;
  }

  body.tab-accounts .primary-button {
    width: 100%;
  }
}

.telegram-messages:not(.is-selecting-messages) .message-select-circle,
.telegram-messages:not(.is-selecting-messages) .telegram-message:hover .message-select-circle,
.telegram-messages:not(.is-selecting-messages) .message-select-circle:focus-visible,
.telegram-messages:not(.is-selecting-messages) .telegram-message.is-message-selected .message-select-circle {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(0, -50%) scale(.92) !important;
}

.telegram-messages.is-selecting-messages .message-select-circle,
.telegram-messages.is-selecting-messages .telegram-message:hover .message-select-circle,
.telegram-messages.is-selecting-messages .message-select-circle:focus-visible,
.telegram-messages.is-selecting-messages .telegram-message.is-message-selected .message-select-circle {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(0, -50%) scale(1) !important;
}

.telegram-messages.is-selecting-messages {
  position: relative !important;
  z-index: 80 !important;
  isolation: isolate;
}

.telegram-shell:has(.telegram-messages.is-selecting-messages) .telegram-chat {
  position: relative !important;
  z-index: 90 !important;
}

.telegram-messages.is-selecting-messages .telegram-message,
.telegram-messages.is-selecting-messages .message-stack {
  position: relative !important;
  z-index: 1 !important;
}

.telegram-messages.is-selecting-messages .message-select-circle {
  z-index: 120 !important;
}

.telegram-messages {
  overflow-anchor: none;
}

/* Dialog media cleanup: keep GIFs/video-notes sized to their own media, without generic bubble chrome. */
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media.is-media-only .message-stack,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media.is-media-only .message-stack {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(340px, 72vw) !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media.is-media-only .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media.is-media-only .message-bubble {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(340px, 72vw) !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .message-bubble > .telegram-gif-card,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .message-bubble > .telegram-gif-card {
  width: min(var(--media-width, 340px), 72vw) !important;
  max-width: min(var(--media-width, 340px), 72vw) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .telegram-gif-image,
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .telegram-gif-video,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .telegram-gif-image,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-gif-media .telegram-gif-video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: min(var(--media-height, 360px), 55vh) !important;
  aspect-ratio: var(--media-ratio, auto) !important;
  object-fit: contain !important;
  border-radius: 13px !important;
  background: transparent !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-note-media.is-media-only .message-stack,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-note-media.is-media-only .message-stack {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(245px, 58vw) !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-note-media.is-media-only .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-note-media.is-media-only .message-bubble {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(245px, 58vw) !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-note-media .telegram-video-note,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-note-media .telegram-video-note {
  width: min(245px, 58vw) !important;
  height: min(245px, 58vw) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-note-media .telegram-video-note video,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-video-note-media .telegram-video-note video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: transparent !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-voice-media .telegram-voice-card,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-voice-media .telegram-voice-card {
  display: grid !important;
  align-items: center !important;
  width: min(255px, 72vw) !important;
  min-width: min(220px, 72vw) !important;
  height: 46px !important;
  grid-template-columns: 34px minmax(0, 1fr) 48px !important;
  grid-template-rows: 27px 15px !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-voice-media .voice-duration,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.has-voice-media .voice-duration {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 34px !important;
}

/* Keep late live reactions from changing message height and moving the scroll. */
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack > .message-reactions,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack > .message-reactions {
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  bottom: -9px !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing .message-stack > .message-reactions,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.outgoing .message-stack > .message-reactions {
  left: auto !important;
  right: 8px !important;
  justify-content: flex-end !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack > .message-reactions.is-empty,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack > .message-reactions.is-empty {
  display: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack:has(> .message-reactions:not(.is-empty)) .message-bubble,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack:has(> .message-reactions:not(.is-empty)) .message-bubble {
  padding-bottom: 5px !important;
}

/* Reserve sticker/video-backed sticker size before media metadata arrives. */
html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-sticker-only .telegram-sticker-card,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-sticker-only .telegram-sticker-card {
  width: min(220px, 54vw) !important;
  height: min(220px, 54vw) !important;
  max-width: min(220px, 54vw) !important;
  max-height: min(220px, 54vw) !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-sticker-only .telegram-sticker-media,
html body.role-admin.auth-enabled.tab-inbox .telegram-messages:not(.is-channel-view):not(.is-comments-view) .telegram-message.is-sticker-only .telegram-sticker-media {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Keep the dialog workspace in its desktop shape after a chat opens. */
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode {
  display: grid !important;
  grid-template-columns: minmax(230px, 275px) minmax(300px, 360px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode .telegram-accounts {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode .telegram-left {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode .telegram-chat {
  display: flex !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

@media (min-width: 901px) {
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode {
    display: grid !important;
    grid-template-columns: 284px 374px minmax(0, 1fr) !important;
    grid-template-rows: 54px minmax(0, 1fr) !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode .telegram-accounts {
    display: contents !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode .telegram-accountbar {
    display: grid !important;
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    grid-template-columns: 284px minmax(0, 1fr) !important;
    height: 54px !important;
    min-height: 54px !important;
    min-width: 0 !important;
    border-right: 1px solid var(--tgw-border, #0b141d) !important;
    border-bottom: 1px solid var(--tgw-border, #0b141d) !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode #accountListMeta {
    display: none !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode #inboxAccountList {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-right: 1px solid var(--tgw-border, #0b141d) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode .telegram-left {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-right: 1px solid var(--tgw-border, #0b141d) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode #legacyAccountMeta {
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode #dialogList {
    display: block !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-account-list-mode .telegram-chat {
    display: flex !important;
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode {
  display: grid !important;
  grid-template-columns: clamp(380px, 31vw, 440px) minmax(0, 1fr) !important;
  grid-template-rows: 64px minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode .telegram-accounts {
  display: contents !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode .telegram-accountbar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 230px) minmax(0, 1fr) !important;
  height: 64px !important;
  min-height: 64px !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
  border-bottom: 1px solid #0f1a24 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #accountListMeta,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #inboxAccountList,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode .telegram-left > .telegram-search {
  display: none !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode .telegram-left {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-right: 1px solid #0f1a24 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #legacyAccountMeta {
  grid-row: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #0f1a24 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #dialogList {
  display: block !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode .telegram-chat {
  display: flex !important;
  grid-column: 2 / -1 !important;
  grid-row: 1 / span 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode {
  display: grid !important;
  grid-template-columns: clamp(360px, 32vw, 440px) minmax(0, 1fr) !important;
  grid-template-rows: 64px minmax(0, 1fr) !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode .telegram-accounts {
  display: contents !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode .telegram-accountbar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(200px, 220px) minmax(0, 1fr) !important;
  height: 64px !important;
  min-height: 64px !important;
  min-width: 0 !important;
  border-right: 1px solid #0f1a24 !important;
  border-bottom: 1px solid #0f1a24 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode #accountListMeta {
  display: none !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode #inboxAccountList {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-right: 1px solid #0f1a24 !important;
  box-sizing: border-box !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode .telegram-left {
  display: none !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode .telegram-chat {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode {
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important;
  grid-template-rows: 54px minmax(0, 1fr) !important;
}

html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode .telegram-accountbar {
  grid-template-columns: minmax(176px, 220px) minmax(0, 1fr) !important;
  height: 54px !important;
  min-height: 54px !important;
  border-right: 0 !important;
  box-shadow: inset -1px 0 #0f1a24 !important;
}

html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode .telegram-left {
  grid-template-rows: 40px minmax(0, 1fr) !important;
}

html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode {
  grid-template-columns: 430px minmax(0, 1fr) !important;
  grid-template-rows: 54px minmax(0, 1fr) !important;
}

html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode .telegram-accountbar {
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) !important;
  height: 54px !important;
  min-height: 54px !important;
  border-right: 0 !important;
  box-shadow: inset -1px 0 #0f1a24 !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message {
  align-self: center !important;
  width: var(--tg-private-lane) !important;
  max-width: var(--tg-private-lane) !important;
}

@media (min-width: 761px) {
  html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
  html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
    inline-size: calc(var(--tg-private-lane) - 7px) !important;
    width: calc(var(--tg-private-lane) - 7px) !important;
    max-width: calc(var(--tg-private-lane) - 7px) !important;
    margin-left: calc((100% - var(--tg-private-lane)) / 2 - 1.5px) !important;
    margin-right: auto !important;
  }
}

html body.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-accountbar .telegram-account-search {
  border-bottom: 0 !important;
}

html body.tab-inbox .telegram-shell.is-worker-dialog-layout .telegram-accountbar {
  padding-top: 4px !important;
  padding-bottom: 12px !important;
}

html body.tab-inbox .telegram-shell.is-worker-dialog-layout #messageList.telegram-messages {
  scroll-behavior: auto !important;
  overflow-anchor: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-chat:has(#messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view)),
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-chat:has(#messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view)) {
  background-color: #000 !important;
  background-image:
    linear-gradient(rgba(1, 2, 5, .12), rgba(1, 2, 5, .12)),
    url("/assets/dialog-doodle-background-4k.jpg?v=20260520-dialogs-doodle-v2") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-chat:has(#messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view))::before,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-chat:has(#messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view))::after,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-chat:has(#messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view))::before,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open .telegram-chat:has(#messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view))::after,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view)::before,
html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view)::after,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view)::before,
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view)::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
}

html body.role-worker.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view),
html body.role-admin.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode {
  --tg-private-lane: 70%;
  --tg-private-bubble-max: min(520px, 78%);
  --tg-private-scrollbar-gutter: 10px;
  --tg-private-in: #25272e;
  --tg-private-out: #7665e8;
  --tg-private-out-2: #5e77e9;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode .telegram-chat {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  overflow: hidden !important;
  background-color: #000 !important;
  background-image:
    linear-gradient(rgba(1, 2, 5, .12), rgba(1, 2, 5, .12)),
    url("/assets/dialog-doodle-background-4k.jpg?v=20260520-dialogs-doodle-v2") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) {
  box-sizing: border-box !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 18px 0 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-self: center !important;
  width: var(--tg-private-lane) !important;
  max-width: var(--tg-private-lane) !important;
  min-width: 0 !important;
  padding: 0 !important;
  column-gap: 0 !important;
  opacity: 1 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.has-direction-gap {
  margin-top: 8px !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.is-group-single {
  margin-top: 5px !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming {
  justify-items: start !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing {
  justify-items: end !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-stack {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(486px, 78%) !important;
  margin: 0 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) .message-bubble {
  box-sizing: border-box !important;
  display: block !important;
  width: auto !important;
  min-width: min(48px, 42vw) !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 7px 9px 5px !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .14) !important;
  color: #f2f5fa !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming:not(.is-sticker-only):not(.is-video-note):not(.has-photo-media):not(.has-video-media):not(.has-gif-media) .message-bubble {
  background: var(--tg-private-in) !important;
  border-bottom-left-radius: 5px !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing:not(.is-sticker-only):not(.is-video-note):not(.has-photo-media):not(.has-video-media):not(.has-gif-media) .message-bubble {
  background: linear-gradient(135deg, var(--tg-private-out), var(--tg-private-out-2)) !important;
  border-bottom-right-radius: 5px !important;
}

@media (max-width: 760px) {
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode {
    --tg-private-lane: min(100%, calc(100vw - 18px));
    --tg-private-bubble-max: min(86%, 520px);
    --tg-private-scrollbar-gutter: 0px;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) {
    padding: 14px 9px 10px !important;
  }
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode {
  --tg-private-lane: 70%;
  --tg-private-bubble-max: min(520px, 78%);
  --tg-private-scrollbar-gutter: 10px;
  --tg-private-in: #25272e;
  --tg-private-out: #7665e8;
  --tg-private-out-2: #5e77e9;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode .telegram-chat:not(.is-empty-dialog) {
  background-color: #000 !important;
  background-image:
    linear-gradient(rgba(1, 2, 5, .12), rgba(1, 2, 5, .12)),
    url("/assets/dialog-doodle-background-4k.jpg?v=20260520-dialogs-doodle-v2") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message {
  opacity: 1 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message .message-bubble {
  opacity: 1 !important;
  color: #f2f5fa !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .14) !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming .message-bubble {
  background: var(--tg-private-in) !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing .message-bubble {
  background: linear-gradient(135deg, var(--tg-private-out), var(--tg-private-out-2)) !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
  box-sizing: border-box !important;
  inline-size: var(--tg-private-lane) !important;
  width: var(--tg-private-lane) !important;
  max-width: var(--tg-private-lane) !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 auto 10px !important;
  padding: 5px 7px !important;
  border: 0 !important;
  border-radius: 19px !important;
  background: #202329 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(16px) !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px 36px !important;
  gap: 4px !important;
  align-items: end !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) .telegram-textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--composer-textarea-height, 36px) !important;
  min-height: 36px !important;
  max-height: var(--composer-textarea-max-height, min(33vh, 240px)) !important;
  margin: 0 !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f2f5f8 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  overflow-x: hidden !important;
  overflow-y: var(--composer-textarea-overflow-y, hidden) !important;
  resize: none !important;
  align-self: end !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #emojiButton,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #attachButton,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8d99a7 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #emojiButton,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) #attachButton {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) > .telegram-send {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

html body.tab-inbox .message-reaction,
html body.tab-inbox .message-reaction.motion-reaction-pop,
html body.tab-inbox .message-reaction.motion-reaction-error,
html body.tab-inbox .message-reaction .reaction-emoji,
html body.tab-inbox .message-reaction .reaction-count,
html body.tab-inbox .reaction-pending-dot {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

@media (min-width: 761px) {
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
    inline-size: calc(var(--tg-private-lane) - 7px) !important;
    width: calc(var(--tg-private-lane) - 7px) !important;
    max-width: calc(var(--tg-private-lane) - 7px) !important;
    margin-left: calc((100% - var(--tg-private-lane)) / 2 - 1.5px) !important;
    margin-right: auto !important;
  }
}

@media (max-width: 760px) {
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode {
    --tg-private-lane: min(100%, calc(100vw - 18px));
    --tg-private-bubble-max: min(86%, 520px);
    --tg-private-scrollbar-gutter: 0px;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
    inline-size: min(var(--tg-private-lane), calc(100% - 18px)) !important;
    width: min(var(--tg-private-lane), calc(100% - 18px)) !important;
    max-width: calc(100% - 18px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 8px !important;
  }
}

/* Single-account dialog message layout: keep every message in normal flow and aligned to the composer lane. */
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) {
  align-items: center !important;
  gap: 0 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: flex-end !important;
  width: var(--tg-private-lane) !important;
  max-width: min(var(--tg-private-lane), 100%) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.has-direction-gap {
  margin-top: 8px !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.is-group-single {
  margin-top: 5px !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming {
  justify-content: flex-start !important;
  padding-right: clamp(34px, 10%, 76px) !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing {
  justify-content: flex-end !important;
  padding-left: clamp(34px, 10%, 76px) !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message .message-stack {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: var(--tg-private-bubble-max) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming .message-stack {
  align-items: flex-start !important;
  margin-right: auto !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing .message-stack {
  align-items: flex-end !important;
  margin-left: auto !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message .message-bubble {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  display: block !important;
  width: fit-content !important;
  min-width: min(48px, 42vw) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message .message-text,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message .message-caption {
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 18px !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message .message-bubble > .message-reactions,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message .message-stack > .message-reactions {
  position: static !important;
  inset: auto !important;
  clear: both !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 1 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming .message-bubble > .message-reactions,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming .message-stack > .message-reactions {
  align-self: flex-start !important;
  justify-content: flex-start !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing .message-bubble > .message-reactions,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing .message-stack > .message-reactions {
  align-self: flex-end !important;
  justify-content: flex-end !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message .message-bubble > .message-reactions.is-empty,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message .message-stack > .message-reactions.is-empty {
  display: none !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.has-photo-media .message-stack,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.has-video-media .message-stack,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.has-gif-media .message-stack {
  max-width: min(420px, 100%) !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.is-sticker-only .message-stack,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.is-video-note .message-stack {
  max-width: min(320px, 100%) !important;
}

@media (max-width: 760px) {
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message {
    width: min(var(--tg-private-lane), calc(100% - 18px)) !important;
    max-width: min(var(--tg-private-lane), calc(100% - 18px)) !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.incoming {
    padding-right: clamp(20px, 8%, 44px) !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message.outgoing {
    padding-left: clamp(20px, 8%, 44px) !important;
  }
}

/* Dialog edge alignment: composer edges match incoming/outgoing message edges. */
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message {
  width: var(--tg-private-lane) !important;
  max-width: min(var(--tg-private-lane), 100%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
  inline-size: var(--tg-private-lane) !important;
  width: var(--tg-private-lane) !important;
  max-width: min(var(--tg-private-lane), 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message,
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
    inline-size: calc(100% - 18px) !important;
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
  }
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view),
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message,
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message {
  width: var(--tg-private-lane) !important;
  max-width: min(var(--tg-private-lane), 100%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
  inline-size: calc(var(--tg-private-lane) - var(--tg-private-scrollbar-gutter, 0px)) !important;
  width: calc(var(--tg-private-lane) - var(--tg-private-scrollbar-gutter, 0px)) !important;
  max-width: min(calc(var(--tg-private-lane) - var(--tg-private-scrollbar-gutter, 0px)), 100%) !important;
  margin-left: calc((100% - var(--tg-private-lane)) / 2) !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message,
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode #messageList.telegram-messages:not(.is-channel-view):not(.is-comments-view) > .telegram-message {
    inline-size: calc(100% - 18px) !important;
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
  }

  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-single-account-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode),
  html body.auth-enabled.tab-inbox .telegram-shell.is-worker-dialog-layout.is-chat-open.is-all-dialogs-mode #replyForm.telegram-composer:not(.is-comments-composer):not(.is-selection-mode):not(.is-action-mode) {
    inline-size: calc(100% - 28px) !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin-left: 9px !important;
    margin-right: auto !important;
  }
}

@media (max-width: 700px) {
  html:has(body.role-admin.tab-channels) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.role-admin.tab-channels {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.role-admin.tab-channels #appShell,
  body.role-admin.tab-channels .shell,
  body.role-admin.tab-channels .main,
  body.role-admin.tab-channels .content {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.role-admin.tab-channels .main {
    padding: 8px !important;
  }

  body.role-admin.tab-channels .content {
    display: block !important;
  }

  body.role-admin.tab-channels .channels-dashboard {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 10px !important;
    overflow: visible !important;
    padding-bottom: 18px;
  }

  body.role-admin.tab-channels .channels-left-panel,
  body.role-admin.tab-channels .channels-right-panel,
  body.role-admin.tab-channels #channelCommentsMount,
  body.role-admin.tab-channels #channelTasksMount,
  body.role-admin.tab-channels .channel-comments-panel,
  body.role-admin.tab-channels .channel-tasks-workspace,
  body.role-admin.tab-channels .channel-tasks-panel {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.role-admin.tab-channels .channels-left-panel {
    grid-template-rows: auto auto auto !important;
  }

  body.role-admin.tab-channels .channel-settings-panel {
    padding: 9px 10px 10px;
  }

  body.role-admin.tab-channels .channel-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.role-admin.tab-channels .channel-setting-row {
    grid-template-columns: minmax(0, 1fr) 56px;
    padding: 7px 8px;
  }

  body.role-admin.tab-channels .channel-comments-panel {
    grid-template-rows: auto auto auto auto auto !important;
    padding-top: 8px;
  }

  body.role-admin.tab-channels .channel-comments-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    padding: 0 10px 10px;
  }

  body.role-admin.tab-channels .channel-comments-actions [data-channel-generation-picker],
  body.role-admin.tab-channels .channel-comments-actions [data-channel-shuffle-comments],
  body.role-admin.tab-channels .channel-comments-actions [data-channel-create-task],
  body.role-admin.tab-channels .channel-comments-actions [data-channel-create-discussion],
  body.role-admin.tab-channels .channel-comments-actions [data-channel-clear-comments] {
    grid-column: auto !important;
    width: 100%;
  }

  body.role-admin.tab-channels .channel-comments-actions [data-channel-clear-comments] {
    grid-column: 1 / -1 !important;
  }

  body.role-admin.tab-channels .channel-source-selected {
    margin: 0 10px 10px;
  }

  body.role-admin.tab-channels .channel-comments-editor-wrap {
    height: min(430px, 58dvh) !important;
    min-height: 372px !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.role-admin.tab-channels .channel-comment-row {
    grid-template-columns: 34px minmax(0, 1fr) 34px 38px;
    min-height: 36px;
  }

  body.role-admin.tab-channels .channel-comment-number {
    font-size: 12px;
  }

  body.role-admin.tab-channels .channel-comments-foot {
    min-height: 38px;
    padding: 0 10px 8px;
  }

  body.role-admin.tab-channels .channel-toolbar-mount {
    position: static !important;
    max-width: none !important;
    justify-items: stretch !important;
    margin-bottom: 10px;
    pointer-events: auto !important;
  }

  body.role-admin.tab-channels .channel-toolbar {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.role-admin.tab-channels .channel-toolbar [data-add-test-channel] {
    grid-column: 1 / -1 !important;
  }

  body.role-admin.tab-channels .channel-toolbar-notices {
    justify-items: stretch;
    margin-top: 8px;
  }

  body.role-admin.tab-channels .channel-toolbar-notice {
    max-width: none;
  }

  body.role-admin.tab-channels .channel-tasks-workspace {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.role-admin.tab-channels .channel-tasks-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, auto) !important;
  }

  body.role-admin.tab-channels .channel-tasks-list {
    max-height: min(430px, 58dvh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.role-admin.tab-channels .channel-completed-tasks-list {
    max-height: min(360px, 50dvh) !important;
  }

  body.role-admin.tab-channels .channel-task-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.role-admin.tab-channels .channel-task-card-actions .channel-action-button {
    width: 100%;
    min-width: 0;
  }

  body.role-admin.tab-channels .channel-task-card-actions [data-channel-task-cancel] {
    grid-column: 1 / -1;
  }

  body.role-admin.tab-channels .channel-modal-overlay {
    align-items: start;
    overflow-y: auto;
    padding: 10px;
  }

  body.role-admin.tab-channels .channel-modal {
    width: min(100%, calc(100vw - 20px));
    max-height: none;
  }

  body.role-admin.tab-channels .channel-source-list,
  body.role-admin.tab-channels .channel-delete-list,
  body.role-admin.tab-channels .channel-task-list,
  body.role-admin.tab-channels .channel-task-confirmed-list {
    max-height: min(430px, 58dvh);
  }
}

.telegram-send.is-editing,
body.role-worker .telegram-send.is-editing {
  color: #3390ec !important;
  border-color: rgba(51, 144, 236, .42) !important;
  background: rgba(51, 144, 236, .10) !important;
}

.telegram-send.is-editing::before,
body.role-worker .telegram-send.is-editing::before {
  width: 22px;
  height: 22px;
  transform: scale(1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.2 16.6 4.9 12.3 3.5 13.7l5.7 5.7L20.8 7.8 19.4 6.4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.2 16.6 4.9 12.3 3.5 13.7l5.7 5.7L20.8 7.8 19.4 6.4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}