/*
 * ============================================================================
 * XChat — Mobile UI v1
 * ============================================================================
 *
 * PURPOSE
 * -------
 * Единственный stylesheet геометрии XChat для touch-layout.
 *
 * BREAKPOINTS
 * -----------
 * phone : <= 700px
 * tablet: 701px .. 1024px
 *
 * OWNERSHIP
 * ---------
 * theme.css         — общая визуальная тема XChat
 * presence.css      — базовый компонент presence
 * mobile.css        — ТОЛЬКО responsive/touch presentation
 * bottom-layout.css — desktop layout >= 1025px
 * mobile.js         — ТОЛЬКО mobile behavior
 *
 * RULE
 * ----
 * Здесь нет API, данных, renderer'ов и JS-подобной логики.
 * Один компонент = одно финальное правило, без v0.x/hotfix слоёв.
 * ============================================================================
 */


/* ============================================================================
   1. TOUCH FOUNDATION
   ============================================================================ */

@media (max-width: 1024px) {

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;

    overflow: hidden;

    overscroll-behavior: none;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .xc-room {
    width: 100vw !important;
    min-width: 0 !important;

    height: var(--xchat-mobile-vh, 100dvh) !important;
    min-height: 0 !important;

    overflow: hidden !important;
  }

  .xc-room-frame {
    display: grid !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      auto
      auto
      minmax(0, 1fr)
      auto
      auto
      !important;

    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;

    overflow: hidden !important;
  }

  .xc-top-strip {
    grid-column: 1 !important;
    grid-row: 1 !important;

    min-width: 0 !important;
  }

  .xc-marquee-strip {
    grid-column: 1 !important;
    grid-row: 2 !important;

    min-width: 0 !important;

    overflow: hidden !important;
  }

  .xc-main-zone {
    grid-column: 1 !important;
    grid-row: 3 !important;

    width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    gap: 0 !important;

    overflow: hidden !important;
  }

  #sendForm.xc-bottom {
    grid-column: 1 !important;
    grid-row: 4 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;

    overflow: visible !important;
  }

  .xc-footer-menu {
    grid-column: 1 !important;
    grid-row: 5 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
  }


  /*
   * Desktop positioning/order must never leak into touch composer.
   */
  #sendForm > #actionSelect,
  #sendForm > #messageInput,
  #sendForm > #smileButton,
  #sendForm > .xc-send-btn {
    position: static !important;
    inset: auto !important;

    float: none !important;

    transform: none !important;

    margin: 0 !important;
    order: 0 !important;
  }

  #sendForm > #miniInput {
    display: none !important;
  }


  /*
   * Prevent page-wide horizontal overflow.
   * Horizontal scrolling is allowed only inside components that own it.
   */
  .xc-room,
  .xc-room-frame,
  .xc-main-zone,
  .xc-chat-window,
  #messagesBox {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}


/* ============================================================================
   2. PHONE SHELL
   ============================================================================ */

