/*
 * XCHAT_VIP_NICK_FRONTEND_STAGE2B_CORE_V1_2
 */

.xc-vip-nick-visual {
  display: inline-block;
  max-width: 100%;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

.xc-vip-nick-fallback {
  display: inline;
}

.xc-vip-nick-image {
  display: none;
  width: auto;
  height: auto;
  max-width: 100%;
  border: 0;
  object-fit: contain;
  vertical-align: middle;
  pointer-events: none;
}

.xc-vip-nick-visual.is-loaded
.xc-vip-nick-fallback {
  display: none;
}

.xc-vip-nick-visual.is-loaded
.xc-vip-nick-image {
  display: inline-block;
}


/* Right users */
#usersBox
.xc-vip-nick-context-presence
.xc-vip-nick-image {
  max-height: 22px;
}


/* Chat */
#messagesBox
.xc-vip-nick-context-chat
.xc-vip-nick-image,
#messagesBox
.xc-vip-nick-context-chat-target
.xc-vip-nick-image {
  max-height: 26px;
  max-width: 210px;
}


/* ENTER / LEAVE */
#messagesBox
.xc-vip-nick-context-chat-presence
.xc-vip-nick-image {
  max-height: 24px;
  max-width: 210px;
}


/* Quiz TOP */
#messagesBox
.xc-vip-nick-context-quiz
.xc-vip-nick-image {
  max-height: 24px;
  max-width: 210px;
}


/* INFO */
#xchatInfoPopup
.xc-vip-nick-context-info
.xc-vip-nick-image {
  max-height: 40px;
  max-width: 210px;
}


/* Board */
.xboard-nick
.xc-vip-nick-context-board
.xc-vip-nick-image {
  max-height: 28px;
  max-width: 210px;
}


/* Mail */
.xpm-from
.xc-vip-nick-context-mail
.xc-vip-nick-image,
.xpm-detail-nick
.xc-vip-nick-context-mail
.xc-vip-nick-image {
  max-height: 24px;
  max-width: 210px;
}


/*
 * Existing mobile user row = 38px.
 * VIP nick must remain inside it.
 */
@media (max-width: 700px) {
  #usersBox
  .xc-live-user-nick
  .xc-vip-nick-visual {
    display: block;
    max-width: 100%;
    overflow: hidden;
  }

  #usersBox
  .xc-vip-nick-context-presence
  .xc-vip-nick-image {
    max-height: 22px;
    max-width: 100%;
  }
}

/*
 * XCHAT_VIP_NICK_OWNER_SETTINGS_UI_V1
 */

#xps-root
.xps-vip-nick-row > span {
  min-width: 0;
}

#xps-root
.xps-vip-nick-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 10px;
  white-space: nowrap;
}

#xps-root
.xps-vip-nick-preview {
  display: inline-block;
  min-width: 0;
  vertical-align: middle;
}

#xps-root
.xps-vip-nick-preview
.xc-vip-nick-image {
  max-width: 210px;
  max-height: 28px;
}

#xps-root
.xps-vip-nick-file {
  margin-left: 7px;
  font-size: 10px;
  opacity: .62;
}

/*
 * XCHAT_VIP_NICK_ADMIN_ASSIGN_UI_V1_1
 */

.xadmin-vipnick-row {
  align-items: center;
}

.xadmin-vipnick-current {
  min-width: 0;
}

#xadminVipNickPreview {
  display: inline-block;
  margin-left: 7px;
  vertical-align: middle;
}

#xadminVipNickPreview img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 25px;
  vertical-align: middle;
}

.xadmin-vipnick-actions {
  display: flex;
  gap: 5px;
}

.xadmin-vipnick-picker {
  margin: 6px 0 10px;
  padding: 8px;
  border: 1px solid rgba(130, 170, 230, .28);
  background: rgba(7, 14, 27, .94);
}

.xadmin-vipnick-picker[hidden] {
  display: none !important;
}

.xadmin-vipnick-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

#xadminVipNickSearch {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 7px;
}

.xadmin-vipnick-results {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(110px, 1fr)
    );
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}

.xadmin-vipnick-item {
  min-width: 0;
  padding: 5px;
  overflow: hidden;
}

