/*
 * ==========================================================================
 * XChat — Composer UI
 * ==========================================================================
 *
 * Base presentation of the message composer.
 *
 * Behavior:
 *   chat/index.js
 *   chat/input.js
 *   chat/target.js
 *   smiles-live-fix.js
 *
 * Device geometry:
 *   mobile.css
 *   bottom-layout.css
 *
 * Load order:
 *   theme -> presence -> composer -> mobile -> bottom-layout
 * ==========================================================================
 */


/* ACTION */

#actionSelect {
  order: 1 !important;
  flex: 0 0 auto !important;
}


/* MESSAGE INPUT */

#messageInput,
#messageInput.xc-message-input,
#messageInput.xc-message-input-font-synced {
  order: 3 !important;
  flex: 1 1 auto !important;

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

  width: auto !important;
  height: 23px !important;
  max-height: none;

  margin-left: 0 !important;
  padding: 2px 5px !important;

  box-sizing: border-box !important;

  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 18px !important;

  font-synthesis: none !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
}


/* SEND */

.xc-send-btn {
  order: 5 !important;
  flex: 0 0 auto !important;

  height: 23px;

  border: 1px solid #8bb6ff;
  background: #4779be;
  color: #fff;

  font: bold 12px Arial, sans-serif;
  cursor: pointer;
}


/* SMILE BUTTON */

#smileButton,
#smileButton.xc-smile-btn,
.xc-smile-btn {
  appearance: none !important;

  display: inline-grid !important;
  place-items: center !important;

  order: 4 !important;
  flex: 0 0 auto !important;

  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 28px !important;

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

  overflow: hidden !important;

  border:
    1px solid rgba(126, 159, 235, .46)
    !important;
  border-radius: 7px !important;

  background:
    linear-gradient(
      180deg,
      rgba(29, 47, 105, .96),
      rgba(8, 20, 68, .98)
    )
    !important;

  color: #fff !important;

  cursor: pointer !important;

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

  transition:
    border-color 130ms ease,
    background 130ms ease,
    box-shadow 130ms ease,
    transform 130ms ease
    !important;
}


#smileButton img,
#smileButton.xc-smile-btn img,
.xc-smile-btn img {
  display: block !important;

  width: auto !important;
  max-width: 23px !important;

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

  margin: 0 !important;

  object-fit: contain !important;

  pointer-events: none !important;

  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, .28))
    !important;
}


#smileButton:hover,
#smileButton.xc-smile-btn:hover,
.xc-smile-btn:hover {
  border-color:
    rgba(255, 222, 107, .85)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(76, 66, 27, .98),
      rgba(37, 32, 10, .98)
    )
    !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 9px rgba(255, 214, 83, .25)
    !important;

  transform: translateY(-1px) !important;
}


#smileButton:active,
#smileButton.xc-smile-btn:active,
.xc-smile-btn:active {
  transform: translateY(0) !important;
}


#smileButton:focus-visible {
  outline:
    2px solid rgba(255, 224, 116, .92)
    !important;
  outline-offset: 2px !important;
}


/* SMILE PANEL */

.xc-smile-panel {
  position: fixed !important;
  z-index: 999999 !important;

  display: none !important;

  width: 390px !important;
  max-width:
    calc(100vw - 18px)
    !important;

  max-height: none !important;

  box-sizing: border-box !important;

  padding: 0 !important;

  overflow: hidden !important;

  border:
    1px solid rgba(127, 159, 231, .4)
    !important;
  border-radius: 14px !important;

  background:
    radial-gradient(
      circle at 12% -15%,
      rgba(72, 109, 198, .22),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(12, 25, 70, .985),
      rgba(3, 10, 38, .99)
    )
    !important;

  color: #eef3ff !important;

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

  font:
    12px Verdana,
    Arial,
    sans-serif
    !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}


.xc-smile-panel.is-open {
  display: block !important;

  animation:
    xc-smile-picker-in
    150ms ease-out
    !important;
}