@media (max-width: 700px) {

  .xc-main-zone {
    position: relative !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    height: auto !important;
  }


  /* --------------------------------------------------------------------------
     Header
     -------------------------------------------------------------------------- */

  .xc-top-strip {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    min-height: 42px !important;

    padding: 4px 7px !important;
    gap: 8px !important;

    overflow: hidden;
  }

  .xc-logo-box {
    display: flex !important;
    align-items: center !important;

    min-width: 0 !important;
    height: 34px !important;
  }

  .xc-logo-box img {
    width: auto !important;
    height: 27px !important;

    max-width: 145px !important;

    object-fit: contain;
  }

  .xc-private-box,
  .xc-top-empty {
    display: none !important;
  }

  .xc-mobile-users-btn {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 92px;
    height: 34px;

    padding: 0 10px;

    border: 1px solid #5d83d9;
    border-radius: 5px;

    background: #071332;
    color: #67ea91;

    font: 700 13px Verdana, Arial, sans-serif;

    white-space: nowrap;

    cursor: pointer;
    touch-action: manipulation;
  }

  .xc-mobile-users-btn:active {
    background: #10265c;
  }


  /* --------------------------------------------------------------------------
     Marquee
     -------------------------------------------------------------------------- */

  .xc-marquee-strip {
    height: 19px !important;
    min-height: 19px !important;

    line-height: 19px !important;
    font-size: 11px !important;
  }


  /* --------------------------------------------------------------------------
     Chat viewport
     -------------------------------------------------------------------------- */

  .xc-chat-window {
    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 8px 9px 10px !important;

    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overflow-wrap: anywhere;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .xc-chat-window .xc-line {
    max-width: 100%;

    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* ============================================================================
   3. PHONE ONLINE DRAWER
   ============================================================================ */

@media (max-width: 700px) {

  .xc-side {
    position: fixed !important;

    z-index: 10020 !important;

    top: max(8px, env(safe-area-inset-top)) !important;
    right: 7px !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;
    flex-direction: column !important;

    width: min(calc(100vw - 14px), 380px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height:
      min(
        calc(var(--xchat-mobile-vh, 100dvh) - 16px),
        620px
      )
      !important;

    padding: 0 !important;

    border: 1px solid #4e6bb5 !important;
    border-radius: 8px !important;

    background: rgba(2, 8, 43, .98) !important;

    box-shadow:
      0 12px 34px rgba(0, 0, 0, .72)
      !important;

    overflow: hidden !important;

    transform: translateX(calc(100% + 18px));
    transform-origin: top right;

    opacity: .98;

    transition:
      transform .18s ease-out,
      opacity .18s ease-out;
  }

  .xc-side.xc-side-open {
    transform: translateX(0);
    opacity: 1;
  }


  /* --------------------------------------------------------------------------
     Drawer header
     -------------------------------------------------------------------------- */

  .xc-mobile-side-head {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    flex: 0 0 44px !important;

    width: 100%;
    min-height: 44px !important;

    padding: 5px 6px 5px 12px !important;

    border-bottom: 1px solid #344b93 !important;

    background:
      linear-gradient(
        180deg,
        #0a183e 0%,
        #06102c 100%
      )
      !important;

    color: #fff;

    font: 700 14px Verdana, Arial, sans-serif !important;
  }

  .xc-mobile-side-close {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;

    padding: 0;

    border: 1px solid #7288cc !important;
    border-radius: 6px !important;

    background:
      linear-gradient(
        180deg,
        #15285d,
        #09173e
      )
      !important;

    color: #fff !important;

    font: 700 22px/30px Arial, sans-serif !important;

    cursor: pointer;
    touch-action: manipulation;
  }

  .xc-mobile-side-close:active {
    background: #263d77 !important;
  }


  /* --------------------------------------------------------------------------
     Drawer content
     -------------------------------------------------------------------------- */

  .xc-side #usersBox {
    flex: 0 1 auto !important;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;

    max-height:
      calc(
        min(
          calc(var(--xchat-mobile-vh, 100dvh) - 16px),
          620px
        ) - 45px
      )
      !important;

    padding: 8px 8px 10px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .xc-side #usersBox > .xc-live-presence {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    padding: 0 !important;

    overflow: visible !important;

    font: 15px/1.35 Verdana, Arial, sans-serif !important;
  }

  .xc-side #usersBox .xc-live-users-list {
    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    gap: 3px !important;

    overflow: visible !important;
  }


  /* --------------------------------------------------------------------------
     Authoritative presence row

     STATUS | ROLE | NICK ---------------- INFO

     DOM is created only by chat/presence.js.
     -------------------------------------------------------------------------- */

  .xc-side #usersBox .xc-live-user {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;

    padding: 3px 43px 3px 7px !important;

    border: 1px solid transparent;
    border-radius: 5px;

    white-space: nowrap !important;

    overflow: visible !important;

    text-decoration: none !important;

    touch-action: manipulation;
  }

  .xc-side #usersBox .xc-live-user:active {
    background: rgba(80, 115, 190, .20) !important;
    border-color: rgba(110, 145, 220, .24);
  }


  /* Status icon */

  .xc-side #usersBox .xc-live-status {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 22px !important;

    width: 22px !important;
    min-width: 22px !important;
    height: 24px !important;

    margin: 0 5px 0 0 !important;

    overflow: visible !important;
  }

  .xc-side #usersBox .xc-live-status img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 20px !important;
    max-height: 20px !important;

    object-fit: contain;
  }


  /* Admin role */

  .xc-side #usersBox .xc-live-star {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 12px !important;

    width: 12px !important;

    margin: 0 3px 0 0 !important;
  }


  /* Nick */

  .xc-side #usersBox .xc-live-user-nick {
    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: 15px !important;
    line-height: 28px !important;

    text-decoration: none;
  }


  /* INFO: one real button from presence renderer */

  .xc-side #usersBox .xc-live-user-info {
    position: absolute !important;

    top: 50% !important;
    right: 5px !important;

    transform: translateY(-50%) !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #526fb7 !important;
    border-radius: 5px !important;

    background:
      linear-gradient(
        180deg,
        #162a64,
        #09163b
      )
      !important;

    cursor: pointer !important;
    touch-action: manipulation;

    z-index: 2;
  }

  .xc-side #usersBox .xc-live-user-info::before,
  .xc-side #usersBox .xc-live-user-info::after {
    display: none !important;
    content: none !important;
  }

  .xc-side #usersBox .xc-live-user-info img {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: 18px !important;
    height: auto !important;

    max-width: 18px !important;
    max-height: 18px !important;

    border: 0 !important;
  }

  .xc-side #usersBox .xc-live-user-info:active {
    border-color: #ffe66b !important;
    background: #203d79 !important;
  }


  /* Ignored user */

  .xc-side #usersBox
  .xc-live-user.xc-live-user-ignored
  .xc-live-user-nick {
    color: #777 !important;

    opacity: .72 !important;

    text-decoration-line: line-through !important;
    text-decoration-color: #b85d5d !important;
    text-decoration-thickness: 1px !important;
  }

  .xc-side #usersBox
  .xc-live-user.xc-live-user-ignored
  .xc-live-status,
  .xc-side #usersBox
  .xc-live-user.xc-live-user-ignored
  .xc-live-star {
    filter: grayscale(1);
    opacity: .55;
  }


  /* --------------------------------------------------------------------------
     Drawer overlay
     -------------------------------------------------------------------------- */

  .xc-side-overlay {
    position: fixed !important;

    z-index: 10010 !important;

    inset: 0 !important;

    display: block !important;

    background: rgba(0, 0, 0, .52) !important;

    backdrop-filter: blur(1px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
      opacity .18s ease,
      visibility .18s ease;
  }

  .xc-side-overlay.active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
  }

  html.xc-mobile-drawer-open {
    overflow: hidden !important;
  }
}