.xadmin-vipnick-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  margin-bottom: 4px;
}

.xadmin-vipnick-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 32px;
}

.xadmin-vipnick-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.xadmin-vipnick-catalog-status,
.xadmin-vipnick-empty {
  padding-top: 6px;
  opacity: .7;
  font-size: 10px;
}

@media (max-width: 700px) {
  .xadmin-vipnick-actions {
    flex-wrap: wrap;
  }

  .xadmin-vipnick-results {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

/* =========================================================
 * XCHAT_GRAPHIC_NICK_BASELINE_V2
 *
 * ONE common vertical-alignment contract for graphical nicks
 * rendered inside the desktop chat stream.
 *
 * Applies to:
 *   - ordinary sender
 *   - addressed target
 *   - enter / leave / timeout system lines
 *   - quiz TOP / quiz message presentation
 *
 * Does NOT:
 *   - change identity
 *   - change GIF asset
 *   - change per-context max-height
 *   - use nickname-specific offsets
 *   - affect usersBox / INFO / board / mail
 * ========================================================= */


/*
 * The visual itself becomes a real inline flex box.
 *
 * Its outer box participates in the surrounding text line,
 * while the GIF is centered inside that box rather than
 * relying on the image's native baseline.
 */
#messagesBox
.xc-vip-nick-visual {
  display: inline-flex;

  align-items: flex-end;
  justify-content: flex-start;

  max-width: 100%;

  line-height: 1;

  vertical-align: text-bottom;

  white-space: nowrap;
}


/*
 * Loaded image is a block inside the inline-flex visual.
 *
 * This removes the image-descender/baseline gap that normal
 * inline images inherit from text layout.
 */
#messagesBox
.xc-vip-nick-visual.is-loaded
.xc-vip-nick-image {
  display: block;

  flex:
    0 0 auto;

  margin: 0;
  padding: 0;

  vertical-align: initial;
}


/*
 * Chat-stream contexts share one vertical relationship
 * to surrounding textual content.
 *
 * Existing max-heights remain authoritative:
 *
 *   chat        26px
 *   chat-target 26px
 *   presence    24px
 *   quiz        24px
 */
/*
 * XCHAT_GRAPHIC_NICK_HYBRID_ALIGN_V5_3
 *
 * Ordinary chat, target and presence lines:
 * graphical nick sits on the text bottom.
 *
 * Quiz TOP:
 * graphical nick is centered inside its ranking row.
 *
 * No pixel nudges.
 * No usernames.
 * No asset-specific rules.
 */
#messagesBox
.xc-vip-nick-context-chat,
#messagesBox
.xc-vip-nick-context-chat-target,
#messagesBox
.xc-vip-nick-context-chat-presence {
  position: relative;

  top: 0;

  vertical-align: text-bottom;
}


#messagesBox
.xc-vip-nick-context-quiz {
  position: relative;

  top: 0;

  vertical-align: middle;
}


/*
 * Ordinary chat sender already has a semantic wrapper that
 * keeps the colon attached to the graphical nick.
 *
 * Make that wrapper use the same middle alignment contract.
 */
#messagesBox
.xc-chat-sender-label {
  display: inline-flex;

  align-items: flex-end;

  line-height: inherit;

  vertical-align: text-bottom;
}


#messagesBox
.xc-chat-sender-label
> .xc-nick {
  display: inline-flex;

  align-items: center;

  line-height: 1;
}


/*
 * Colon should center with the graphical sender instead of
 * carrying the old +1px baseline compensation.
 */
#messagesBox
.xc-chat-sender-label
.xc-chat-sender-colon {
  display: inline-flex;

  align-items: center;

  line-height: 1;

  transform: none;
}


/*
 * TOP nick is normally an inline text span.
 * When it contains a graphical presentation, make the nick
 * itself a vertically centered inline flex participant.
 *
 * :has() is supported by current Chromium used by XChat.
 */
#messagesBox
.xc-quiz-top-nick:has(
  .xc-vip-nick-visual
) {
  display: inline-flex;

  align-items: center;

  vertical-align: middle;

  line-height: inherit;
}


/*
 * ENTER / LEAVE / TIMEOUT lines use .xc-system-nick.
 * Only graphical system nicks receive flex centering;
 * ordinary textual system nicks are untouched.
 */
#messagesBox
.xc-system-nick:has(
  .xc-vip-nick-visual
) {
  display: inline-flex;

  align-items: flex-end;

  vertical-align: text-bottom;

  line-height: inherit;
}


/*
 * Target nick in ordinary messages.
 */
#messagesBox
.xc-target-nick:has(
  .xc-vip-nick-visual
) {
  display: inline-flex;

  align-items: flex-end;

  vertical-align: text-bottom;

  line-height: inherit;
}

/*
 * XCHAT_GRAPHIC_NICKS_GLOBAL_VIEWER_GATE_V1
 *
 * Viewer-only preference.
 *
 * A graphical nickname always contains its canonical textual
 * fallback. When graphics are disabled we reveal that fallback
 * even for DOM which was rendered BEFORE the setting changed.
 *
 * Turning graphics back on removes these overrides and the
 * existing is-loaded behaviour becomes authoritative again.
 */
html[data-xchat-graphic-nicks="off"]
.xc-vip-nick-visual
.xc-vip-nick-image {
  display: none;
}

html[data-xchat-graphic-nicks="off"]
.xc-vip-nick-visual
.xc-vip-nick-fallback {
  display: inline;
  visibility: visible;
  opacity: 1;
}

/*
 * XCHAT_GRAPHIC_NICK_EXCLUSIVE_VISIBILITY_V2
 * ============================================================
 *
 * nick-presentation.js intentionally keeps BOTH:
 *
 *   .xc-vip-nick-fallback
 *   .xc-vip-nick-image
 *
 * in DOM.
 *
 * The viewer gate MUST make them mutually exclusive.
 *
 * data-xchat-graphic-nicks="on":
 *   loaded image -> image only
 *   loading      -> fallback only
 *   error        -> fallback only
 *
 * data-xchat-graphic-nicks="off":
 *   fallback only
 *
 * No nickname-specific rules.
 * ============================================================
 */


/* ============================================================
 * GRAPHICS ON — DEFAULT / IMAGE STILL LOADING
 * ============================================================ */

html[data-xchat-graphic-nicks="on"]
.xc-vip-nick-visual
> .xc-vip-nick-fallback {
  display: inline !important;
  visibility: visible !important;
}


html[data-xchat-graphic-nicks="on"]
.xc-vip-nick-visual
> .xc-vip-nick-image {
  display: none !important;
  visibility: hidden !important;
}


/* ============================================================
 * GRAPHICS ON — IMAGE SUCCESSFULLY LOADED
 * ============================================================ */

html[data-xchat-graphic-nicks="on"]
.xc-vip-nick-visual.is-loaded:not(.is-error)
> .xc-vip-nick-fallback {
  display: none !important;
  visibility: hidden !important;
}


html[data-xchat-graphic-nicks="on"]
.xc-vip-nick-visual.is-loaded:not(.is-error)
> .xc-vip-nick-image {
  display: inline-block !important;
  visibility: visible !important;
}


/* ============================================================
 * GRAPHICS ON — IMAGE ERROR
 * ============================================================ */

html[data-xchat-graphic-nicks="on"]
.xc-vip-nick-visual.is-error
> .xc-vip-nick-fallback {
  display: inline !important;
  visibility: visible !important;
}


html[data-xchat-graphic-nicks="on"]
.xc-vip-nick-visual.is-error
> .xc-vip-nick-image {
  display: none !important;
  visibility: hidden !important;
}


/* ============================================================
 * GRAPHICS OFF — ALWAYS TEXT
 * ============================================================ */

html[data-xchat-graphic-nicks="off"]
.xc-vip-nick-visual
> .xc-vip-nick-fallback {
  display: inline !important;
  visibility: visible !important;
}


html[data-xchat-graphic-nicks="off"]
.xc-vip-nick-visual
> .xc-vip-nick-image {
  display: none !important;
  visibility: hidden !important;
}


/* END XCHAT_GRAPHIC_NICK_EXCLUSIVE_VISIBILITY_V2 */