@keyframes xc-smile-picker-in {
  from {
    opacity: 0;
    transform:
      translateY(5px)
      scale(.985);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}


.xc-smile-head {
  min-height: 39px !important;

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

  margin: 0 !important;
  padding: 7px 8px 7px 12px !important;

  border-bottom:
    1px solid rgba(255, 255, 255, .08)
    !important;

  background:
    linear-gradient(
      90deg,
      rgba(32, 55, 121, .74),
      rgba(16, 31, 80, .62) 58%,
      rgba(74, 53, 17, .2)
    )
    !important;

  color: #ffe88c !important;

  font-weight: 700 !important;
  letter-spacing: .015em !important;

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


.xc-smile-head span::before {
  content: "✦" !important;

  margin-right: 7px !important;

  color: rgba(255, 221, 100, .7) !important;

  font-size: 10px !important;
}


.xc-smile-close {
  appearance: none !important;

  width: 27px !important;
  height: 27px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border:
    1px solid rgba(255, 255, 255, .11)
    !important;
  border-radius: 8px !important;

  background:
    rgba(255, 255, 255, .045)
    !important;

  color:
    rgba(235, 241, 255, .76)
    !important;

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

  cursor: pointer !important;

  transition:
    color 120ms ease,
    border-color 120ms ease,
    background 120ms ease
    !important;
}


.xc-smile-close:hover {
  border-color:
    rgba(255, 220, 101, .42)
    !important;

  background:
    rgba(255, 220, 101, .09)
    !important;

  color: #fff !important;
}


/*
 * 49 historical smiles fit into 10 × 5.
 * Desktop does not need an inner scrollbar.
 */

.xc-smile-grid {
  display: grid !important;

  grid-template-columns:
    repeat(10, 32px)
    !important;

  grid-auto-rows: 32px !important;

  justify-content: center !important;

  gap: 4px !important;

  width: 100% !important;

  max-height: none !important;

  padding: 9px !important;

  box-sizing: border-box !important;

  overflow: visible !important;

  background:
    linear-gradient(
      180deg,
      rgba(3, 9, 34, .34),
      rgba(0, 4, 20, .28)
    )
    !important;
}


.xc-smile-item {
  appearance: none !important;

  width: 32px !important;
  height: 32px !important;

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

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

  overflow: hidden !important;

  border:
    1px solid rgba(111, 143, 218, .16)
    !important;
  border-radius: 7px !important;

  background:
    linear-gradient(
      180deg,
      rgba(29, 48, 104, .55),
      rgba(10, 21, 67, .46)
    )
    !important;

  cursor: pointer !important;

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

  transition:
    transform 110ms ease,
    border-color 110ms ease,
    background 110ms ease,
    box-shadow 110ms ease
    !important;
}


.xc-smile-item:hover {
  z-index: 2 !important;

  border-color:
    rgba(255, 221, 102, .62)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(112, 88, 25, .58),
      rgba(54, 40, 7, .56)
    )
    !important;

  box-shadow:
    0 0 8px rgba(255, 211, 72, .18),
    inset 0 1px 0 rgba(255, 255, 255, .07)
    !important;

  transform:
    translateY(-1px)
    scale(1.08)
    !important;
}


.xc-smile-item:active {
  transform: scale(.96) !important;
}


.xc-smile-item:focus-visible {
  outline:
    2px solid rgba(255, 224, 116, .9)
    !important;

  outline-offset: 1px !important;
}


.xc-smile-item img {
  display: block !important;

  width: auto !important;
  max-width: 27px !important;

  height: auto !important;
  max-height: 27px !important;

  margin: 0 auto !important;

  object-fit: contain !important;

  vertical-align: middle !important;

  pointer-events: none !important;

  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, .2))
    !important;
}


/* FORCE-OPEN SMILE STATE */

#smilePanel.xc-smile-force-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: fixed !important;
  z-index: 999999 !important;

  width: 390px !important;
  max-width:
    calc(100vw - 18px)
    !important;

  min-height: 0 !important;
  max-height: none !important;

  overflow: hidden !important;
}


#smilePanel.xc-smile-force-open .xc-smile-head {
  display: flex !important;
}


#smilePanel.xc-smile-force-open .xc-smile-grid {
  display: grid !important;

  grid-template-columns:
    repeat(10, 32px)
    !important;

  grid-auto-rows: 32px !important;

  gap: 4px !important;

  overflow: visible !important;
}


#smilePanel.xc-smile-force-open .xc-smile-item {
  display: inline-flex !important;

  width: 32px !important;
  height: 32px !important;

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


#smilePanel.xc-smile-force-open img {
  display: block !important;

  max-width: 27px !important;
  max-height: 27px !important;
}