/* ============================================================================
   4. PHONE COMPOSER
   ============================================================================ */

@media (max-width: 700px) {

  #sendForm.xc-bottom {
    display: grid !important;

    grid-template-columns:
      34px
      minmax(0, 1fr)
      40px
      58px
      !important;

    grid-template-rows: 36px !important;

    align-items: stretch !important;

    gap: 4px !important;

    min-height: 46px !important;

    padding: 4px 5px !important;

    overflow: visible !important;
  }


  /* --------------------------------------------------------------------------
     Target row
     -------------------------------------------------------------------------- */

  #sendForm #targetBox,
  #sendForm #targetBox.xc-target-slot,
  #sendForm #targetBox.xc-target {
    display: none !important;
  }

  #sendForm:has(#targetBox.has-target) {
    grid-template-rows:
      25px
      36px
      !important;

    min-height: 67px !important;
  }

  #sendForm #targetBox.has-target,
  #sendForm #targetBox.xc-target.has-target {
    display: flex !important;

    position: static !important;

    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 24px !important;
    min-height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    z-index: 30 !important;
  }

  #sendForm #targetChip.xc-target-chip {
    display: inline-flex !important;

    align-items: center !important;

    width: auto !important;

    min-width: 0 !important;
    max-width: min(260px, calc(100vw - 18px)) !important;

    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;

    margin: 0 !important;
    padding: 1px 6px !important;

    gap: 4px !important;

    border: 1px solid #6688ff !important;
    border-radius: 4px !important;

    background: #071653 !important;
    color: #dce8ff !important;

    box-shadow: none !important;

    font: bold 11px/19px Verdana, Arial, sans-serif !important;

    white-space: nowrap !important;
  }

  #sendForm #targetChip.xc-target-chip.is-private {
    border-color: #ff4fa3 !important;

    background: #8a0048 !important;
    color: #fff !important;

    box-shadow:
      0 0 5px rgba(255, 70, 160, .60)
      !important;
  }

  #sendForm #targetChip .xc-target-mode {
    flex: 0 0 auto !important;

    margin-right: 4px !important;

    color: #ffe66b !important;

    text-transform: uppercase;
  }

  #sendForm #targetChip.is-private .xc-target-mode {
    color: #fff !important;
  }

  #sendForm #targetChip .xc-target-name,
  #sendForm #targetChip .xc-target-chip-name {
    display: block !important;

    min-width: 0 !important;
    max-width: 145px !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #sendForm #targetChipClose,
  #sendForm .xc-target-chip-close {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 18px !important;

    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;

    margin: 0 0 0 3px !important;
    padding: 0 !important;

    line-height: 16px !important;

    cursor: pointer;
    touch-action: manipulation;
  }


  /*
   * Main composer row.
   */
  #sendForm > #actionSelect {
    grid-column: 1 !important;
  }

  #sendForm > #messageInput {
    grid-column: 2 !important;
  }

  #sendForm > #smileButton {
    grid-column: 3 !important;
  }

  #sendForm > .xc-send-btn {
    grid-column: 4 !important;
  }

  #sendForm:has(#targetBox.has-target)
  > #actionSelect,
  #sendForm:has(#targetBox.has-target)
  > #messageInput,
  #sendForm:has(#targetBox.has-target)
  > #smileButton,
  #sendForm:has(#targetBox.has-target)
  > .xc-send-btn {
    grid-row: 2 !important;
  }

  #sendForm:not(:has(#targetBox.has-target))
  > #actionSelect,
  #sendForm:not(:has(#targetBox.has-target))
  > #messageInput,
  #sendForm:not(:has(#targetBox.has-target))
  > #smileButton,
  #sendForm:not(:has(#targetBox.has-target))
  > .xc-send-btn {
    grid-row: 1 !important;
  }


  /* Action */

  #sendForm > #actionSelect,
  .xc-say-select {
    width: 34px !important;
    min-width: 34px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding: 0 !important;

    font-size: 13px !important;

    touch-action: manipulation;
  }


  /* Message */

  #sendForm > #messageInput {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 36px !important;
    min-height: 36px !important;

    padding: 5px 7px !important;

    /*
     * 16px avoids browser zoom on iOS focus.
     */
    font-size: 16px !important;
    line-height: 20px !important;
  }


  /* Smile trigger */

  #sendForm > #smileButton,
  #sendForm > #smileButton.xc-smile-btn {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding: 0 !important;

    font-size: 20px !important;
    line-height: 32px !important;

    touch-action: manipulation;
  }


  /* Send */

  #sendForm > .xc-send-btn {
    width: 58px !important;
    min-width: 58px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding: 0 2px !important;

    font-size: 10px !important;
    letter-spacing: -.2px !important;

    white-space: nowrap !important;

    touch-action: manipulation;
  }
}


