.messenger-embed-page,
.messenger-embed-page.page-shell {
  padding: 0;
}

.chat-composer-actions .chat-send-error {
  display: block !important;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  max-width: min(460px, calc(100vw - 36px));
  padding: 13px 16px;
  border: 1px solid rgba(252, 165, 165, .7);
  border-radius: 14px;
  background: #701a1a;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .48);
  color: #fff1f2;
  font-weight: 600;
  animation: chat-send-error-in .18s ease-out;
}

@keyframes chat-send-error-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* The group form adds a fifth grid child between the picker header and search. */
.messenger-picker-modal:has(.group-create-details) {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.messenger-picker-list,
.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 166, 207, .72) transparent;
}

.messenger-picker-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  width: 9px;
}

.messenger-picker-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.messenger-picker-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(156, 196, 235, .84), rgba(81, 128, 174, .76));
  background-clip: padding-box;
}

.messenger-picker-list::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(190, 219, 247, .96), rgba(98, 151, 202, .92));
  background-clip: padding-box;
}

.message-upload-pending {
  opacity: .64;
  background: rgba(105, 127, 149, .16) !important;
  border-color: rgba(165, 185, 204, .2) !important;
  animation: message-upload-pulse 1.7s ease-in-out infinite;
}

.message-upload-pending .attachment-image {
  filter: grayscale(.32) saturate(.68);
}

.message-upload-pending-status,
.message-upload-pending-file {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(214, 226, 237, .84);
  font-size: .8rem;
}

.message-upload-pending-file {
  padding: 4px 0;
}

.message-upload-pending-file span:nth-child(2) {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-upload-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid rgba(210, 229, 245, .26);
  border-top-color: #a7d8ff;
  border-radius: 999px;
  animation: message-upload-spin .8s linear infinite;
}

/* During photo upload, keep one compact progress indicator in the message meta. */
.message-upload-pending .message-upload-pending-status {
  display: none !important;
}

.message-upload-pending .message-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.message-upload-pending .message-meta > span::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 1.5px solid rgba(210, 229, 245, .26);
  border-top-color: #a7d8ff;
  border-radius: 999px;
  animation: message-upload-spin .8s linear infinite;
}

@keyframes message-upload-pulse {
  50% { opacity: .84; }
}

@keyframes message-upload-spin {
  to { transform: rotate(360deg); }
}

.messenger-embed-page .section,
.messenger-shell.section {
  margin-top: 0;
}

.messenger-embed-page .messenger-wide,
.messenger-embed-page .messenger-root {
  gap: 0;
}

.messenger-root {
  --ms-list-gap: 0px;
  --ms-item-gap: 8px;
  --ms-item-px: 8px;
  --ms-item-py: 7px;
  --ms-list-radius: 0px;
}

.room-list {
  gap: 0 !important;
}