/* MOBILE SMILE SHEET */

@media (max-width: 600px) {
  .xc-smile-panel,
  #smilePanel.xc-smile-force-open {
    width:
      min(390px, calc(100vw - 12px))
      !important;

    max-width:
      calc(100vw - 12px)
      !important;

    border-radius: 14px !important;
  }


  .xc-smile-grid,
  #smilePanel.xc-smile-force-open .xc-smile-grid {
    grid-template-columns:
      repeat(7, 34px)
      !important;

    grid-auto-rows: 34px !important;

    gap: 5px !important;

    justify-content: center !important;

    max-height:
      min(292px, 48vh)
      !important;

    padding: 9px !important;

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

    scrollbar-width: thin !important;
    scrollbar-color:
      rgba(255, 220, 99, .3)
      transparent
      !important;
  }


  .xc-smile-grid::-webkit-scrollbar {
    width: 4px;
  }


  .xc-smile-grid::-webkit-scrollbar-track {
    background: transparent;
  }


  .xc-smile-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
      rgba(255, 220, 99, .28);
  }


  .xc-smile-item,
  #smilePanel.xc-smile-force-open .xc-smile-item {
    width: 34px !important;
    height: 34px !important;
  }


  .xc-smile-item img,
  #smilePanel.xc-smile-force-open img {
    max-width: 28px !important;
    max-height: 28px !important;
  }


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

    height: 29px !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  .xc-smile-panel,
  .xc-smile-panel *,
  #smileButton {
    animation: none !important;
    transition: none !important;
  }
}


/* TARGET BASE */

#targetBox {
  display: none !important;

  position: static !important;
  float: none !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 260px !important;

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

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

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

  overflow: visible !important;
  vertical-align: middle !important;

  z-index: 2 !important;
}

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

#targetBox:empty {
  display: none !important;
}


/* TARGET CHIP */

#targetChip.xc-target-chip {
  box-sizing: border-box !important;

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

  gap: 4px !important;

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

  max-width: 220px !important;

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

  border: 1px solid #8c8cff !important;
  background: #171661 !important;
  color: #fff !important;

  cursor: pointer !important;

  font: bold 12px Verdana, Arial, sans-serif !important;
  line-height: 14px !important;

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

  transition: none !important;
}

#targetChip.xc-target-chip.is-private {
  border-color: #ff9abb !important;
  background: #7b073f !important;
  color: #ffe6f0 !important;

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

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

  color: #ffff66 !important;
  font-weight: bold !important;
}

#targetChip.is-private .xc-target-mode {
  color: #ffd5e4 !important;
  text-shadow: 0 0 4px #000 !important;
}

#targetChip .xc-target-name {
  display: inline-block !important;

  max-width: 145px !important;

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


/* TARGET CLOSE */

.xc-target-chip-close {
  display: inline-block !important;

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

  margin-left: 2px !important;

  border: 1px solid #ffb0b0 !important;
  background: #5b0000 !important;
  color: #fff !important;

  font: bold 10px Verdana, Arial, sans-serif !important;
  line-height: 10px !important;

  text-align: center !important;
}

#targetChipClose {
  flex: 0 0 auto !important;

  margin-left: 2px !important;

  color: #ffdede !important;
  font-weight: bold !important;
}


/* CURRENT TARGET ROW */

.xc-input-row-target-v10 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;

  gap: 4px !important;

  width: 100% !important;
  box-sizing: border-box !important;
}

.xc-input-row-target-v10 > select,
.xc-input-row-target-v10 #actionSelect {
  order: 1 !important;
  flex: 0 0 auto !important;
}

.xc-input-row-target-v10 #targetBox {
  order: 2 !important;

  display: none !important;

  position: static !important;
  float: none !important;

  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 230px !important;

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

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

  overflow: visible !important;
  vertical-align: middle !important;

  z-index: 1 !important;
}

.xc-input-row-target-v10 #targetBox.has-target,
.xc-input-row-target-v10 #targetBox.xc-target.has-target {
  display: inline-flex !important;
  align-items: center !important;
}

.xc-input-row-target-v10 #targetBox:empty {
  display: none !important;
}

.xc-input-row-target-v10 #messageInput {
  order: 3 !important;
  flex: 1 1 auto !important;

  min-width: 120px !important;
  width: auto !important;

  margin-left: 0 !important;
}