/* ============================================================================
   5. TOUCH SMILE PICKER
   ============================================================================ */

.xc-smile-mobile-backdrop {
  display: none;
}

@media (max-width: 1024px) {

  .xc-smile-mobile-backdrop {
    position: fixed !important;

    inset: 0 !important;

    z-index: 999980 !important;

    display: block !important;

    background: rgba(0, 0, 0, .62) !important;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
      opacity .16s ease,
      visibility .16s ease;
  }

  html.xc-smile-sheet-open
  .xc-smile-mobile-backdrop {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
  }

  #smilePanel.xc-smile-panel.xc-smile-mobile-sheet {
    position: fixed !important;

    z-index: 999999 !important;

    display: block !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    overflow: hidden !important;

    border: 1px solid #4f68b8 !important;

    background: #050b28 !important;
    color: #fff !important;

    box-shadow:
      0 -8px 32px rgba(0, 0, 0, .78)
      !important;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-head {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    min-height: 54px !important;

    margin: 0 !important;
    padding: 3px 5px 3px 12px !important;

    border-bottom: 1px solid #31478f !important;

    background: #071332 !important;

    color: #fff58a !important;

    font: 700 13px Verdana, Arial, sans-serif !important;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-close {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 48px;

    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #7488cc !important;
    border-radius: 8px !important;

    background: #111e4d !important;
    color: #fff !important;

    font: 700 30px/1 Arial, sans-serif !important;

    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-close:active {
    background: #293969 !important;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-grid {
    display: grid !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-item {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 3px !important;

    border: 1px solid #253b87 !important;
    border-radius: 5px !important;

    background: #091647 !important;

    touch-action: manipulation;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-item:active {
    border-color: #ffe66b !important;
    background: #3c310d !important;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-item img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 34px !important;
    max-height: 34px !important;

    object-fit: contain;
  }
}


/* Phone smile picker lives ABOVE composer/footer. */

@media (max-width: 700px) {

  html.xc-smile-sheet-open
  .xc-smile-mobile-backdrop {
    bottom:
      calc(
        81px +
        env(safe-area-inset-bottom)
      )
      !important;
  }

  #smilePanel.xc-smile-panel.xc-smile-mobile-sheet {
    top: auto !important;

    right: 6px !important;
    bottom:
      calc(
        81px +
        env(safe-area-inset-bottom)
      )
      !important;
    left: 6px !important;

    width: auto !important;
    max-width: none !important;

    max-height:
      min(
        58dvh,
        calc(var(--xchat-mobile-vh, 100dvh) * .58)
      )
      !important;

    padding:
      0
      6px
      7px
      !important;

    border-radius: 13px !important;

    box-shadow:
      0 8px 34px rgba(0,0,0,.78),
      0 -6px 24px rgba(0,0,0,.52)
      !important;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-grid {
    grid-template-columns:
      repeat(7, minmax(0, 1fr))
      !important;

    gap: 5px !important;

    max-height:
      calc(
        min(
          58dvh,
          calc(var(--xchat-mobile-vh, 100dvh) * .58)
        ) - 62px
      )
      !important;

    padding: 7px 2px 3px !important;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-item {
    min-height: 44px !important;
  }


  /*
   * Target adds another composer row.
   * Smile picker follows that geometry instead of overlapping it.
   */
  html:has(#sendForm #targetBox.has-target).xc-smile-sheet-open
  .xc-smile-mobile-backdrop {
    bottom:
      calc(
        102px +
        env(safe-area-inset-bottom)
      )
      !important;
  }

  html:has(#sendForm #targetBox.has-target)
  #smilePanel.xc-smile-panel.xc-smile-mobile-sheet {
    bottom:
      calc(
        102px +
        env(safe-area-inset-bottom)
      )
      !important;
  }
}


/* Tablet smile picker. */

@media (min-width: 701px) and (max-width: 1024px) {

  #smilePanel.xc-smile-panel.xc-smile-mobile-sheet {
    top: auto !important;

    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;

    width: min(540px, calc(100vw - 28px)) !important;

    max-height: 54dvh !important;

    padding: 0 7px 8px !important;

    border-radius: 11px !important;

    transform: translateX(-50%) !important;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-grid {
    grid-template-columns:
      repeat(8, minmax(0, 1fr))
      !important;

    gap: 5px !important;

    max-height: calc(54dvh - 62px) !important;

    padding: 7px 1px 1px !important;
  }

  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-item {
    min-height: 42px !important;
  }
}


/* ============================================================================
   6. PHONE FOOTER
   ============================================================================ */

@media (max-width: 700px) {

  .xc-footer-menu {
    min-height: 30px !important;

    padding:
      3px
      6px
      max(3px, env(safe-area-inset-bottom))
      !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    white-space: nowrap;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .xc-footer-menu::-webkit-scrollbar {
    display: none;
  }

  .xc-footer-menu
  #xchatStableFooter.xsf-footer-links {
    display: flex !important;

    align-items: center !important;

    flex-wrap: nowrap !important;

    justify-content: flex-start !important;

    width: max-content !important;
    min-width: 100% !important;

    gap: 8px !important;
  }

  .xc-footer-menu
  .xsf-footer-item {
    display: inline-flex !important;

    align-items: center !important;

    flex: 0 0 auto !important;

    min-height: 22px !important;

    font-size: 12px !important;
    line-height: 20px !important;
  }
}


/* ============================================================================
   7. PHONE POPUPS
   ============================================================================ */

@media (max-width: 700px) {

  .xps,
  .xadmin-window,
  #xchatInfoPopup .xchat-info-window {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;

    max-height:
      calc(
        var(--xchat-mobile-vh, 100dvh) - 20px
      )
      !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }
}


/* ============================================================================
   8. TABLET
   ============================================================================ */

@media (min-width: 701px) and (max-width: 1024px) {

  .xc-main-zone {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      210px
      !important;

    min-height: 0 !important;
  }

  .xc-chat-window,
  .xc-side {
    min-height: 0 !important;
  }

  .xc-top-strip {
    grid-template-columns:
      150px
      minmax(0, 1fr)
      210px
      !important;
  }


  /* Tablet composer */

  #sendForm.xc-bottom {
    display: grid !important;

    grid-template-columns:
      96px
      minmax(0, 1fr)
      40px
      64px
      !important;

    grid-template-rows: 36px !important;

    align-items: stretch !important;

    gap: 5px !important;

    min-height: 44px !important;

    padding: 4px 6px !important;
  }

  #sendForm > #targetBox {
    display: none !important;
  }

  #sendForm > #actionSelect {
    grid-column: 1 !important;
  }

  #sendForm > #messageInput {
    grid-column: 2 !important;

    width: 100% !important;
    min-width: 0 !important;

    font-size: 16px !important;
    line-height: 20px !important;
  }

  #sendForm > #smileButton {
    grid-column: 3 !important;

    width: 40px !important;
    min-width: 40px !important;
  }

  #sendForm > .xc-send-btn {
    grid-column: 4 !important;

    width: 64px !important;
    min-width: 64px !important;

    padding: 0 !important;

    font-size: 10px !important;

    white-space: nowrap !important;
  }

  #sendForm > #actionSelect,
  #sendForm > #messageInput,
  #sendForm > #smileButton,
  #sendForm > .xc-send-btn {
    height: 36px !important;
    min-height: 36px !important;
  }


  /* Tablet footer */

  .xc-footer-menu {
    min-height: 27px !important;

    padding:
      3px
      6px
      max(3px, env(safe-area-inset-bottom))
      !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}


