/*
 * XCHAT_VIP_HEADER_MESSAGE_STYLE_V2_3
 */

.xc-top-empty {
  position: relative;
  overflow: hidden;
}


.xc-vip-header {
  width: 100%;
  height: 100%;

  min-width: 0;

  box-sizing:
    border-box;

  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    0 12px;

  overflow: hidden;

  font:
    12px Verdana,
    Arial,
    sans-serif;
}


.xc-vhm-display {
  flex:
    1 1 auto;

  min-width: 0;

  display: flex;
  align-items: center;

  gap: 4px;

  overflow: hidden;

  white-space:
    nowrap;
}


.xc-vhm-star {
  flex:
    0 0 auto;

  color:
    #ffb52e;

  text-shadow:
    0 0 4px
    rgba(
      255,
      181,
      46,
      .3
    );
}


.xc-vhm-nick {
  flex:
    0 0 auto;

  max-width:
    130px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


.xc-vhm-colon {
  flex:
    0 0 auto;

  color:
    #8394cf;
}


.xc-vhm-text {
  min-width: 0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  color:
    #eef0ff;
}


.xc-vhm-edit {
  flex:
    0 0 auto;

  margin-left:
    auto;

  padding:
    2px;

  border: 0;

  background:
    transparent;

  color:
    #8395d4;

  font:
    10px Verdana,
    Arial,
    sans-serif;

  cursor:
    pointer;
}


.xc-vhm-edit:hover {
  color:
    #ffffff;

  text-decoration:
    underline;
}


/* ========================================
   INLINE EDITOR
   ======================================== */

.xc-vhm-form {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;
}


.xc-vhm-editor-label {
  flex:
    0 0 auto;

  color:
    #ffb52e;

  font:
    bold 10px Verdana,
    Arial,
    sans-serif;
}


.xc-vhm-input {
  flex:
    1 1 auto;

  min-width:
    0;

  height:
    25px;

  box-sizing:
    border-box;

  padding:
    3px 6px;

  border:
    1px solid
    #526fc3;

  outline:
    none;

  background:
    rgba(
      0,
      0,
      35,
      .8
    );

  color:
    #ffffff;

  font:
    11px Verdana,
    Arial,
    sans-serif;
}


.xc-vhm-input:focus {
  border-color:
    #91aaff;
}


.xc-vhm-save,
.xc-vhm-cancel {
  flex:
    0 0 auto;

  height:
    25px;

  box-sizing:
    border-box;

  border:
    1px solid
    #526fc3;

  background:
    #111d54;

  color:
    #e6eaff;

  font:
    10px Verdana,
    Arial,
    sans-serif;

  cursor:
    pointer;
}


.xc-vhm-save {
  padding:
    0 8px;
}


.xc-vhm-cancel {
  width:
    25px;

  padding:
    0;

  font-size:
    16px;
}


.xc-vhm-save:hover,
.xc-vhm-cancel:hover {
  border-color:
    #91aaff;

  color:
    #ffffff;
}


/*
 * Existing mobile.css already hides
 * .xc-top-empty. This is additional
 * protection.
 */
@media (max-width: 760px) {

  .xc-vip-header {
    display:
      none !important;
  }
}


/*
 * XCHAT_VIP_HEADER_MESSAGE_TTL_STYLE_V2_4
 *
 * Visible only to the VIP owner because
 * frontend only renders it when canEdit=true.
 */

.xc-vhm-expiry {
  flex:
    0 0 auto;

  margin-left:
    auto;

  color:
    #7184c8;

  font:
    9px Verdana,
    Arial,
    sans-serif;

  white-space:
    nowrap;
}


.xc-vhm-expiry.is-expired {
  color:
    #a17979;
}


.xc-vhm-expiry +
.xc-vhm-edit {
  margin-left:
    2px;
}

/*
 * XCHAT_VIP_HEADER_REAL_NICK_STYLE_V2_5
 *
 * VIP GIF nickname inside the compact top line.
 * Existing vip-nick.css still owns loading/fallback behaviour.
 */
.xc-vhm-nick .xc-vip-nick-visual {
  max-width: 130px;
  vertical-align: middle;
}

.xc-vhm-nick .xc-vip-nick-image {
  max-width: 130px;
  max-height: 18px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}