.xc-input-row-target-v10 #smileButton,
.xc-input-row-target-v10 .xc-smile-btn {
  order: 4 !important;
  flex: 0 0 auto !important;
}

.xc-input-row-target-v10 .xc-send-btn {
  order: 5 !important;
  flex: 0 0 auto !important;
}


/*
 * xchat-smile-picker-final-v7-grid
 *
 * Straight desktop grid:
 *
 * 7 columns x 65px
 * gap 4px
 * panel ~500px
 *
 * Smile images keep their REAL physical dimensions.
 */

html body #smilePanel.xc-smile-panel,
html body #smilePanel.xc-smile-force-open {
  width:
    min(
      500px,
      calc(100vw - 16px)
    )
    !important;

  max-width:
    calc(100vw - 16px)
    !important;

  max-height:
    330px
    !important;

  box-sizing:
    border-box
    !important;

  overflow:
    hidden
    !important;
}


html body #smilePanel.xc-smile-panel.is-open,
html body #smilePanel.xc-smile-force-open {
  display:
    flex
    !important;

  flex-direction:
    column
    !important;
}


html body #smilePanel .xc-smile-head {
  flex:
    0 0 auto
    !important;

  min-height:
    42px
    !important;
}


@media (min-width: 1025px) {

  html body #smilePanel.xc-smile-panel.is-open,
  html body #smilePanel.xc-smile-force-open {
    position:
      fixed
      !important;

    z-index:
      999999
      !important;
  }


  html body #smilePanel .xc-smile-grid,
  html body #smilePanel.xc-smile-force-open .xc-smile-grid {
    display:
      grid
      !important;

    grid-template-columns:
      repeat(7, 65px)
      !important;

    grid-auto-rows:
      65px
      !important;

    gap:
      4px
      !important;

    padding:
      10px
      !important;

    margin:
      0
      !important;

    align-items:
      center
      !important;

    justify-items:
      center
      !important;

    align-content:
      start
      !important;

    justify-content:
      start
      !important;

    min-height:
      0
      !important;

    max-height:
      280px
      !important;

    box-sizing:
      border-box
      !important;

    overflow-x:
      hidden
      !important;

    overflow-y:
      auto
      !important;

    overscroll-behavior:
      contain;
  }


  html body #smilePanel .xc-smile-item,
  html body #smilePanel.xc-smile-force-open .xc-smile-item {
    display:
      grid
      !important;

    place-items:
      center
      !important;

    width:
      65px
      !important;

    height:
      65px
      !important;

    min-width:
      65px
      !important;

    min-height:
      65px
      !important;

    max-width:
      65px
      !important;

    max-height:
      65px
      !important;

    margin:
      0
      !important;

    padding:
      3px
      !important;

    box-sizing:
      border-box
      !important;

    overflow:
      visible
      !important;
  }


  /*
   * Never resize a smile asset.
   */
  html body #smilePanel .xc-smile-item img,
  html body #smilePanel.xc-smile-force-open .xc-smile-item img {
    display:
      block
      !important;

    width:
      auto
      !important;

    height:
      auto
      !important;

    min-width:
      0
      !important;

    min-height:
      0
      !important;

    max-width:
      none
      !important;

    max-height:
      none
      !important;

    object-fit:
      none
      !important;

    margin:
      auto
      !important;
  }

}


/*
 * xchat-smile-touch-scroll-v2
 *
 * Mobile/tablet picker:
 * вертикальный gesture внутри smile list принадлежит
 * браузерному scroll, даже если палец начал движение
 * непосредственно поверх картинки смайла.
 */
@media (max-width: 1024px) {

  html body #smilePanel .xc-smile-grid,
  html body #smilePanel.xc-smile-force-open .xc-smile-grid,
  html body #smilePanel.xc-smile-mobile-sheet .xc-smile-grid,

  html body #smilePanel .xc-smile-item,
  html body #smilePanel.xc-smile-force-open .xc-smile-item,
  html body #smilePanel.xc-smile-mobile-sheet .xc-smile-item {

    touch-action:
      pan-y
      !important;
  }


  html body #smilePanel .xc-smile-grid,
  html body #smilePanel.xc-smile-force-open .xc-smile-grid,
  html body #smilePanel.xc-smile-mobile-sheet .xc-smile-grid {

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }
}