/* ============================================================================
   9. DESKTOP SAFETY
   ============================================================================ */

/*
 * Phone-only controls must never appear outside phone breakpoint.
 */
@media (min-width: 701px) {

  .xc-mobile-users-btn,
  .xc-mobile-side-head,
  .xc-side-overlay {
    display: none !important;
  }
}


/* ==========================================================================
   XCHAT MOBILE PRESENCE — FINAL ROW CONTRACT
   --------------------------------------------------------------------------
   One renderer for desktop/mobile:
     status | admin star | nick | INFO
   No alternative mobile user renderer.
   ========================================================================== */

@media (max-width: 700px) {
  .xc-side #usersBox .xc-live-user {
    display: flex !important;

    align-items: center !important;
    column-gap: 4px !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 38px !important;
    min-height: 38px !important;

    padding:
      4px
      5px
      4px
      6px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }

  .xc-side #usersBox .xc-live-status {
    grid-column: 1 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 22px !important;
    min-width: 22px !important;
    height: 24px !important;

    margin: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;
  }

  .xc-side #usersBox .xc-live-star {
    grid-column: 2 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 12px !important;
    min-width: 12px !important;

    margin: 0 !important;
  }

  /*
   * Обычный пользователь может не иметь звезды.
   * В таком случае пустой span занимает минимальную ширину,
   * чтобы ники не прыгали между строками.
   */
  .xc-side #usersBox
  .xc-live-user:not(.xc-live-user-admin)
  .xc-live-star {
    width: 0 !important;
    min-width: 0 !important;

    overflow: hidden !important;
  }

  .xc-side #usersBox .xc-live-user-nick {
    grid-column: 3 !important;

    display: block !important;

    flex: 0 1 auto !important;
    min-width: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: 15px !important;
    line-height: 28px !important;
  }

  .xc-side #usersBox .xc-live-user-info {
    grid-column: 4 !important;

    position: static !important;

    display: inline-flex !important;

    flex: 0 0 22px !important;
    margin-left: auto !important;

    align-items: center !important;
    justify-content: center !important;

    width: 22px !important;
    min-width: 22px !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    overflow: visible !important;

    z-index: auto !important;
  }

  .xc-side #usersBox .xc-live-user-info img {
    display: block !important;

    width: 12px !important;
    height: 11px !important;

    max-width: 12px !important;
    max-height: 11px !important;

    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Mobile presence: INFO is always anchored at the far right. */
