/* ==========================================================
   FROZENTHRONE TAVERN CHAT V2
   ========================================================== */

.member-wall {
  width: calc(100% - 32px);
  max-width: 1320px;
  margin: 18px auto 26px;
  overflow: hidden;

  border:
    1px solid
    rgba(112, 203, 255, .3);

  border-radius: 8px;

  background:
    radial-gradient(
      circle at 12% 0,
      rgba(39, 151, 215, .14),
      transparent 34%
    ),
    linear-gradient(
      155deg,
      rgba(5, 28, 47, .98),
      rgba(2, 13, 24, .99)
    );

  box-shadow:
    0 14px 34px
    rgba(0, 0, 0, .32);

  color: #dff5ff;

  font-size: 13px;
}


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

.member-wall-head {
  min-height: 58px;

  padding: 10px 14px;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 14px;

  border-bottom:
    1px solid
    rgba(112, 203, 255, .22);

  background:
    linear-gradient(
      90deg,
      rgba(13, 65, 96, .82),
      rgba(4, 25, 42, .9)
    );
}

.member-wall-head .eyebrow {
  margin: 0;

  color: #dabe6d;

  font-size: 9px;

  letter-spacing: 1.2px;
}

.member-wall-head h2 {
  margin: 1px 0 0;

  color: #f0faff;

  font-size: 18px;
}

.member-wall-head >
div:last-child {
  text-align: right;
}

.member-wall-head
[data-wall-count] {
  display: block;

  margin-top: 3px;

  color: #8caabd;

  font-size: 10px;
}

.member-wall-badge {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 3px 7px;

  border:
    1px solid
    rgba(112, 203, 255, .3);

  border-radius: 999px;

  color: #8bd7fa;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .5px;

  text-transform:
    uppercase;
}


/* ---------- Chat Layout ---------- */

.member-wall-grid,
.member-wall-site
.member-wall-grid {
  display: flex;

  flex-direction: column;
}


/* ---------- Scrollable History ---------- */

.member-wall-list {
  min-width: 0;

  height:
    clamp(
      340px,
      48vh,
      520px
    );

  padding: 8px 10px;

  overflow-y: auto;

  overflow-x: hidden;

  scroll-behavior: smooth;

  overscroll-behavior:
    contain;

  background:
    linear-gradient(
      180deg,
      rgba(0, 7, 14, .72),
      rgba(1, 13, 23, .84)
    );

  scrollbar-width: thin;

  scrollbar-color:
    rgba(103, 192, 242, .65)
    rgba(0, 8, 15, .8);
}

.member-wall-list::-webkit-scrollbar {
  width: 9px;
}

.member-wall-list::-webkit-scrollbar-track {
  background:
    rgba(0, 8, 15, .78);
}

.member-wall-list::-webkit-scrollbar-thumb {
  border:
    2px solid
    rgba(0, 8, 15, .78);

  border-radius: 999px;

  background:
    rgba(103, 192, 242, .58);
}


/* ---------- Older History ---------- */

.member-wall-history {
  padding: 5px 0 10px;

  display: flex;

  justify-content: center;
}

.member-wall-load-older {
  padding: 6px 12px;

  border:
    1px solid
    rgba(112, 203, 255, .28);

  border-radius: 999px;

  background:
    rgba(4, 28, 47, .92);

  color: #9fdfff;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .4px;

  cursor: pointer;
}

.member-wall-load-older:hover {
  border-color:
    rgba(143, 220, 255, .7);

  background:
    rgba(10, 65, 96, .92);

  color: #fff;
}

.member-wall-load-older:disabled {
  opacity: .55;

  cursor: wait;
}


/* ---------- Chat Messages ---------- */

.member-wall-message {
  position: relative;

  min-width: 0;

  padding: 8px 10px;

  display: grid;

  grid-template-columns:
    34px minmax(0, 1fr);

  grid-template-rows:
    auto auto;

  column-gap: 9px;

  row-gap: 3px;

  border-bottom:
    1px solid
    rgba(112, 203, 255, .09);

  transition:
    background .15s ease;
}

