/* 69WORLD v61 — КООРДИНАТЫ ЭЛЕМЕНТОВ ЧАТА
   Редактируй только числа в блоке ниже.
   X (left/right) считаются от края ОБЛАСТИ ЧАТА, а не всего браузера.
   Верх и низ — от верхнего/нижнего края области чата.
   Каждый элемент настраивается независимо. */

body[data-page="chat"] main#shell .chat {
  /* 1. ВЕРХНЯЯ ПАНЕЛЬ (от левого и верхнего края области чата) */
  --header-left: 100px;
  --header-top: 12px;
  --header-width: 760px;
  --header-height: 64px;

  /* 2. НИЖНЯЯ ПАНЕЛЬ «НАПИСАТЬ СООБЩЕНИЕ» */
  --input-left: 115px;
  --input-bottom: 12px;
  --input-width: 760px;
  --input-height: 64px;

  /* 3. МОИ СООБЩЕНИЯ — расстояние от ПРАВОГО края области чата */
  --mine-right: 295px;

  /* 4. ЧУЖИЕ СООБЩЕНИЯ — расстояние от ЛЕВОГО края области чата */
  --theirs-left: 100px;
}

/* Верхняя панель: координаты независимы от нижней */
body[data-page="chat"] main#shell .chat > .chatHeader.telegramHeader {
  position:absolute!important;
  left:var(--header-left)!important;
  top:var(--header-top)!important;
  right:auto!important;
  bottom:auto!important;
  width:min(var(--header-width), calc(100% - var(--header-left) - 12px))!important;
  height:var(--header-height)!important;
  min-height:var(--header-height)!important;
  max-height:var(--header-height)!important;
  transform:none!important;
  box-sizing:border-box!important;
}
/* Нижняя панель: независимые координаты */
body[data-page="chat"] main#shell .chat > form.composer#sendForm {
  position:absolute!important;
  left:var(--input-left)!important;
  bottom:var(--input-bottom)!important;
  top:auto!important;
  right:auto!important;
  width:min(var(--input-width), calc(100% - var(--input-left) - 12px))!important;
  height:var(--input-height)!important;
  min-height:var(--input-height)!important;
  max-height:var(--input-height)!important;
  transform:none!important;
  box-sizing:border-box!important;
}
body[data-page="chat"] main#shell .chat > form.composer#sendForm > .composerPill {
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
}
/* Сообщения: общая область прокрутки всегда внутри чата.
   Координаты меняются ОТСТУПАМИ, а не transform, поэтому текст не обрезается. */
body[data-page="chat"] main#shell .chat > .messages {
  position:absolute!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  transform:none!important;
  padding-left:max(0px,var(--theirs-left))!important;
  padding-right:max(0px,var(--mine-right))!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}
body[data-page="chat"] main#shell .chat > .messages > .bubble {
  flex:0 0 auto!important;
  width:fit-content!important;
  max-width:min(78%,560px)!important;
  min-width:0!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  align-self:flex-start!important;
  margin-left:0!important;
  margin-right:auto!important;
}
body[data-page="chat"] main#shell .chat > .messages > .bubble.mine {
  align-self:flex-end!important;
  margin-left:auto!important;
  margin-right:0!important;
  transform:none!important;
}
/* Для мобильного экрана безопасные отступы. */
@media(max-width:650px){
  body[data-page="chat"] main#shell .chat {
    --header-left:12px;
    --header-width:calc(100% - 24px);
    --input-left:12px;
    --input-width:calc(100% - 24px);
    --mine-right:12px;
    --theirs-left:12px;
    --header-height:56px;
    --input-height:56px;
  }
}

/* FIX: sticker bubbles must align with independently positioned message edges.
   Set offsets here, without changing the user's other coordinates. */
body[data-page="chat"] main#shell .chat {
  --my-sticker-adjust-x: 0px;
  --their-sticker-adjust-x: 0px;
  --my-sticker-adjust-y: 0px;
  --their-sticker-adjust-y: 0px;
}
body[data-page="chat"] main#shell .chat > .messages > .bubble.mine:has(.stickerBubble) {
  translate: var(--my-sticker-adjust-x) var(--my-sticker-adjust-y) !important;
}
body[data-page="chat"] main#shell .chat > .messages > .bubble:not(.mine):has(.stickerBubble) {
  translate: var(--their-sticker-adjust-x) var(--their-sticker-adjust-y) !important;
}

/* Fix: timestamp belongs to its sticker, not to the message lane. */
body[data-page="chat"] main#shell .chat > .messages > .bubble:has(img.stickerBubble) {
  position:relative!important;
  width:170px!important;height:170px!important;
  min-width:170px!important;min-height:170px!important;
  max-width:170px!important;max-height:170px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