@media (max-width: 700px) {
  .xc-side #usersBox .xc-live-user {
    padding-right: 34px !important;
  }

  .xc-side #usersBox .xc-live-user-info {
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }
}


/*
 * ============================================================================
 * XCHAT_MOBILE_NATIVE_SCROLL_V2
 * ============================================================================
 *
 * Phone chat scrolls natively, but the browser scrollbar is not part
 * of the mobile UI.  The floating ↓ button is created by mobile.js.
 *
 * Desktop/tablet presentation is intentionally untouched.
 */

@media (max-width: 700px) {

  /*
   * Native fast/inertial finger scrolling stays enabled.
   * Only the visual scrollbar is removed.
   */
  html body #messagesBox.xc-chat-window {
    overflow-x: hidden !important;
    overflow-y: auto !important;

    touch-action: pan-y !important;

    overscroll-behavior:
      contain !important;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:
      none !important;

    -ms-overflow-style:
      none !important;
  }


  html body #messagesBox.xc-chat-window::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;

    display: none !important;
  }


  /*
   * Telegram-like "back to newest" affordance,
   * visually kept inside the XChat blue theme.
   */
  .xc-mobile-jump-bottom {
    position: absolute !important;

    z-index: 120 !important;

    right:
      max(
        11px,
        env(safe-area-inset-right)
      )
      !important;

    bottom: 11px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    margin: 0 !important;
    padding: 0 0 3px !important;

    border:
      1px solid
      rgba(119, 167, 255, .78)
      !important;

    border-radius:
      50% !important;

    background:
      linear-gradient(
        180deg,
        rgba(22, 55, 116, .97) 0%,
        rgba(5, 22, 63, .98) 100%
      )
      !important;

    color:
      #eaf4ff !important;

    box-shadow:
      0 3px 12px
        rgba(0, 0, 0, .48),
      inset 0 1px 0
        rgba(255, 255, 255, .10)
      !important;

    font:
      700 25px/38px
      Arial,
      sans-serif
      !important;

    text-align:
      center !important;

    cursor: pointer;

    touch-action:
      manipulation !important;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
      translateY(7px)
      scale(.94);

    transition:
      opacity 140ms ease,
      transform 140ms ease,
      visibility 140ms linear
      !important;

    -webkit-tap-highlight-color:
      transparent;
  }


  .xc-mobile-jump-bottom.is-visible {
    opacity: .96;

    visibility: visible;

    pointer-events: auto;

    transform:
      translateY(0)
      scale(1);
  }


  .xc-mobile-jump-bottom:active {
    transform:
      translateY(1px)
      scale(.95)
      !important;

    background:
      #123d7a
      !important;
  }
}


@media
  (max-width: 700px)
  and
  (prefers-reduced-motion: reduce) {

  .xc-mobile-jump-bottom {
    transition:
      none !important;
  }
}


/*
 * ============================================================================
 * XCHAT_MOBILE_SMILE_DOCK_CSS_ONLY_V3
 * ============================================================================
 *
 * Safe phone implementation:
 *
 * - #smilePanel stays in document.body;
 * - no DOM moves;
 * - no JS observers;
 * - no visualViewport handlers;
 * - smiles-live-fix.js remains sole owner of open/close/touch logic.
 *
 * When smile runtime adds html.xc-smile-sheet-open:
 * - room reserves real space at bottom;
 * - footer temporarily hides;
 * - composer remains visible;
 * - existing fixed smile panel occupies reserved space.
 */