.member-wall-message:hover {
  background:
    rgba(52, 148, 205, .055);
}

.member-wall-message.own {
  border-left:
    2px solid
    rgba(91, 194, 248, .65);

  background:
    linear-gradient(
      90deg,
      rgba(15, 85, 123, .16),
      transparent 52%
    );
}

.member-wall-message.pinned {
  border-left:
    3px solid #dabe6d;

  background:
    linear-gradient(
      90deg,
      rgba(104, 73, 11, .18),
      transparent 58%
    );
}


/* ---------- Identity ---------- */

.member-wall-identity {
  display: contents;
}

.member-wall-avatar {
  grid-column: 1;

  grid-row: 1 / 3;

  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  align-self: start;

  border:
    1px solid
    rgba(112, 203, 255, .45);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 25%,
      #42aadd,
      #092b45
    );

  color: #fff;

  font-size: 12px;

  font-weight: 900;

  box-shadow:
    0 0 11px
    rgba(75, 183, 239, .18);
}

.member-wall-identity > div {
  grid-column: 2;

  grid-row: 1;

  min-width: 0;

  display: flex;

  align-items: baseline;

  gap: 7px;
}

.member-wall-profile-link {
  min-width: 0;

  overflow: hidden;

  color: #eaf9ff !important;

  font-size: 11px;

  font-weight: 900;

  text-overflow: ellipsis;

  white-space: nowrap;

  text-shadow: none !important;
}

.member-wall-profile-link:hover {
  color: #8fdaff !important;
}

.member-wall-identity span:not(.member-wall-avatar) {
  color: #668b9f;

  font-size: 9px;

  white-space: nowrap;
}


/* ---------- Message Body ---------- */

.member-wall-message p {
  grid-column: 2;

  grid-row: 2;

  min-width: 0;

  margin: 0;

  padding: 0;

  color: #bad4e1;

  font-size: 12px;

  line-height: 1.42;

  overflow-wrap: anywhere;
}

.member-wall-message.own p {
  color: #d7ecf6;
}

.member-wall-pinned {
  position: absolute;

  top: 7px;

  right: 8px;

  color: #dfc77e;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .6px;

  text-transform: uppercase;
}


/* ---------- Empty / Error ---------- */

.member-wall-empty {
  min-height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #789aaf;

  text-align: center;
}

.member-wall-empty > span {
  color: #8edaff;

  font-size: 28px;

  text-shadow:
    0 0 15px
    rgba(93, 188, 255, .6);
}

.member-wall-empty strong {
  margin-top: 4px;

  color: #dff5ff;

  font-size: 14px;
}

.member-wall-empty p {
  margin: 4px 0 0;

  font-size: 11px;
}

.member-wall-empty.failed strong {
  color: #ffabab;
}


/* ---------- Composer ---------- */

.member-wall-composer {
  padding: 10px 12px;

  border-top:
    1px solid
    rgba(112, 203, 255, .2);

  border-left: 0;

  background:
    rgba(1, 12, 22, .97);
}

.member-wall-composer label {
  display: block;

  margin-bottom: 5px;

  color: #dabe6d;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .8px;

  text-transform:
    uppercase;
}

.member-wall-composer textarea {
  width: 100%;

  height: 48px;

  min-height: 48px;

  max-height: 110px;

  padding: 9px 10px;

  resize: vertical;

  border:
    1px solid
    rgba(112, 203, 255, .3);

  border-radius: 6px;

  outline: 0;

  background:
    rgba(0, 8, 16, .82);

  color: #eefaff;

  font: inherit;

  font-size: 12px;

  line-height: 1.4;
}

.member-wall-composer textarea:focus {
  border-color:
    rgba(112, 203, 255, .72);

  box-shadow:
    0 0 12px
    rgba(69, 177, 236, .12);
}

.member-wall-composer-row {
  min-height: 34px;

  margin-top: 6px;

  display: flex;

  align-items: center;

  gap: 8px;
}

.member-wall-char-count {
  color: #66889c;

  font-size: 9px;
}