.messenger-search-shell {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.messenger-search-field {
  min-height: var(--ms-control-size) !important;
  height: var(--ms-control-size) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.messenger-search-input {
  height: 100% !important;
  line-height: 1.2 !important;
}

.chat-composer {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.chat-composer-bar {
  min-height: var(--ms-control-size) !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.chat-text-shell {
  min-height: var(--ms-control-size) !important;
}

.chat-inline-textarea {
  min-height: var(--ms-control-size) !important;
  height: var(--ms-control-size) !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  line-height: 1.2 !important;
}

.messenger-room-item {
  min-height: 52px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.messenger-room-item + .messenger-room-item {
  margin-top: 0;
}

.messenger-room-copy {
  gap: 2px;
}

.messenger-room-row-meta {
  display: none !important;
}

.messenger-room-preview {
  color: var(--muted);
  opacity: 1;
}

.messenger-room-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.messenger-room-avatar.gm-shared-profile-avatar {
  flex: 0 0 48px !important;
  align-self: center;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50% !important;
}

.message-bubble.gm-call-history-message {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.message-bubble.gm-call-history-message .message-meta,
.message-bubble.gm-call-history-message .message-meta-direct {
  display: none !important;
}

.gm-call-history-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 170px;
  padding: 11px 13px;
  border: 1px solid rgba(150, 183, 216, .2);
  border-radius: 14px;
  background: rgba(21, 39, 57, .76);
  color: #edf6ff;
}

.gm-call-history-icon {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(90, 171, 235, .17);
  color: #8fd0ff;
  font-size: 1.2rem;
  line-height: 1;
  transform: rotate(-12deg);
}

.gm-call-history-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.gm-call-history-copy strong { font-size: .9rem; }
.gm-call-history-copy > span { color: var(--muted); font-size: .78rem; }
.gm-call-history-cancelled .gm-call-history-icon { color: #ffd077; background: rgba(235, 174, 52, .16); }
.gm-call-history-missed .gm-call-history-icon { color: #ff9e9e; background: rgba(235, 92, 92, .15); }

/* Call history must not inherit the asymmetric chat-bubble geometry. */
.chat-messages .message-bubble.gm-call-history-message,
.chat-messages .message-bubble.gm-call-history-message.own,
.chat-messages .message-bubble.gm-call-history-message.direct-message {
  align-self: flex-start !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  min-height: 0 !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chat-messages .message-bubble.gm-call-history-message.own {
  align-self: flex-end !important;
  margin-left: auto !important;
}

.chat-messages .message-bubble.gm-call-history-message .message-body {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.chat-messages .gm-call-history-card {
  box-sizing: border-box;
  width: min(264px, 100%);
  min-width: 0;
  padding: 12px 14px;
  overflow: visible;
  border: 1px solid rgba(150, 183, 216, .24);
  border-radius: 16px;
  background: #142b40;
}

.chat-messages .gm-call-history-icon {
  transform: none;
}

.chat-messages .gm-call-history-icon img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: invert(78%) sepia(43%) saturate(668%) hue-rotate(168deg) brightness(102%) contrast(102%);
}

.chat-messages .gm-call-history-cancelled .gm-call-history-icon img {
  filter: invert(83%) sepia(62%) saturate(529%) hue-rotate(331deg) brightness(101%) contrast(102%);
}

.chat-messages .gm-call-history-missed .gm-call-history-icon img {
  filter: invert(65%) sepia(32%) saturate(954%) hue-rotate(309deg) brightness(104%) contrast(101%);
}

.messenger-profile-card .messenger-room-avatar {
  position: relative;
  flex: 0 0 48px !important;
  align-self: center;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50% !important;
  cursor: pointer;
}

.messenger-profile-card .messenger-room-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: rgba(5, 12, 22, .42);
  transition: opacity .16s ease;
}

.messenger-profile-card .messenger-room-avatar:hover::after,
.messenger-profile-card .messenger-room-avatar:focus-visible::after {
  opacity: 1;
}

.gm-profile-avatar-layer {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 12, .62);
  backdrop-filter: blur(8px);
}

.gm-profile-avatar-dialog {
  width: min(390px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(173, 188, 205, .16);
  border-radius: 18px;
  background: #0a121dfa;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.gm-profile-avatar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gm-profile-avatar-head strong { margin: 0; }

.gm-profile-avatar-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(173, 188, 205, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.gm-profile-avatar-preview {
  width: 112px;
  height: 112px;
  margin: 2px auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg, #5da1d9e0, #655ed9e0);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}

.gm-profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gm-profile-avatar-hint {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.35;
  text-align: center;
}

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

.gm-profile-avatar-select { cursor: pointer; }
.gm-profile-avatar-select.is-loading { opacity: .58; pointer-events: none; }

.chat-thread-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding-top: 8px;
  padding-bottom: 8px;
}

.chat-thread-head .chat-call-strip {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.chat-thread-head .call-stack {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.chat-thread-head .call-actions {
  position: static !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
}


.chat-composer-bar .request-picker-toggle.active {
  background: rgba(87, 177, 248, .16) !important;
}

.chat-composer-bar .request-picker-toggle img {
  width: 19px !important;
  height: 19px !important;
}

/* Меню заявок рендерится напрямую внутри .chat-composer, не .chat-composer-bar */
.chat-composer .request-picker-panel {
  position: absolute !important;
  left: calc((var(--ms-control-size) * 2) + (var(--ms-composer-pad-x) * 2) + 6px) !important;
  bottom: calc(100% + 8px) !important;
  z-index: 58 !important;
  order: initial !important;
  width: min(80%, calc(100% - ((var(--ms-control-size) * 2) + (var(--ms-composer-pad-x) * 2) + 6px))) !important;
  max-width: none !important;
  height: min(460px, calc(100dvh - 190px)) !important;
  max-height: calc(100dvh - 190px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, .42) !important;
  transform-origin: bottom left !important;
  animation: gm-request-picker-in .18s cubic-bezier(.22, 1, .36, 1) !important;
}

@keyframes gm-request-picker-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-composer .request-picker-head {
  padding: 12px 14px 8px !important;
  border-bottom: 1px solid rgba(173, 188, 205, .1) !important;
}

.chat-composer .request-picker-list {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 2px 10px 10px !important;
}

.chat-composer .request-picker-item {
  width: 100% !important;
  max-width: none !important;
  justify-content: space-between !important;
  border-radius: 12px !important;
  transition: background-color .15s ease, transform .15s ease !important;
}

.chat-composer .request-picker-item:hover {
  background: rgba(87, 177, 248, .12) !important;
  transform: translateY(-1px) !important;
}

.chat-thread-head:not(:has(.chat-thread-participants)) {
  height: 71px !important;
  min-height: 71px !important;
  max-height: 71px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.chat-thread-head:not(:has(.chat-thread-participants)) .chat-thread-title,
.chat-thread-head:not(:has(.chat-thread-participants)) .chat-thread-copy {
  min-height: 0 !important;
}

.chat-thread-head:not(:has(.chat-thread-participants)) .chat-thread-copy {
  align-content: center;
  row-gap: 1px;
}

.chat-thread-head:not(:has(.chat-thread-participants)) .chat-thread-name,
.chat-thread-head:not(:has(.chat-thread-participants)) .chat-thread-subtitle {
  line-height: 1.15;
}

.chat-thread-copy {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  row-gap: 1px;
  min-width: 0;
}

.chat-thread-name    { grid-row: 1; }
.gm-thread-summary   { grid-row: 2; margin: 0; }
.chat-thread-subtitle { grid-row: 2; margin: 0; }
.chat-thread-participants { grid-row: 3; color: var(--muted); font-size: .72rem; line-height: 1.2; }

/* В группах subtitle (статус/онлайн) заменяем описанием */
.chat-thread-head:has(.chat-thread-participants) .chat-thread-subtitle {
  display: none !important;
}

/* Хедер группы — та же высота что у личных (71px) */
.chat-thread-head:has(.chat-thread-participants) {
  height: 71px !important;
  min-height: 71px !important;
  max-height: 71px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.chat-thread-head:has(.chat-thread-participants) .chat-thread-copy {
  align-content: center;
  row-gap: 1px;
}

.chat-thread-participants-button {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.message-bubble:not(.direct-message) {
  position: relative;
  padding-bottom: 24px;
}

.message-bubble:not(.direct-message) .message-meta {
  display: block;
  min-height: 16px;
}

.message-bubble:not(.direct-message) .message-meta > strong {
  display: block;
  padding-right: 44px;
}

.message-bubble:not(.direct-message) .message-meta > span {
  position: absolute;
  right: 10px;
  bottom: 7px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1;
}

.message-bubble:has(.voice-message-card) > .message-meta,
.message-bubble:has(.voice-message-card) > .message-meta-direct {
  display: none !important;
}

.message-bubble:has(.voice-message-card) {
  padding-bottom: 0 !important;
}

.message-bubble:has(.voice-message-card) .message-meta,
.message-bubble:has(.voice-message-card) .message-meta-direct {
  display: none !important;
}

/* voice-meta-single-source */
.message-bubble:has(.voice-message-card) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.message-bubble:has(.voice-message-card) > .message-meta,
.message-bubble:has(.voice-message-card) > .message-meta-direct,
.message-bubble:has(.voice-message-card) > .message-meta > *,
.message-bubble:has(.voice-message-card) > .message-meta-direct > * {
  display: none !important;
}

.message-bubble:has(.voice-message-card) .voice-message-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.gm-group-edit-layer {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 12, .62);
  backdrop-filter: blur(8px);
}

.gm-group-edit-dialog {
  width: min(430px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(173, 188, 205, .16);
  border-radius: 18px;
  background: #0a121dfa;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.gm-group-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gm-group-edit-head strong {
  margin: 0;
}

.gm-group-edit-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(173, 188, 205, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  cursor: pointer;
}

.gm-group-edit-avatar {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.gm-group-edit-preview {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #5da1d9e0, #655ed9e0);
  color: #fff;
  font-weight: 700;
}

.gm-group-edit-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gm-group-edit-form {
  display: grid;
  gap: 12px;
}

.gm-group-edit-form label {
  display: grid;
  gap: 6px;
  color: var(--accent-strong);
  font-size: .84rem;
}

.gm-group-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* scroll-fix-20260708
   chat-messages уже flex-column с overflow-y:auto — высота задана.
   Проблема: дочерние article без flex-shrink:0 сжимаются вместо
   того чтобы переполнять контейнер и давать скролл. */
.chat-center {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.chat-center > section {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Ключевой фикс: сообщения не должны сжиматься */
.chat-messages > article,
.chat-messages > .message-item,
.chat-messages > div {
  flex-shrink: 0 !important;
}

/* Граница пузырей через inset box-shadow — border+border-radius теряет пиксели на углах */
.message-bubble:not(:has(.voice-message-card)) {
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

.gm-thread-summary {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .8;
}

/* Красивый скроллбар */
.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 99px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.3);
}

/* fixes-20260705 ------------------------------------------------ */

/* 1. Скругление пузырей сообщений
   Базовый CSS: border-radius: calc(var(--ms-list-radius) - 2px)
   polish зануляет --ms-list-radius → 0px → прямые углы.
   Задаём адресно, не трогая переменную (список комнат должен быть встык). */
.message-bubble:not(:has(.voice-message-card)) {
  border-radius: 18px !important;
}

/* «Хвостик» мессенджера */
.message-bubble.own:not(:has(.voice-message-card)) {
  border-bottom-right-radius: 5px !important;
}

.message-bubble:not(.own):not(:has(.voice-message-card)) {
  border-bottom-left-radius: 5px !important;
}

/* 2. Поле ввода: composer-bar тоже получал radius=0 */
.chat-composer-bar {
  border-radius: 22px !important;
}

/* Окно записи ГС: базовый CSS .chat-composer-bar.composer-recorder (2 класса)
   перебивает наше правило выше по специфичности и даёт border-radius:0 — квадрат */
.chat-composer-bar.composer-recorder {
  border-radius: 22px !important;
  padding: 6px 8px !important;
}

.voice-recorder-strip {
  border-radius: 16px !important;
  padding: 8px 10px !important;
}

.voice-stop-button {
  border-radius: 999px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
}

.voice-stop-button span {
  border-radius: 4px !important;
}

/* Final composer polish: a compact request menu and a square voice-recording surface. */
.chat-composer .request-picker-panel {
  border: 1px solid rgba(119, 184, 235, .24) !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, rgba(20, 42, 63, .98), rgba(9, 20, 32, .99)) !important;
  box-shadow: 0 -14px 38px rgba(1, 8, 15, .44), inset 0 1px 0 rgba(214, 240, 255, .05) !important;
  animation: gm-request-picker-open .2s cubic-bezier(.2, .9, .25, 1) both !important;
}

@keyframes gm-request-picker-open {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-composer .request-picker-head {
  padding: 12px 14px 10px !important;
}

.chat-composer .request-picker-item {
  border-radius: 10px !important;
}

.chat-composer-bar.composer-recorder,
.chat-composer-bar.composer-recorder .voice-recorder-strip {
  border-radius: 6px !important;
}

/* 3. Видео в двух контейнерах: убрать двойную рамку обёртки */
.attachment-card:has(.attachment-video) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* 4. Одиночное фото — не сетка, полноразмерная картинка.
   ВАЖНО: .attachment-image никогда не siblings друг другу — каждая обёрнута
   в свой .attachment-card, поэтому проверяем сиблингов на уровне .attachment-card. */
.message-attachments:has(.attachment-card):not(:has(.attachment-card ~ .attachment-card)) {
  grid-template-columns: 1fr !important;
}

.message-attachments:has(.attachment-card):not(:has(.attachment-card ~ .attachment-card)) .attachment-image {
  height: auto !important;
  max-height: min(52vh, 420px) !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* 4b. Несколько фото в одном сообщении — коллаж-сетка вместо стопки друг за другом.
   Явная width обязательна: без неё grid-columns:1fr + aspect-ratio на детях
   образуют циклическую зависимость размеров и контейнер схлопывается почти до 0. */
.message-attachments:has(.attachment-card ~ .attachment-card) {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 4px !important;
  width: min(340px, 100%) !important;
}

/* 3 фото: первое крупное сверху на всю ширину, два снизу поровну (мозаика) */
.message-attachments:has(.attachment-card ~ .attachment-card):has(.attachment-card:nth-child(3):last-child) {
  grid-template-columns: repeat(2, 1fr) !important;
}

.message-attachments:has(.attachment-card ~ .attachment-card):has(.attachment-card:nth-child(3):last-child) .attachment-card:first-child {
  grid-column: 1 / -1 !important;
  aspect-ratio: 2 / 1 !important;
}

/* Карточки внутри коллажа: без внутренних отступов, фото заполняет ячейку */
.message-attachments:has(.attachment-card ~ .attachment-card) .attachment-card {
  padding: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

.message-attachments:has(.attachment-card ~ .attachment-card) .attachment-card:has(.attachment-image) {
  aspect-ratio: 1 / 1 !important;
}

.message-attachments:has(.attachment-card ~ .attachment-card) .attachment-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* 5. Заявка и длинные сообщения обрезались — поднять max-width */
.message-bubble.own {
  max-width: min(88%, 480px) !important;
}

.message-bubble:not(.own) {
  max-width: min(88%, 480px) !important;
}

/* Заявка-вложение не должна быть обрезана */
.attachment-card:has(.request-attachment-card) {
  min-width: 0 !important;
  max-width: 100% !important;
}

.request-attachment-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* fixes-20260705b ------------------------------------------------ */

/* 6. Меньше отступы между иконками в composer */
.chat-tool-button {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.chat-tools-left,
.chat-tools-right {
  gap: 0 !important;
}

/* 7. Время отправки обрезается — увеличить padding-bottom пузыря */
.message-bubble:not(.direct-message):not(:has(.voice-message-card)) {
  padding-bottom: 28px !important;
}

/* Время (span) опускаем чуть ниже, чтобы не залезало на текст */
.message-bubble:not(.direct-message) .message-meta > span {
  bottom: 6px !important;
}

/* Photo gallery layouts use the number of attachment cards in one message. */
.message-attachments:has(.attachment-card):not(:has(.attachment-card ~ .attachment-card)) {
  width: min(420px, 100%) !important;
  max-width: 100% !important;
}

.message-attachments:has(.attachment-card):not(:has(.attachment-card ~ .attachment-card)) .attachment-image {
  width: 100% !important;
  height: auto !important;
  max-height: min(52vh, 420px) !important;
  object-fit: contain !important;
}

.message-attachments:has(.attachment-card ~ .attachment-card) {
  width: min(420px, 100%) !important;
  max-width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

/* Two portrait photos, side by side. */
.message-attachments:has(.attachment-card:nth-child(2):last-child) .attachment-card:has(.attachment-image) {
  aspect-ratio: 3 / 4 !important;
}

/* Two squares above a landscape photo. */
.message-attachments:has(.attachment-card:nth-child(3):last-child) .attachment-card:has(.attachment-image) {
  aspect-ratio: 1 / 1 !important;
}

.message-attachments:has(.attachment-card:nth-child(3):last-child) .attachment-card:nth-child(3) {
  grid-column: 1 / -1 !important;
  aspect-ratio: 4 / 3 !important;
}

/* Four equal squares occupy the same gallery footprint as one photo. */
.message-attachments:has(.attachment-card:nth-child(4):last-child) .attachment-card:has(.attachment-image) {
  aspect-ratio: 1 / 1 !important;
}

/* Five or more photos become a compact horizontal thumbnail list. */
.message-attachments:has(.attachment-card:nth-child(5)) {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1px 1px 4px !important;
  scrollbar-width: none;
}

.message-attachments:has(.attachment-card:nth-child(5))::-webkit-scrollbar {
  display: none;
}

.message-attachments:has(.attachment-card:nth-child(5)) .attachment-card:has(.attachment-image) {
  flex: 0 0 58px !important;
  width: 58px !important;
  aspect-ratio: 1 / 1 !important;
}

@media (max-width: 760px) {
  .message-attachments:has(.attachment-card:nth-child(5)) {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, 56px) !important;
    grid-auto-columns: 56px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .message-attachments:has(.attachment-card:nth-child(5)) .attachment-card:has(.attachment-image) {
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
  }
}

/* Mobile room list must own vertical scrolling; never pass a swipe to the page behind it. */
@media (max-width: 760px) {
  html:has(.messenger-embed-page),
  body:has(.messenger-embed-page),
  #root:has(.messenger-embed-page) {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .messenger-embed-page.page-shell,
  .messenger-embed-page .messenger-shell,
  .messenger-embed-page .messenger-wide,
  .messenger-embed-page .messenger-root {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* One screen at a time: selecting a room opens the chat; its back button returns to the list. */
  .messenger-embed-page .messenger-sidebar.mobile-pane-hidden {
    display: none !important;
  }

  .messenger-embed-page .chat-center {
    display: none !important;
  }

  .messenger-embed-page .chat-center.mobile-pane-open {
    display: grid !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .messenger-embed-page .messenger-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .messenger-embed-page .messenger-rooms {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

/* Full-width master order picker, anchored above the message composer. */
.chat-composer {
  position: relative !important;
  isolation: isolate;
  z-index: 2;
}

/* The picker is rendered inside the composer and must not be clipped by chat layout wrappers. */
.chat-center,
.chat-center > section {
  overflow: visible !important;
}

.chat-composer .request-picker-panel {
  z-index: 80 !important;
  right: 0 !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: min(80dvh, 760px) !important;
  max-height: calc(100dvh - 108px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  border: 1px solid rgba(111, 182, 236, .28) !important;
  border-radius: 16px !important;
  background: linear-gradient(155deg, rgba(20, 43, 65, .99), rgba(8, 19, 31, .99)) !important;
  box-shadow: 0 -22px 56px rgba(1, 8, 15, .45), inset 0 1px 0 rgba(232, 247, 255, .06) !important;
  transform-origin: bottom center !important;
  animation: gm-master-order-picker-in .18s cubic-bezier(.22, .9, .3, 1) both !important;
}

@keyframes gm-master-order-picker-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-composer .request-picker-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 15px 16px 13px !important;
  border-bottom: 1px solid rgba(173, 188, 205, .12) !important;
  background: linear-gradient(180deg, rgba(98, 166, 218, .12), transparent) !important;
}

.chat-composer .request-picker-head strong {
  color: #eef8ff !important;
  font-size: .98rem !important;
  letter-spacing: .01em !important;
}

.chat-composer .request-picker-close {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid rgba(173, 188, 205, .16) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #dbeeff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

.chat-composer .request-picker-list {
  gap: 9px !important;
  padding: 12px !important;
  overscroll-behavior: contain;
}

/* Match the message thread scrollbar while keeping the request list easy to grab. */
.chat-composer .request-picker-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(142, 208, 255, .68) transparent;
}

.chat-composer .request-picker-list::-webkit-scrollbar {
  width: 7px;
}

.chat-composer .request-picker-list::-webkit-scrollbar-track {
  margin: 8px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
}

.chat-composer .request-picker-list::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(158, 218, 255, .9), rgba(76, 148, 204, .78));
  background-clip: padding-box;
}

.chat-composer .request-picker-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d4efff, #70b8ed);
  background-clip: padding-box;
}

/* Group members: viewers can start a direct chat, while admins can change membership. */
.group-manager-modal.is-viewer .group-manager-contact:not(:disabled) {
  cursor: pointer;
}

.group-manager-modal.is-viewer .group-manager-contact:not(:disabled)::after,
.group-manager-modal.is-admin .group-manager-contact::after {
  justify-self: end;
  align-self: center;
  padding: 4px 8px;
  border: 1px solid rgba(142, 208, 255, .2);
  border-radius: 999px;
  color: #b8e3ff;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

.group-manager-modal.is-admin .group-manager-contact::after {
  display: none;
}

.group-manager-modal.is-viewer .group-manager-contact:not(:disabled)::after {
  display: none;
}

.group-manager-modal .group-manager-contact {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.group-manager-modal .gm-group-member-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.group-manager-modal .gm-group-message,
.group-manager-modal .gm-group-remove {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
}

.group-manager-modal .gm-group-remove {
  border: 1px solid rgba(248, 113, 113, .42);
  background: rgba(127, 29, 29, .32);
  color: #fecaca;
  color: #fecaca;
}

.group-manager-modal .gm-group-message img,
.group-manager-modal .gm-group-remove img {
  width: 16px;
  height: 16px;
  display: block;
}

.group-manager-modal .gm-group-remove img {
  filter: invert(48%) sepia(95%) saturate(4200%) hue-rotate(338deg) brightness(105%) contrast(105%);
}

.chat-composer .request-picker-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  min-height: 72px !important;
  padding: 13px 14px 13px 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(128, 178, 219, .16) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(31, 59, 83, .72), rgba(13, 30, 45, .88)) !important;
  color: #edf6ff !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: inset 3px 0 0 rgba(92, 174, 232, .48) !important;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

.chat-composer .request-picker-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(119, 190, 239, .42) !important;
  background: linear-gradient(135deg, rgba(40, 78, 108, .9), rgba(15, 39, 58, .95)) !important;
  box-shadow: inset 3px 0 0 #61b6ee, 0 10px 24px rgba(0, 7, 14, .2) !important;
}

.chat-composer .request-picker-item:active {
  transform: translateY(0) scale(.992) !important;
}

.chat-composer .request-picker-item:focus-visible {
  outline: 2px solid #8ed0ff !important;
  outline-offset: 2px !important;
}

.chat-composer .request-picker-idline {
  min-width: 0 !important;
  color: #f3f9ff !important;
  font-size: .91rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.chat-composer .request-picker-status {
  align-self: start !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(139, 205, 255, .22) !important;
  border-radius: 999px !important;
  background: rgba(83, 169, 226, .13) !important;
  color: #bce6ff !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.chat-composer .request-picker-empty {
  display: grid !important;
  place-items: center !important;
  min-height: 150px !important;
  padding: 20px !important;
  color: #9fb8cb !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .chat-composer .request-picker-panel {
    bottom: calc(100% + 8px) !important;
    height: min(76dvh, 680px) !important;
    max-height: calc(100dvh - 94px) !important;
    border-radius: 14px !important;
  }

  .chat-composer .request-picker-item {
    min-height: 68px !important;
    padding: 12px 13px 12px 15px !important;
  }
}

@media (min-width: 640px) {
  .sm\:px-3 {
    padding-left: 0rem !important;
    padding-right: .75rem !important;
  }
}

/* voice-message-card: без окантовки */
.voice-message-card {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Обводка и хвостик на shell — он видимый контейнер, overflow:visible */
.voice-message-shell {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
}

.message-bubble.own .voice-message-shell {
  border-bottom-right-radius: 5px !important;
}

.message-bubble:not(.own) .voice-message-shell {
  border-bottom-left-radius: 5px !important;
}

.message-bubble:has(.voice-message-card) {
  border-radius: 18px !important;
  outline: none !important;
}

.message-bubble.own:has(.voice-message-card) {
  border-bottom-right-radius: 5px !important;
}

.message-bubble:not(.own):has(.voice-message-card) {
  border-bottom-left-radius: 5px !important;
}

.message-bubble:has(.voice-message-card)::after {
  display: none !important;
}

/* Видео: скрыть подпись с именем и весом файла */
.attachment-card:has(.attachment-video) .attachment-copy {
  display: none !important;
}

/* ГС: bubble не должен обрезать скруглённые углы shell */
.message-bubble:has(.voice-message-card) {
  overflow: visible !important;
}

/* Видео: убрать внутренние отступы bubble вокруг видео */
.message-bubble:has(.attachment-video) {
  padding: 0 !important;
}

/* Видео: скруглить сам bubble как .attachment-card внутри */
.message-bubble.own:has(.attachment-video) {
  border-bottom-right-radius: 5px !important;
}
.message-bubble:not(.own):has(.attachment-video) {
  border-bottom-left-radius: 5px !important;
}

/* Order picker is a continuation of the composer rather than a separate dialog. */
.chat-composer .request-picker-panel {
  bottom: calc(100% - 1px) !important;
  border: 1px solid rgba(173, 188, 205, .12) !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: #111b27f0 !important;
  box-shadow: none !important;
}

.chat-composer:has(.request-picker-panel) .chat-composer-bar {
  position: relative !important;
  z-index: 1 !important;
  border-top: 1px solid rgba(173, 188, 205, .1) !important;
  border-radius: 0 0 18px 18px !important;
}

.chat-composer .request-picker-head {
  min-height: 46px !important;
  padding: 12px 16px !important;
  background: transparent !important;
}

.chat-composer .request-picker-list {
  gap: 8px !important;
  padding: 10px 12px 12px !important;
}

.chat-composer .request-picker-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(173, 188, 205, .1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: none !important;
}

.chat-composer .request-picker-item:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(111, 182, 236, .34) !important;
  background: rgba(87, 177, 248, .09) !important;
  box-shadow: none !important;
}

.gm-order-picker-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 2px;
  align-items: baseline;
  min-width: 0;
}

.chat-composer .gm-order-picker-id {
  grid-row: 1 / span 2;
  align-self: center !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(143, 196, 234, .22) !important;
  border-radius: 7px !important;
  background: rgba(84, 159, 212, .12) !important;
  color: #c5e8ff !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.gm-order-picker-client,
.gm-order-picker-address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-order-picker-client {
  color: #f0f7fd;
  font-size: .9rem;
  line-height: 1.2;
}

.gm-order-picker-address {
  color: #9fb4c6;
  font-size: .78rem;
  line-height: 1.25;
}

.gm-order-picker-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.chat-composer .request-picker-status,
.gm-order-picker-equipment {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.1;
}

.chat-composer .request-picker-status {
  border: 1px solid rgba(251, 191, 36, .25) !important;
  background: rgba(251, 191, 36, .11) !important;
  color: #f7d784 !important;
}

.chat-composer .request-picker-status[data-order-status="closed"] {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(148, 163, 184, .1) !important;
  color: #cbd5e1 !important;
}

.chat-composer .request-picker-status[data-order-status="on_way"] {
  border-color: rgba(96, 165, 250, .3) !important;
  background: rgba(96, 165, 250, .12) !important;
  color: #b9dbff !important;
}

.chat-composer .request-picker-status[data-order-status="needs_review"] {
  border-color: rgba(192, 132, 252, .3) !important;
  background: rgba(192, 132, 252, .12) !important;
  color: #e3c7ff !important;
}

.gm-order-picker-equipment {
  border: 1px solid rgba(173, 188, 205, .13);
  background: rgba(255, 255, 255, .045);
  color: #b9c8d5;
}

.gm-order-picker-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #aebdcb;
  font-size: .8rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 760px) {
  .chat-composer .request-picker-panel {
    border-radius: 14px 14px 0 0 !important;
  }

  .chat-composer:has(.request-picker-panel) .chat-composer-bar {
    border-radius: 0 0 14px 14px !important;
  }
}

/* Stable order-card sizing, search, and subdued completed orders. */
.chat-composer .request-picker-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 9px 12px !important;
}

.gm-order-picker-search {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid rgba(173, 188, 205, .14);
  border-radius: 10px;
  outline: none;
  background: rgba(5, 12, 20, .38);
  color: #edf6ff;
  font: inherit;
  font-size: .82rem;
}

.gm-order-picker-search::placeholder {
  color: #8297aa;
}

.gm-order-picker-search:focus {
  border-color: rgba(111, 182, 236, .52);
  box-shadow: 0 0 0 3px rgba(87, 177, 248, .1);
}

.chat-composer .request-picker-item {
  grid-template-rows: auto auto auto !important;
  min-height: 120px !important;
  height: auto !important;
  align-content: start !important;
}

.chat-composer .request-picker-item > * {
  position: static !important;
  min-width: 0 !important;
}

.chat-composer .request-picker-item[hidden] {
  display: none !important;
}

.chat-composer .gm-order-picker-title {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: 42px !important;
}

.chat-composer .gm-order-picker-id,
.chat-composer .gm-order-picker-client,
.chat-composer .gm-order-picker-address,
.chat-composer .gm-order-picker-meta,
.chat-composer .gm-order-picker-description {
  visibility: visible !important;
  opacity: 1 !important;
}

.chat-composer .request-picker-item[data-order-status="closed"],
.chat-composer .request-picker-item[data-order-status="ready"],
.chat-composer .request-picker-item[data-order-status="done"] {
  border-color: rgba(148, 163, 184, .08) !important;
  background: rgba(255, 255, 255, .018) !important;
  box-shadow: none !important;
  opacity: .66;
}

.chat-composer .request-picker-item[data-order-status="closed"]:hover,
.chat-composer .request-picker-item[data-order-status="ready"]:hover,
.chat-composer .request-picker-item[data-order-status="done"]:hover {
  border-color: rgba(148, 163, 184, .2) !important;
  background: rgba(148, 163, 184, .07) !important;
  opacity: .84;
}

@media (max-width: 760px) {
  .chat-composer .request-picker-item {
    min-height: 116px !important;
  }
}

/* Group details are collected before selecting participants. */
.messenger-picker-modal .group-create-details {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 4px 0 12px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, .18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(15, 23, 42, .08));
}

.messenger-picker-modal .group-create-avatar {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(147, 197, 253, .58);
  border-radius: 18px;
  color: #bfdbfe;
  background: rgba(30, 64, 175, .18);
  cursor: pointer;
}

.messenger-picker-modal .group-create-avatar:hover {
  border-style: solid;
  background: rgba(37, 99, 235, .28);
}

.messenger-picker-modal .group-create-avatar span {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.messenger-picker-modal .group-create-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.messenger-picker-modal .group-create-avatar input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.messenger-picker-modal .group-create-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.messenger-picker-modal .group-create-title,
.messenger-picker-modal .group-create-summary {
  width: 100%;
  box-sizing: border-box;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .44);
}

.messenger-picker-modal .group-create-title {
  min-height: 36px;
  font-weight: 650;
}

.messenger-picker-modal .group-create-summary {
  min-height: 50px;
  resize: vertical;
}

@media (max-width: 520px) {
  .messenger-picker-modal .group-create-details {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 10px;
  }

  .messenger-picker-modal .group-create-avatar {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
}

/* Mobile messenger: keep the app inside the viewport and make overlays usable by touch. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .messenger-embed-page.page-shell,
  .messenger-embed-page .messenger-shell {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
  }

  .messenger-embed-page .chat-center,
  .messenger-embed-page .chat-thread,
  .chat-thread-title,
  .chat-thread-copy,
  .chat-composer-bar,
  .chat-text-shell,
  .chat-inline-textarea {
    min-width: 0 !important;
    max-width: 100%;
  }

  .chat-thread-head {
    grid-template-columns: minmax(0, 1fr) 32px 32px 70px !important;
    min-height: 64px !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px var(--ms-panel-pad) !important;
  }

  .chat-thread-head .chat-thread-title {
    grid-column: 1;
    overflow: hidden;
  }

  .chat-thread-head .chat-thread-participants-button {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-thread-head .chat-thread-mute-button {
    grid-column: 2;
  }

  .chat-thread-head .chat-thread-menu-button {
    grid-column: 3;
  }

  .chat-thread-head .chat-call-strip {
    grid-column: 4;
  }

  .chat-thread-name,
  .chat-thread-subtitle,
  .chat-thread-participants,
  .gm-thread-summary {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .messenger-picker-layer,
  .gm-group-edit-layer,
  .gm-profile-avatar-layer {
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .messenger-picker-modal,
  .group-manager-modal,
  .gm-group-edit-dialog,
  .gm-profile-avatar-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .group-manager-list {
    max-height: none !important;
    min-height: 0;
    overscroll-behavior: contain;
  }

  .group-manager-modal .group-manager-contact {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 58px;
    padding: 9px 10px !important;
  }

  .group-manager-modal .gm-group-member-actions {
    gap: 5px;
  }

  .group-manager-modal .gm-group-message,
  .group-manager-modal .gm-group-remove {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
  }
}

@media (max-width: 360px) {
  .messenger-root {
    --ms-panel-pad: 8px;
  }

  .chat-thread-head {
    column-gap: 4px !important;
    grid-template-columns: minmax(0, 1fr) 30px 30px 66px !important;
  }

  .chat-thread-mute-button,
  .chat-thread-menu-button,
  .chat-call-strip,
  .chat-call-strip .call-stack,
  .chat-call-strip .call-actions,
  .chat-call-strip .call-launch-button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
  }

  .chat-call-strip,
  .chat-call-strip .call-stack,
  .chat-call-strip .call-actions {
    width: 66px !important;
    min-width: 66px !important;
  }
}

/* Mobile messenger is edge-to-edge; keep spacing only inside its UI controls. */
@media (max-width: 760px) {
  .messenger-embed-page.page-shell,
  .messenger-embed-page .messenger-shell.section,
  .messenger-embed-page .messenger-wide,
  .messenger-embed-page .messenger-root,
  .messenger-embed-page .messenger-sidebar,
  .messenger-embed-page .chat-center,
  .messenger-embed-page .chat-thread {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-radius: 0 !important;
  }
}

/* Remove the outer gutter around the mobile messenger panes. */
@media (max-width: 760px) {
  .messenger-embed-page .messenger-root,
  .messenger-embed-page .messenger-wide,
  .messenger-embed-page .messenger-shell.section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .messenger-embed-page .messenger-sidebar,
  .messenger-embed-page .chat-center {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .messenger-embed-page .messenger-sidebar > .room-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .messenger-embed-page .chat-center:not(.mobile-pane-open) {
    display: none !important;
  }
}

/* Keep the mobile profile/search fixed; only the actual room list may scroll. */
@media (max-width: 760px) {
  .messenger-embed-page .messenger-sidebar.messenger-rooms {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .messenger-embed-page .messenger-sidebar.messenger-rooms > .room-list {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .messenger-embed-page .messenger-sidebar.messenger-rooms > .messenger-profile-card,
  .messenger-embed-page .messenger-sidebar.messenger-rooms > .messenger-search-shell,
  .messenger-embed-page .messenger-sidebar.messenger-rooms > .gm-mobile-messenger-header {
    flex: 0 0 auto;
  }
}

/* Compact mobile header for the messenger section. */
.gm-mobile-messenger-header {
  display: none;
}

@media (max-width: 760px) {
  .gm-mobile-messenger-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(173, 188, 205, .12);
    background: #0a1420;
    color: #edf3fa;
  }

  .gm-mobile-messenger-header strong {
    font-size: 1rem;
    line-height: 1;
  }

  .gm-mobile-messenger-menu {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 8px;
    gap: 4px;
    border: 1px solid rgba(173, 188, 205, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
  }

  .gm-mobile-messenger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: #e8f2fc;
  }
}

/* The parent page hosts the messenger in an iframe. On mobile it must be truly edge-to-edge. */
@media (max-width: 760px) {
  html:has(.gm-messenger-page),
  body:has(.gm-messenger-page) {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .gm-messenger-page {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gm-messenger-frame,
  .gm-messenger-frame iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Shared mobile header for every guild section. */
@media (max-width: 767px) {
  .gm-mobile-guild-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(173, 188, 205, .14);
    background: rgba(8, 15, 24, .98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    color: #edf3fa;
  }

  .gm-mobile-guild-header strong {
    min-width: 0;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gm-mobile-guild-menu-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    padding: 0;
    border: 1px solid;
    border-radius: 10px;
    color: #edf3fa;
    cursor: pointer;
  }

  .gm-master-shell > div:last-child {
    padding-top: 56px !important;
  }

  .gm-master-shell .gm-messenger-page {
    top: 56px !important;
    height: calc(100dvh - 56px) !important;
  }

  /* Replaced by the shared header above. */
  .gm-mobile-messenger-header {
    display: none !important;
  }
}

/* Source picker beside the attachment button on phones. */
.gm-mobile-attachment-menu {
  display: none;
}

@media (max-width: 760px) {
  .gm-mobile-attachment-menu {
    position: fixed;
    z-index: 120;
    display: grid;
    min-width: 144px;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(111, 182, 236, .28);
    border-radius: 14px;
    background: rgba(10, 24, 38, .98);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .42);
  }

  .gm-mobile-attachment-menu button {
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #edf6ff;
    font: inherit;
    font-size: .9rem;
    text-align: left;
  }

  .gm-mobile-attachment-menu button:active {
    background: rgba(111, 182, 236, .18);
  }
}

/* Mobile panes: show one pane at a time; only the room list scrolls. */
@media (max-width: 760px) {
  .messenger-embed-page .messenger-root {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .messenger-embed-page .messenger-sidebar.messenger-rooms,
  .messenger-embed-page .chat-center.mobile-pane-open {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .messenger-embed-page .messenger-sidebar.messenger-rooms {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Must win over the generic room-pane flex rule above after a room is selected. */
  .messenger-embed-page .messenger-sidebar.messenger-rooms.mobile-pane-hidden {
    display: none !important;
  }

  .messenger-embed-page .messenger-sidebar.messenger-rooms > .room-list {
    display: block !important;
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .messenger-embed-page .messenger-sidebar.messenger-rooms > .room-list > * + * {
    margin-top: var(--ms-list-gap, 8px) !important;
  }
}

/* Reserve a photo footprint before remote images decode, so messages never jump. */
.message-attachments:has(.attachment-card):not(:has(.attachment-card ~ .attachment-card)) .attachment-card:has(.attachment-image) {
  width: min(420px, 100%) !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at center, rgba(120, 139, 157, .16), transparent 66%),
    linear-gradient(110deg, #111b26 20%, #202c38 46%, #111b26 70%) !important;
  background-size: 100% 100%, 220% 100% !important;
  animation: gm-image-placeholder-sheen 1.7s ease-in-out infinite !important;
}

.message-attachments:has(.attachment-card):not(:has(.attachment-card ~ .attachment-card)) .attachment-card:has(.attachment-image) .attachment-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}

.message-attachments:has(.attachment-card ~ .attachment-card) .attachment-card:has(.attachment-image) {
  background:
    radial-gradient(ellipse at center, rgba(120, 139, 157, .14), transparent 66%),
    linear-gradient(110deg, #111b26 20%, #202c38 46%, #111b26 70%) !important;
  background-size: 100% 100%, 220% 100% !important;
  animation: gm-image-placeholder-sheen 1.7s ease-in-out infinite !important;
}

@keyframes gm-image-placeholder-sheen {
  0%, 100% { background-position: center, 100% 0; }
  50% { background-position: center, 0 0; }
}

/* Full-screen image viewer for message attachments. */
.gm-message-image-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(2, 7, 13, .78);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  animation: gm-image-lightbox-in .16s ease-out both;
}

.gm-message-image-lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(96vw, 1500px);
  max-height: 88dvh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .62);
}

.gm-message-image-lightbox-tools {
  position: fixed;
  z-index: 1;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
}

.gm-message-image-lightbox-action {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(220, 238, 255, .26);
  border-radius: 999px;
  background: rgba(12, 27, 42, .82);
  color: #f2f8ff;
  font: 700 29px/1 Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
}

.gm-message-image-lightbox-action img {
  display: block;
  width: 22px;
  height: 22px;
  filter: invert(1) brightness(1.8);
}

.gm-message-image-lightbox-action:hover,
.gm-message-image-lightbox-action:focus-visible {
  border-color: rgba(174, 218, 252, .78);
  background: rgba(34, 67, 94, .96);
  outline: none;
}

@keyframes gm-image-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  .gm-message-image-lightbox {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  .gm-message-image-lightbox-image {
    max-width: 100%;
    max-height: 84dvh;
    border-radius: 7px;
  }
}

/* A live call is rendered inside the chat header by React; on phones it must escape that narrow header. */
@media (max-width: 760px) {
  .chat-thread-head .chat-call-strip:has(.call-shell) {
    display: contents !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) {
    position: fixed !important;
    z-index: 950 !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
    background: rgba(3, 10, 18, .88) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-grid {
    flex: 1 1 auto;
    min-height: 190px;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-controls {
    margin-top: auto;
    padding-top: 12px;
  }
}

/* Explicit class from the helper is used because the call header must break out of a narrow grid column. */
@media (max-width: 760px) {
  .chat-thread-head .call-stack.gm-call-active-mobile {
    position: fixed !important;
    z-index: 1000 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
    background: radial-gradient(circle at 20% 8%, rgba(187, 255, 212, .28), transparent 34%), linear-gradient(160deg, #176b43 0%, #0d4c34 48%, #073725 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(220, 255, 232, .24) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(15, 93, 57, .96), rgba(5, 55, 34, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-grid {
    flex: 1 1 auto;
    min-height: 210px;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls {
    margin-top: auto;
    padding-top: 14px;
  }

  /* Mobile call screen: one focused participant card and clear controls. */
  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell {
    justify-content: space-between;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding-top: 16px;
    text-align: center;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head strong {
    font-size: 1.55rem;
    line-height: 1.15;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head .muted {
    max-width: 320px;
    color: rgba(228, 255, 238, .72) !important;
    font-size: .98rem;
    line-height: 1.35;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head .badge-row,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-invite {
    display: none !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center;
    gap: 16px !important;
    min-height: 0;
    padding: 22px 0;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile.local {
    position: relative;
    display: grid !important;
    grid-template-rows: 1fr auto;
    align-items: center;
    width: min(78vw, 300px) !important;
    height: min(78vw, 300px) !important;
    min-height: 0 !important;
    padding: 22px !important;
    overflow: hidden;
    border: 1px solid rgba(222, 255, 234, .28) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 32% 20%, rgba(180, 255, 207, .28), transparent 40%), rgba(4, 51, 31, .45) !important;
    box-shadow: 0 22px 48px rgba(0, 32, 19, .28), inset 0 1px 0 rgba(255, 255, 255, .11) !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-avatar {
    width: 116px !important;
    height: 116px !important;
    margin: auto;
    border: 1px solid rgba(229, 255, 239, .34);
    border-radius: 50% !important;
    background: rgba(230, 255, 239, .14) !important;
    color: #f2fff7 !important;
    font-size: 2.35rem !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile-copy {
    display: grid;
    gap: 4px;
    text-align: center;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile-copy strong {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile-copy span {
    color: rgba(229, 255, 239, .7);
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-empty,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-connection-notice {
    margin: 0 auto;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: rgba(229, 255, 239, .78);
    text-align: center;
    font-size: .95rem;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls {
    display: flex !important;
    justify-content: center;
    gap: 18px;
    padding: 18px 0 max(10px, env(safe-area-inset-bottom)) !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls .call-icon-button {
    display: grid;
    place-items: center;
    width: 66px !important;
    min-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 0 !important;
    border: 1px solid rgba(230, 255, 239, .3) !important;
    border-radius: 50% !important;
    background: rgba(235, 255, 242, .16) !important;
    color: #f4fff7 !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls .call-icon-button--danger {
    border-color: rgba(255, 220, 220, .45) !important;
    background: #e34e4e !important;
    color: #fff !important;
    transform: rotate(135deg);
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls .call-icon-button svg,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls .call-icon-button img {
    width: 25px !important;
    height: 25px !important;
  }

  html.gm-mobile-call-live,
  html.gm-mobile-call-live body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html.gm-mobile-call-live .gm-mobile-guild-header {
    display: none !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile {
    top: calc(-1 * var(--gm-mobile-call-top-offset, 0px)) !important;
    bottom: auto !important;
    height: calc(100dvh + var(--gm-mobile-call-top-offset, 0px)) !important;
    min-height: calc(100dvh + var(--gm-mobile-call-top-offset, 0px)) !important;
    overflow: hidden !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell {
    height: 100% !important;
    min-height: 100% !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head {
    width: 100% !important;
    margin: 0 auto !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head strong,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head .muted {
    width: 100% !important;
    text-align: center !important;
    justify-self: center !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head > div:not(.badge-row) {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head .muted {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Keep the participant identity, but remove the oversized decorative ring. */
  .chat-thread-head .call-stack.gm-call-active-mobile .call-grid {
    flex: 0 0 245px !important;
    padding: 14px 0 0 !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile.local {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile-copy {
    margin-top: 12px;
    color: #f2fff7;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-connection-notice {
    margin-bottom: 34px !important;
  }

  /* Stable phone call layout. The React tile has its own grid styles, so the
     active screen deliberately uses positioned regions instead of that grid. */
  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head {
    position: absolute !important;
    top: max(26px, env(safe-area-inset-top)) !important;
    right: auto !important;
    left: 50% !important;
    width: calc(100% - 36px) !important;
    transform: translateX(-50%) !important;
    z-index: 2;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-grid {
    position: absolute !important;
    top: 195px !important;
    right: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 205px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile.local {
    display: flex !important;
    grid-template-rows: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-avatar {
    box-sizing: border-box !important;
    display: grid !important;
    flex: 0 0 124px !important;
    width: 124px !important;
    min-width: 124px !important;
    height: 124px !important;
    min-height: 124px !important;
    margin: 0 !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile-copy {
    position: static !important;
    display: grid !important;
    gap: 3px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f2fff7 !important;
    text-align: left !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile-copy strong {
    max-width: min(45vw, 220px) !important;
    color: #f2fff7 !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-connection-notice {
    position: absolute !important;
    right: 16px !important;
    bottom: 110px !important;
    left: 16px !important;
    width: auto !important;
    margin: 0 !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls {
    position: absolute !important;
    right: 0 !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    z-index: 2;
    margin: 0 !important;
    touch-action: manipulation !important;
  }
}
/* Desktop live call: the React component is mounted in the compact header
   action slot. Pull it out into a real call strip directly below the header. */
@media (min-width: 761px) {
  .chat-thread-head .chat-call-strip:has(.call-shell) {
    display: contents !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) {
    position: absolute !important;
    z-index: 40 !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) > .call-actions {
    display: none !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-shell {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) 42px 150px minmax(110px, .75fr) 90px;
    align-items: center !important;
    gap: 10px !important;
    min-height: 132px !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(161, 255, 199, .3) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(128, 255, 181, .2), transparent 32%),
      linear-gradient(110deg, #126b43 0%, #0a5737 55%, #06442d 100%) !important;
    box-shadow: 0 16px 34px rgba(0, 35, 21, .34), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    color: #f0fff6 !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-shell-head {
    display: grid !important;
    grid-column: 1;
    gap: 7px;
    min-width: 0;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-shell-head strong {
    color: #f4fff7 !important;
    font-size: 1.18rem !important;
    line-height: 1.1;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-shell-head .muted {
    margin: 0 !important;
    color: rgba(230, 255, 240, .76) !important;
    font-size: .84rem !important;
    line-height: 1.35;
  }

  .chat-thread-head .call-stack:has(.call-shell) .badge-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  .chat-thread-head .call-stack:has(.call-shell) .badge-row .badge {
    border-color: rgba(218, 255, 232, .28) !important;
    background: rgba(1, 43, 26, .25) !important;
    color: #e5ffed !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-invite {
    grid-column: 2;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-invite-toggle,
  .chat-thread-head .call-stack:has(.call-shell) .call-controls .call-icon-button {
    display: grid !important;
    place-items: center;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-color: rgba(226, 255, 237, .32) !important;
    background: rgba(1, 42, 26, .34) !important;
    color: #f2fff7 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-grid {
    grid-column: 3;
    min-width: 0;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-tile,
  .chat-thread-head .call-stack:has(.call-shell) .call-tile.local {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-avatar {
    display: grid !important;
    flex: 0 0 48px;
    place-items: center;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border: 1px solid rgba(233, 255, 241, .36) !important;
    background: rgba(197, 255, 218, .14) !important;
    color: #f3fff7 !important;
    font-size: 1.2rem !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-tile-copy {
    position: static !important;
    display: grid !important;
    min-width: 0;
    gap: 3px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-tile-copy strong {
    display: block !important;
    max-width: 90px !important;
    overflow: hidden;
    color: #f3fff7 !important;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-tile-copy span,
  .chat-thread-head .call-stack:has(.call-shell) .call-empty {
    color: rgba(229, 255, 239, .75) !important;
    font-size: .84rem;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-empty {
    grid-column: 4;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-controls {
    display: flex !important;
    grid-column: 5;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-controls .call-icon-button--danger {
    border-color: rgba(255, 224, 224, .5) !important;
    background: #e34d4d !important;
    color: #fff !important;
    transform: rotate(135deg);
  }

  .chat-thread:has(.call-shell) .chat-messages {
    margin-top: 142px !important;
  }
}

/* Dialog list: keep the title and preview visually compact and center the
   avatar against the combined two-line block on both desktop and mobile. */
.messenger-room-item {
  align-items: center !important;
}

.messenger-room-copy {
  gap: 1px !important;
}

.messenger-room-row {
  line-height: 1.15;
}

.messenger-room-preview {
  line-height: 1.18 !important;
}

/* Keep the unread badge beside the time.  Stacking it under the time added a
   third line and made only unread dialogs taller than the rest of the list. */
.messenger-room-side {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 1.15em;
}

/* Participants are managed from the group flow, not from the compact call bar. */
.chat-thread-head .call-stack:has(.call-shell) .call-invite-toggle {
  display: none !important;
}

/* Keep the desktop call strip compact: statuses live in the heading and the
   participant card is unnecessary until another person connects. */
@media (min-width: 761px) {
  .chat-thread:has(.call-shell) {
    overflow: hidden !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) {
    margin-top: 0 !important;
    gap: 0 !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-shell {
    grid-template-columns: minmax(240px, 1fr) 42px minmax(240px, 1fr) 90px !important;
    min-height: 78px !important;
    padding: 8px 18px !important;
    border-radius: 0 !important;
  }

  .chat-thread:has(.call-shell) .chat-messages {
    margin-top: 78px !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .badge-row,
  .chat-thread-head .call-stack:has(.call-shell) .call-grid {
    display: none !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-invite {
    grid-column: 2 !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-empty {
    grid-column: 3 !important;
    justify-self: center;
    text-align: center;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-controls {
    grid-column: 4 !important;
  }

  .chat-thread-head .call-stack:has(.call-shell) .call-controls .call-icon-button--danger {
    transform: none !important;
  }
}

/* Mobile call screen: deliberately sparse so the call itself is the focus. */
@media (max-width: 760px) {
  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 30px 18px 102px !important;
    overflow: hidden !important;
    background: transparent !important;
    touch-action: manipulation !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head > div:not(.badge-row) {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head strong {
    display: block !important;
    color: #f5fff8 !important;
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-shell-head .muted {
    max-width: 330px !important;
    margin: 7px auto 0 !important;
    color: rgba(235, 255, 242, .72) !important;
    font-size: .94rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .badge-row,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-invite,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-empty,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-connection-notice {
    display: none !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-grid {
    position: static !important;
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 28px 0 !important;
    gap: 26px !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile,
  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile.local {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: min(42vw, 150px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-avatar {
    box-sizing: border-box !important;
    display: grid !important;
    flex: 0 0 96px !important;
    place-items: center !important;
    width: 96px !important;
    min-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
    margin: 0 !important;
    border: 1px solid rgba(230, 255, 240, .28) !important;
    border-radius: 50% !important;
    background: rgba(235, 255, 243, .13) !important;
    box-shadow: none !important;
    color: #f4fff7 !important;
    font-size: 1.9rem !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile-copy {
    position: static !important;
    display: grid !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f2fff7 !important;
    text-align: center !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #f4fff7 !important;
    font-size: .92rem !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-tile-copy span {
    color: rgba(235, 255, 242, .66) !important;
    font-size: .82rem !important;
    text-align: center !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls {
    position: absolute !important;
    right: 0 !important;
    bottom: max(22px, env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls .call-icon-button {
    display: grid !important;
    place-items: center !important;
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    border: 1px solid rgba(230, 255, 240, .32) !important;
    border-radius: 50% !important;
    background: rgba(3, 25, 17, .38) !important;
    color: #f5fff8 !important;
    box-shadow: none !important;
  }

  .chat-thread-head .call-stack.gm-call-active-mobile .call-controls .call-icon-button--danger {
    border-color: rgba(255, 220, 220, .5) !important;
    background: #ec4c4f !important;
    transform: none !important;
  }
}

/* The site-wide incoming-call toast is the single notification surface. */
body:has(.gm-global-call-toast) .chat-thread-head .call-alert {
  display: none !important;
}

@media (max-width: 760px) {
  .chat-thread-head .call-alert {
    display: none !important;
  }
}

/* Incoming calls are shown only by .gm-global-call-toast. */
.call-alert {
  display: none !important;
}

/* Keep the request picker connected to the composer while preserving context. */
.chat-composer .request-picker-panel {
  background: linear-gradient(145deg, rgba(20, 34, 49, .82), rgba(9, 18, 29, .78)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  box-shadow: 0 -18px 46px rgba(2, 8, 17, .28) !important;
}

/* Compact request attachment in the message thread. */
.attachment-card:has(.request-attachment-card) {
  width: min(340px, 100%) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.request-attachment-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(125, 185, 234, .22) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(31, 68, 93, .9), rgba(16, 38, 56, .94)) !important;
  box-shadow: 0 8px 20px rgba(1, 12, 22, .16) !important;
}

.request-attachment-main {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.request-attachment-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.request-attachment-head strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #edf8ff !important;
  font-size: .9rem !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.request-attachment-badge {
  display: none !important;
}

.request-attachment-status {
  flex: 0 0 auto !important;
  max-width: 46% !important;
  overflow: hidden !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(171, 221, 255, .18) !important;
  border-radius: 999px !important;
  background: rgba(174, 220, 255, .1) !important;
  color: #c9e9ff !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.request-attachment-address,
.request-attachment-description {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(225, 241, 252, .82) !important;
  font-size: .78rem !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
}

.request-attachment-address {
  color: #d9efff !important;
  font-weight: 600 !important;
  -webkit-line-clamp: 1 !important;
}

.request-attachment-description {
  color: rgba(225, 241, 252, .7) !important;
  -webkit-line-clamp: 2 !important;
}

.request-attachment-link {
  min-width: auto !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  background: rgba(230, 247, 255, .12) !important;
  color: #e9f7ff !important;
  font-size: .76rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.request-attachment-link:hover {
  background: rgba(230, 247, 255, .2) !important;
}

@media (max-width: 480px) {
  .request-attachment-card {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .request-attachment-link {
    justify-self: start !important;
  }
}