body[data-page="chat"] main#shell .chat > .messages > .bubble:has(img.stickerBubble) > small {
  position:absolute!important;
  left:auto!important;right:3px!important;top:auto!important;bottom:3px!important;
  transform:none!important;translate:none!important;
  margin:0!important;z-index:5!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  width:max-content!important;max-width:calc(100% - 6px)!important;
  background:rgba(14,30,40,.75)!important;border-radius:9px!important;
  padding:3px 5px!important;
}
/* Jump arrow sits above composer, aligned with the message-time column. */
body[data-page="chat"] main#shell .chat > #jumpToBottom.chat-bottom-button {
  position:absolute!important;
  left:auto!important;right:calc(var(--mine-right) + 3px)!important;
  top:auto!important;bottom:calc(var(--input-bottom) + var(--input-height) + 14px)!important;
  transform:none!important;z-index:30!important;
}
@media(max-width:650px){
  body[data-page="chat"] main#shell .chat > #jumpToBottom.chat-bottom-button {right:16px!important;}
}


/* v63 — точечная настройка по Telegram-референсу.
   Пользовательские координаты всех панелей и сообщений выше СОХРАНЕНЫ. */
body[data-page="chat"] main#shell .chat {
  --sticker-time-right: 0px;
  --sticker-time-bottom: 0px;
  --jump-arrow-x: 0px;
  --jump-arrow-y: 0px;
  --header-compact-height: 54px;
}
/* Метка времени — у правого нижнего края изображения стикера,
   а не в отдельной колонке слева. */
body[data-page="chat"] main#shell .chat > .messages > .bubble:has(img.stickerBubble) > small {
  position: absolute !important;
  left: auto !important;
  right: var(--sticker-time-right) !important;
  top: auto !important;
  bottom: var(--sticker-time-bottom) !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border-radius: 999px !important;
  padding: 3px 6px !important;
  background: rgba(19,29,30,.72) !important;
  color: #fff !important;
  white-space: nowrap !important;
}
/* Стрелка находится непосредственно над ПРАВЫМ краем поля ввода,
   как на образце, и двигается вместе с его координатами. */
body[data-page="chat"] main#shell .chat > #jumpToBottom.chat-bottom-button {
  position: absolute !important;
  left: calc(var(--input-left) + min(var(--input-width), 100% - var(--input-left) - 12px) - 50px + var(--jump-arrow-x)) !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--input-bottom) + var(--input-height) + 12px - var(--jump-arrow-y)) !important;
  transform: none !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  z-index: 30 !important;
}
/* Верхняя панель: только высота и скругление, X/Y/ширина не меняются. */
body[data-page="chat"] main#shell .chat > .chatHeader.telegramHeader {
  height: var(--header-compact-height) !important;
  min-height: var(--header-compact-height) !important;
  max-height: var(--header-compact-height) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  overflow: hidden !important;
}
body[data-page="chat"] main#shell .chat > .chatHeader.telegramHeader .chatContact {
  height: 100% !important;
  min-height: 0 !important;
}
body[data-page="chat"] main#shell .chat > .chatHeader.telegramHeader .chatContactAvatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex-basis: 42px !important;
}
/* Кнопка отправки: увеличиваем радиус закругления на 3px. */
body[data-page="chat"] main#shell .chat .composerPill #send {
  border-radius: calc(50% + 3px) !important;
}

/* v64: keep sticker bubbles at the same right edge as text bubbles.
   Remove the old -145px offset, preserve all manual panel coordinates. */
body[data-page="chat"] main#shell .chat > .messages > .bubble.mine:has(img.stickerBubble) {
  translate: none !important;
  transform: none !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body[data-page="chat"] main#shell .chat > .messages > .bubble:not(.mine):has(img.stickerBubble) {
  translate: none !important;
  transform: none !important;
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Timestamp is attached to the sticker bubble itself. */
body[data-page="chat"] main#shell .chat > .messages > .bubble:has(img.stickerBubble) > small {
  right: 2px !important;
  bottom: 2px !important;
  left: auto !important;
  top: auto !important;
}
/* Arrow centered above the send button, with clear vertical separation. */
body[data-page="chat"] main#shell .chat > #jumpToBottom.chat-bottom-button {
  left: calc(var(--input-left) + min(var(--input-width), 100% - var(--input-left) - 12px) - 68px + var(--jump-arrow-x)) !important;
  right: auto !important;
  bottom: calc(var(--input-bottom) + var(--input-height) + 16px - var(--jump-arrow-y)) !important;
  width: 46px !important;
  height: 46px !important;
}

/* v65: slightly larger send button; no changes to panel positions. */
body[data-page="chat"] main#shell .chat .composerPill #send {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
}