.member-wall-composer-row small {
  color: #66889c;

  font-size: 9px;
}

.member-wall-composer button,
.member-wall-login {
  margin-left: auto;

  min-width: 78px;

  min-height: 32px;

  padding: 6px 12px;

  border:
    1px solid
    rgba(140, 218, 255, .44);

  border-radius: 5px;

  background:
    linear-gradient(
      #168ac9,
      #0b527d
    );

  color: #fff !important;

  font-size: 10px;

  font-weight: 900;

  text-transform: uppercase;

  cursor: pointer;
}

.member-wall-composer button:hover,
.member-wall-login:hover {
  background:
    linear-gradient(
      #20a5e9,
      #0c668f
    );
}

.member-wall-composer button:disabled {
  opacity: .55;

  cursor: wait;
}

.member-wall-feedback {
  min-height: 14px;

  margin: 4px 0 0;

  color: #70dca0;

  font-size: 9px;
}

.member-wall-feedback.error {
  color: #ff9f9f;
}


/* ---------- Guest ---------- */

.member-wall-guest {
  min-height: 80px;

  padding: 12px 14px;

  display: flex;

  align-items: center;

  gap: 12px;

  border-top:
    1px solid
    rgba(112, 203, 255, .18);

  border-left: 0;

  background:
    rgba(1, 12, 22, .96);
}

.member-wall-guest strong {
  color: #eaf8ff;

  font-size: 12px;
}

.member-wall-guest p {
  margin: 0;

  color: #7899ad;

  font-size: 10px;
}

.member-wall-login {
  width: fit-content;
}


/* ---------- Account Variant ---------- */

.member-wall-account,
.member-wall-site {
  max-width: 1320px;
}


/* ---------- Mobile ---------- */

@media (max-width: 700px) {
  .member-wall {
    width:
      calc(100% - 20px);

    margin:
      10px auto 18px;
  }

  .member-wall-head {
    min-height: 52px;

    padding: 9px 11px;
  }

  .member-wall-head h2 {
    font-size: 16px;
  }

  .member-wall-list {
    height:
      min(440px, 55vh);

    padding:
      6px 4px;
  }

  .member-wall-message {
    padding:
      8px 6px;

    grid-template-columns:
      30px minmax(0, 1fr);

    column-gap: 8px;
  }

  .member-wall-avatar {
    width: 28px;

    height: 28px;
  }

  .member-wall-identity > div {
    align-items: flex-start;

    flex-direction: column;

    gap: 0;
  }

  .member-wall-message p {
    font-size: 11px;
  }

  .member-wall-composer {
    padding: 9px;
  }

  .member-wall-composer textarea {
    height: 46px;
  }

  .member-wall-guest {
    align-items: flex-start;

    flex-direction: column;
  }

  .member-wall-login {
    margin-left: 0;
  }
}


/* ==========================================================
   TAVERN MODERATION
   Only rendered for the master administrator.
   ========================================================== */

.member-wall-message.moderatable {
  padding-right: 42px;
}

.member-wall-delete {
  position: absolute;

  top: 50%;
  right: 8px;

  width: 25px;
  height: 25px;

  padding: 0;

  display: grid;
  place-items: center;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(255, 107, 107, .35);

  border-radius: 5px;

  background:
    rgba(92, 13, 18, .45);

  color: #ff9e9e;

  font-size: 11px;

  font-weight: 900;

  line-height: 1;

  cursor: pointer;

  opacity: .62;

  transition:
    opacity .15s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.member-wall-message:hover
.member-wall-delete {
  opacity: 1;
}

.member-wall-delete:hover {
  border-color:
    rgba(255, 125, 125, .85);

  background:
    rgba(150, 21, 29, .82);

  color: #fff;
}

.member-wall-delete:disabled {
  opacity: .45;
  cursor: wait;
}

.member-wall-message.moderatable
.member-wall-pinned {
  right: 40px;
}

@media (max-width: 700px) {
  .member-wall-message.moderatable {
    padding-right: 38px;
  }

  .member-wall-delete {
    right: 5px;
  }
}