@media (max-width: 700px) {

  html {
    --xchat-phone-smile-dock-height:
      min(38vh, 280px);
  }


  /*
   * Modern mobile viewport units where supported.
   */
  @supports (height: 1dvh) {
    html {
      --xchat-phone-smile-dock-height:
        min(38dvh, 280px);
    }
  }


  /*
   * KEY IDEA:
   *
   * Do NOT move the panel into the grid.
   * Instead reduce the usable room height by exactly
   * the same amount occupied by the fixed smile panel.
   *
   * box-sizing:border-box is already part of mobile foundation,
   * so padding becomes reserved layout space.
   */
  html.xc-smile-sheet-open
  .xc-room-frame {
    padding-bottom:
      var(--xchat-phone-smile-dock-height)
      !important;
  }


  /*
   * On a phone the footer is secondary while choosing smiles.
   * Hiding it gives us:
   *
   * chat
   * composer
   * smile picker
   *
   * and keeps the message field directly above the picker.
   */
  html.xc-smile-sheet-open
  .xc-footer-menu {
    display:
      none !important;
  }


  /*
   * Old mobile picker used a dimming overlay.
   * Dock mode must feel like part of the chat instead.
   */
  html.xc-smile-sheet-open
  body
  .xc-smile-mobile-backdrop {
    display:
      none !important;

    visibility:
      hidden !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;
  }


  /*
   * Existing panel remains exactly where smile runtime created it:
   * document.body.
   *
   * We only override its phone geometry.
   */
  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-panel.xc-smile-mobile-sheet.is-open {
    position:
      fixed !important;

    top:
      auto !important;

    right:
      0 !important;

    bottom:
      0 !important;

    left:
      0 !important;

    transform:
      none !important;

    width:
      100vw !important;

    min-width:
      0 !important;

    max-width:
      100vw !important;

    height:
      var(--xchat-phone-smile-dock-height)
      !important;

    min-height:
      0 !important;

    max-height:
      var(--xchat-phone-smile-dock-height)
      !important;

    margin:
      0 !important;

    border-right:
      0 !important;

    border-bottom:
      0 !important;

    border-left:
      0 !important;

    border-radius:
      0 !important;

    box-sizing:
      border-box !important;

    z-index:
      10030 !important;

    overflow:
      hidden !important;

    background:
      linear-gradient(
        180deg,
        #081640 0%,
        #030b29 100%
      )
      !important;

    box-shadow:
      0 -5px 15px
        rgba(0, 0, 0, .28),
      inset 0 1px 0
        rgba(255, 255, 255, .05)
      !important;
  }


  /*
   * Header stays compact.
   * We do NOT touch smile item/image dimensions.
   */
  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-head {
    flex:
      0 0 36px !important;

    height:
      36px !important;

    min-height:
      36px !important;

    max-height:
      36px !important;

    padding:
      3px 8px
      !important;
  }


  /*
   * Only the smile list scrolls inside the reserved dock.
   * Existing pointer gesture logic remains untouched.
   */
  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-grid {
    flex:
      1 1 auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    touch-action:
      pan-y !important;

    overscroll-behavior:
      contain !important;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:
      none !important;

    -ms-overflow-style:
      none !important;
  }


  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-grid::-webkit-scrollbar {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;
  }
}


/*
 * ============================================================================
 * XCHAT_MOBILE_SMILE_CLOSE_V4
 * ============================================================================
 *
 * Compact close control integrated into the smile dock header.
 * Phone only. No smile runtime changes.
 */

@media (max-width: 700px) {

  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-head {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;

    padding:
      3px 7px
      3px 12px
      !important;
  }


  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-close {
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex:
      0 0 30px !important;

    width:
      30px !important;

    min-width:
      30px !important;

    max-width:
      30px !important;

    height:
      30px !important;

    min-height:
      30px !important;

    max-height:
      30px !important;

    margin:
      0 !important;

    padding:
      0 0 2px !important;

    border:
      1px solid
      rgba(132, 169, 238, .58)
      !important;

    border-radius:
      50% !important;

    background:
      rgba(20, 49, 104, .72)
      !important;

    color:
      #f2f6ff !important;

    box-shadow:
      inset 0 1px 0
        rgba(255, 255, 255, .08)
      !important;

    font:
      400 21px/28px
      Arial,
      sans-serif
      !important;

    text-align:
      center !important;

    cursor:
      pointer !important;

    touch-action:
      manipulation !important;

    -webkit-tap-highlight-color:
      transparent;

    transform:
      none !important;

    transition:
      background 100ms ease,
      border-color 100ms ease,
      transform 70ms ease
      !important;
  }


  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-close:active {
    background:
      rgba(48, 89, 164, .9)
      !important;

    border-color:
      rgba(178, 207, 255, .9)
      !important;

    transform:
      scale(.93)
      !important;
  }
}


/*
 * ============================================================================
 * XCHAT_MOBILE_SMILE_CLOSE_SQUARE_V5
 * ============================================================================
 *
 * Phone smile dock:
 * large square close control exactly as tall as the header row.
 */

@media (max-width: 700px) {

  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-head {
    position:
      relative !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    flex:
      0 0 46px !important;

    height:
      46px !important;

    min-height:
      46px !important;

    max-height:
      46px !important;

    padding:
      0 0 0 12px
      !important;

    gap:
      8px !important;
  }


  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-close {
    position:
      static !important;

    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    align-self:
      stretch !important;

    flex:
      0 0 46px !important;

    width:
      46px !important;

    min-width:
      46px !important;

    max-width:
      46px !important;

    height:
      46px !important;

    min-height:
      46px !important;

    max-height:
      46px !important;

    margin:
      0 !important;

    padding:
      0 0 3px !important;

    border:
      0 !important;

    border-left:
      1px solid
      rgba(105, 145, 219, .78)
      !important;

    border-radius:
      0 !important;

    background:
      linear-gradient(
        180deg,
        #18336f 0%,
        #0c2052 100%
      )
      !important;

    color:
      #ffffff !important;

    box-shadow:
      inset 0 1px 0
        rgba(255, 255, 255, .08),
      inset 1px 0 0
        rgba(255, 255, 255, .03)
      !important;

    font:
      700 30px/44px
      Arial,
      sans-serif
      !important;

    text-align:
      center !important;

    cursor:
      pointer !important;

    touch-action:
      manipulation !important;

    -webkit-tap-highlight-color:
      transparent;

    transform:
      none !important;

    transition:
      background 90ms ease,
      color 90ms ease,
      transform 70ms ease
      !important;
  }


  html.xc-smile-sheet-open
  body
  #smilePanel.xc-smile-mobile-sheet
  .xc-smile-close:active {
    background:
      linear-gradient(
        180deg,
        #28529b 0%,
        #153774 100%
      )
      !important;

    color:
      #ffffaa !important;

    transform:
      scale(.94)
      !important;
  }
}


