/*
 * XCHAT_GLOBAL_TOOLTIPS_V1
 *
 * Immediate desktop hover tooltips.
 * Touch UI intentionally has no custom tooltip surface.
 */

.xc-global-tooltip {
  position:
    fixed;

  z-index:
    2147483000;

  box-sizing:
    border-box;

  max-width:
    min(
      320px,
      calc(100vw - 16px)
    );

  padding:
    6px 9px 7px;

  border:
    1px solid
    rgba(
      88,
      173,
      255,
      0.72
    );

  border-top-color:
    rgba(
      255,
      218,
      92,
      0.95
    );

  border-radius:
    3px;

  background:
    linear-gradient(
      180deg,
      rgba(
        19,
        35,
        94,
        0.98
      ) 0%,
      rgba(
        5,
        9,
        43,
        0.98
      ) 100%
    );

  box-shadow:
    0 7px 24px
      rgba(
        0,
        0,
        0,
        0.55
      ),
    inset 0 0 0 1px
      rgba(
        255,
        255,
        255,
        0.045
      ),
    0 0 10px
      rgba(
        56,
        141,
        255,
        0.12
      );

  color:
    #eef7ff;

  font-family:
    Verdana,
    Arial,
    sans-serif;

  font-size:
    11px;

  font-weight:
    400;

  line-height:
    1.35;

  letter-spacing:
    0.01em;

  text-align:
    left;

  white-space:
    normal;

  overflow-wrap:
    anywhere;

  pointer-events:
    none;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(2px)
    scale(0.985);

  transform-origin:
    center;

  transition:
    opacity 65ms linear,
    transform 65ms ease-out,
    visibility 0s linear 65ms;
}


.xc-global-tooltip::before {
  content:
    "";

  position:
    absolute;

  top:
    1px;

  left:
    7px;

  right:
    7px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        219,
        91,
        0.45
      ),
      rgba(
        89,
        193,
        255,
        0.35
      ),
      transparent
    );

  pointer-events:
    none;
}


.xc-global-tooltip.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0)
    scale(1);

  transition-delay:
    0s;
}


@media
  (hover: none),
  (pointer: coarse) {

  .xc-global-tooltip {
    display:
      none !important;
  }
}


@media
  (prefers-reduced-motion: reduce) {

  .xc-global-tooltip {
    transition:
      none;
  }
}