/*
 * ============================================================================
 * XCHAT_PHONE_COMPOSER_V1
 * ============================================================================
 *
 * PHONE ONLY.
 *
 * #messageInput remains the authoritative data contract,
 * but the user edits through #mobileMessageEditor.
 *
 * Desktop never activates xc-mobile-composer-active.
 */

@media (max-width: 700px) {

  html.xc-mobile-composer-active
  #sendForm >
  #messageInput {
    display:
      none !important;
  }


  #mobileMessageEditor {
    display:
      none;
  }


  html.xc-mobile-composer-active
  #sendForm >
  #mobileMessageEditor {
    display:
      block !important;

    grid-column:
      2 !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    min-height:
      36px !important;

    height:
      auto !important;

    max-height:
      92px !important;

    box-sizing:
      border-box !important;

    margin:
      0 !important;

    padding:
      6px 7px !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    border:
      1px solid
      #536fae !important;

    border-radius:
      0 !important;

    outline:
      none !important;

    background:
      #00030f !important;

    color:
      #ffffff !important;

    caret-color:
      #ff9d00 !important;

    white-space:
      pre-wrap !important;

    overflow-wrap:
      anywhere !important;

    word-break:
      break-word !important;

    -webkit-user-select:
      text !important;

    user-select:
      text !important;

    touch-action:
      manipulation !important;

    scrollbar-width:
      none !important;

    -ms-overflow-style:
      none !important;

    -webkit-overflow-scrolling:
      touch;
  }


  html.xc-mobile-composer-active
  #sendForm >
  #mobileMessageEditor::-webkit-scrollbar {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;
  }


  html.xc-mobile-composer-active
  #sendForm >
  #mobileMessageEditor:focus {
    border-color:
      #dce8ff !important;

    box-shadow:
      inset 0 0 0 1px
      rgba(255, 255, 255, .30)
      !important;
  }


  html.xc-mobile-composer-active
  #sendForm >
  #mobileMessageEditor:empty::before {
    content:
      attr(data-placeholder);

    color:
      #6f7d9d;

    pointer-events:
      none;
  }


  /*
   * No target:
   * composer may grow vertically as text gains lines.
   */
  html.xc-mobile-composer-active
  #sendForm:not(:has(#targetBox.has-target)) {
    grid-template-rows:
      minmax(36px, auto)
      !important;
  }


  html.xc-mobile-composer-active
  #sendForm:not(:has(#targetBox.has-target))
  > #mobileMessageEditor {
    grid-row:
      1 !important;
  }


  /*
   * With target/private chip:
   * target stays first row,
   * growing editor becomes second row.
   */
  html.xc-mobile-composer-active
  #sendForm:has(#targetBox.has-target) {
    grid-template-rows:
      25px
      minmax(36px, auto)
      !important;

    min-height:
      67px !important;
  }


  html.xc-mobile-composer-active
  #sendForm:has(#targetBox.has-target)
  > #mobileMessageEditor {
    grid-row:
      2 !important;
  }


  /*
   * Side controls stay anchored to the bottom
   * when editor grows to 2–4 lines.
   */
  html.xc-mobile-composer-active
  #sendForm >
  #actionSelect,

  html.xc-mobile-composer-active
  #sendForm >
  #smileButton,

  html.xc-mobile-composer-active
  #sendForm >
  .xc-send-btn {
    align-self:
      end !important;
  }
}


/*
 * Hard desktop safety.
 * Even if a stale DOM node somehow survived a resize,
 * it can never replace the desktop input.
 */
@media (min-width: 701px) {

  #mobileMessageEditor,
  .xc-mobile-message-editor {
    display:
      none !important;
  }
}

/*
 * XCHAT_MOBILE_TARGET_SMILE_DOCK_FIX_V1
 *
 * XCHAT_MOBILE_SMILE_DOCK_CSS_ONLY_V3 owns the current phone smile geometry:
 * the smile sheet is docked at viewport bottom:0 and .xc-room-frame reserves
 * the required space.
 *
 * Legacy target CSS above still has a more specific :has(...) selector and
 * forces bottom:102px when a recipient is selected. That moves the sheet
 * upward over the two-row composer.
 *
 * Override only that exact state. No-target, tablet and desktop are untouched.
 */
@media (max-width: 700px) {
  html.xc-mobile-composer-active.xc-smile-sheet-open:has(#sendForm #targetBox.has-target)
  body
  #smilePanel.xc-smile-panel.xc-smile-mobile-sheet.is-open {
    bottom: 0 !important;
  }
}