@font-face {
  font-family: "vazir";
  src: url("../font/vazir-medium.ttf"), url("../font/vazir-medium.woff");
}
.font-vazir { font-family: vazir !important; }

.msg__body::-webkit-scrollbar { background-color: rgba(0,0,0,0); width: 5px; }
.msg__body::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(201,169,110,0.35); }

.d-none { display: none !important; }
.chatapp__show { opacity: 1 !important; }
.chatapp__hide { opacity: 0 !important; }

/* ─────────────────────────────────────
   SECTION: chatapp container
───────────────────────────────────── */
section.chatapp {
  box-sizing: border-box;
  z-index: 9999 !important;
  font-family: vazir !important;
  scroll-behavior: smooth !important;
  direction: rtl !important;
}

/* ─── Chat toggle button (now handled by footer-bar, but keep just in case) ─── */
section.chatapp .chatapp__btn {
  position: fixed;
  right: 14px;
  bottom: 14px;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #C9A96E, #9a7a48);
  box-shadow: 0 4px 16px rgba(201,169,110,0.4);
}
section.chatapp .chatapp__btn + div { position: relative; }
section.chatapp .chatapp__btn img { height: 40px; width: 40px; }

/* ─── Unread badge on button ─── */
section.chatapp .chatapp__btn div#alert_msg_ctx {
  position: absolute;
  top: 13px;
  left: 14px;
  height: 19px;
  width: 22px;
  border-radius: 2px;
  background-color: #e8cfa0;
  animation: blink 2s alternate infinite;
  -webkit-animation: blink 2s alternate infinite;
}

/* ─────────────────────────────────────
   SECTION: Chat message box
───────────────────────────────────── */
section.chatapp .chatapp__msg {
  position: fixed !important;
  right: 14px;
  border-radius: 14px;
  bottom: 87px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(201,169,110,0.15);
  transition: all 0.5s ease;
  background-color: #ffffff;
  overflow: hidden;
}

/* Light-mode arrow tip */
section.chatapp .chatapp__msg::after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  bottom: -9px;
  right: 22px;
  border-left: 10px solid rgba(0,0,0,0);
  border-right: 10px solid rgba(0,0,0,0);
  border-top: 10px solid #ffffff;
}

/* ─── Header ─── */
section.chatapp .chatapp__msg .msg__header {
  background: linear-gradient(135deg, #111111 0%, #1c1c1c 100%);
  border-radius: 14px 14px 0 0;
  position: relative;
}
section.chatapp .chatapp__msg .msg__header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C9A96E, transparent);
  border-radius: 14px 14px 0 0;
}
section.chatapp .chatapp__msg .msg__header .msg__wrapper {
  border-radius: 14px 14px 0 0;
  padding: 12px 14px;
  background: linear-gradient(258deg, rgba(0,0,0,0.3) 0%, rgba(201,169,110,0.04) 100%) rgba(0,0,0,0);
  display: flex;
  justify-content: space-between;
}
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__info { display: flex; }
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__info img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  border: 2px solid rgba(201,169,110,0.4);
}
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__info div {
  display: flex;
  flex-direction: column;
  color: #e8cfa0;
  margin: 0 10px;
  position: relative;
  min-width: 140px;
}
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__info div span:nth-child(1) { font-size: 18px; font-weight: 700; }
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__info div span:nth-child(2) {
  font-size: 9pt;
  position: absolute;
  right: 0;
  bottom: 0px;
  display: flex;
  color: rgba(201,169,110,0.6);
  font-size: 0.68rem;
}
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__options button {
  background-color: rgba(0,0,0,0);
  border: none;
  color: rgba(255,255,255,0.7);
  outline: none;
  cursor: pointer;
  font-size: 20px;
  margin-top: 8px;
  transition: all 0.3s;
}
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__options button:hover { color: #e8cfa0; }
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__options button.bottom__msgbox img { height: 22px !important; width: 22px !important; margin-bottom: 2px; }
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__options button.close__msgbox img { height: 26px !important; width: 26px !important; }
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__options .loader_spinner {
  height: 11px;
  width: 11px;
  border-radius: 50%;
  border: 3px solid rgba(201,169,110,0.3);
  animation: spinner 1s linear infinite;
  transition: all 0.3s;
  pointer-events: none;
  margin-top: 5px;
}
section.chatapp .chatapp__msg .msg__header .msg__wrapper .header__options .loader_spinner--white {
  border-top: 3px solid #C9A96E;
}

/* ─── Float helpers ─── */
section.chatapp .chatapp__msg .msgdel__right { float: right !important; }
section.chatapp .chatapp__msg .msgdel__left { float: left !important; }

/* ─── Message body ─── */
section.chatapp .chatapp__msg .msg__body {
  background-color: #f8f5f0;
  padding: 12px 15px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 320px;
}

/* ─── Deleted message ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper .deleted_msg {
  background-color: rgba(201,169,110,0.15) !important;
  color: #9a7a48 !important;
  padding: 3px 4px;
  font-size: 13px;
  border-radius: 5px;
  margin-bottom: 5px;
  width: 175px;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper .deleted_msg img { height: 12px; }

/* ─── Single message wrapper ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper {
  width: 100%;
  height: auto;
  position: relative;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper ul.msg-menu-bar {
  position: absolute;
  top: -13px;
  padding: 5px;
  background-color: #1c1c1c;
  z-index: 5;
  list-style: none;
  color: #e8cfa0;
  width: 100px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid rgba(201,169,110,0.2);
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper ul.msg-menu-bar li { cursor: pointer; padding: 3px 5px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper ul.msg-menu-bar li img { height: 13px; margin-bottom: -4px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper ul.msg-menu-bar li:hover { color: #C9A96E; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper ul.msg-menu-bar--right { right: 0 !important; left: unset !important; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper ul.msg-menu-bar--left { left: 0 !important; right: unset !important; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper:hover .reply_one_msg { opacity: 1; }

/* ─── Bubble base ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg {
  padding: 9px 12px;
  margin-bottom: 6px;
  max-width: 240px;
  min-width: 100px;
  text-align: right;
  position: relative;
  transition: background-color 0.3s linear;
  z-index: 2;
  border-radius: 14px;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg p {
  margin: 0px !important;
  word-break: break-word;
  color: #3a3a3a !important;
  font-size: 0.88rem;
  line-height: 1.45;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg p.msg__replied {
  padding: 3px 5px;
  border-right: 2px solid rgba(201,169,110,0.5);
  margin-bottom: 7px !important;
  border-radius: 4px 0 0 4px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: rgba(201,169,110,0.08);
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg p.msg__replied span { font-size: 9pt; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg p.msg__replied--right { background-color: rgba(201,169,110,0.15); }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg p.msg__replied--left { background-color: rgba(0,0,0,0.06); }

/* ─── Message info row ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg div.msg__info {
  margin-top: 5px;
  margin-bottom: -5px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg div.msg__info__clock { font-size: 9pt; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg div.msg__info__edited { font-size: 9pt; padding: 0 7px; margin-top: -3px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg div.msg__info__status img { height: 14px; width: 16px; margin-left: 5px; }

/* ─── Supporter (left) bubble ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__left {
  float: left;
  border-radius: 4px 14px 14px 14px;
  background-color: #ede8e0;
  border: 1px solid rgba(201,169,110,0.18);
  right: -20px;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__left::before { right: 20px; position: absolute; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__left::after {
  content: "";
  position: absolute;
  bottom: 9px;
  width: 0;
  left: -8px;
  height: 0;
  border-top: 8px solid rgba(0,0,0,0);
  border-bottom: 0px solid rgba(0,0,0,0);
  border-right: 8px solid #ede8e0;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__left div.msg__info__clock { padding-bottom: 4px !important; color: #9a8060; }

/* ─── Client (right) bubble ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__right {
  float: right;
  border-radius: 14px 4px 14px 14px;
  background: linear-gradient(135deg, #C9A96E, #9a7a48);
  box-shadow: 0 3px 10px rgba(201,169,110,0.3);
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__right p {
  color: #fff !important;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__right div.msg__info__clock { color: rgba(255,255,255,0.65) !important; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__right::after {
  content: "";
  position: absolute;
  bottom: 9px;
  right: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid rgba(0,0,0,0);
  border-bottom: 0px solid rgba(0,0,0,0);
  border-left: 8px solid #9a7a48;
}

/* ─── Reply icon ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .reply_one_msg {
  color: rgba(201,169,110,0.5);
  font-size: 10pt;
  opacity: 0;
  line-height: 11px;
  z-index: 1;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .reply_one_msg--right { transform: translate(-5px, 7px); }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .reply_one_msg--left { text-align: left; transform: translate(5px, 7px); }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .reply_one_msg span { cursor: pointer; transition: all 0.2s; margin: 0 !important; padding: 4px 0; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .reply_one_msg span:hover { color: #C9A96E; }

section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper .clearfix { clear: both; }

/* ─── Tic-tac-toe game (keep functional) ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game #restart__game {
  border: none;
  outline: none;
  font-family: vazir;
  padding: 5px 15px;
  border-radius: 5px;
  cursor: pointer;
  background-color: rgba(201,169,110,0.15);
  margin-bottom: 15px;
  color: #9a7a48;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game #restart__game:active { transform: translateY(-1px); }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game #score__game { display: flex; justify-content: center; margin-bottom: 20px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game #score__game div { margin: 0 15px; display: flex; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game #score__game div span:nth-child(1) { color: #9a7a48; padding-left: 3px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .btns__wrapper { width: 208px; margin: auto; position: relative; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .btns__wrapper #bg__glass { background-color: rgba(0,0,0,0); position: absolute; inset: 0; cursor: not-allowed !important; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .btns__wrapper__btn { display: flex; background-color: #C9A96E; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .btns__wrapper__btn .btn_game { padding: 0px; height: 65px; width: 68px; border: none; outline: none; background-color: #fff; display: flex; justify-content: center; align-items: center; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .btns__wrapper__btn .btn_game img { height: 50%; width: 50%; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .btns__wrapper__btn .m2px_l { margin-left: 2px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .btns__wrapper__btn .m2px_b { margin-bottom: 2px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .btns__wrapper__btn .disable_btn { cursor: not-allowed !important; pointer-events: none; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game #game_alert_msg {
  color: #fff;
  padding: 8px 7px;
  border-radius: 7px;
  max-width: 1100px;
  margin: 20px auto;
  background: linear-gradient(135deg, #C9A96E, #9a7a48);
  font-size: 11pt;
  text-align: center;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .game_alert_msg_win { background-color: rgba(201,169,110,0.25) !important; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .tictoctoe__game .game_alert_msg_lose { background: linear-gradient(135deg, #C9A96E, #9a7a48) !important; }

/* ─── Chat form (identity capture) ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form {
  width: 250px;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.12);
  border: 1px solid rgba(201,169,110,0.18);
  overflow: hidden;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form .chatform__header {
  border-radius: 0;
  background: linear-gradient(135deg, #111111 0%, #1c1c1c 100%);
  padding: 10px 12px;
  color: #e8cfa0;
  font-size: 9pt;
  text-align: start;
  margin-bottom: 10px;
  position: relative;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form .chatform__header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C9A96E, transparent);
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form { padding: 1rem; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form div.chatapp_formcontrol { position: relative; margin-bottom: 23px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form div.chatapp_formcontrol input {
  font-family: vazir;
  width: 92%;
  padding: 7px;
  font-size: 13pt;
  color: #9a7a48;
  border: 1.5px solid rgba(201,169,110,0.25);
  border-radius: 8px;
  outline: none;
  background: #fff !important;
  transition: all 0.3s linear;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form div.chatapp_formcontrol input:focus { border-color: #C9A96E; box-shadow: 0 0 0 3px rgba(201,169,110,0.12); }
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form div.chatapp_formcontrol input:focus ~ label { color: #9a7a48; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form div.chatapp_formcontrol label {
  position: absolute;
  pointer-events: none;
  top: -15px;
  right: 10px;
  color: rgba(201,169,110,0.6);
  font-size: 13px;
  padding: 0 7px;
  background-color: #fff;
  transition: all 0.3s linear;
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form div.chatapp_formcontrol p.form_error { color: #e74c3c; font-size: 12px; margin: 0px; margin-top: 5px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form .mbnone__chatapp { margin-bottom: unset !important; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form .chatapp_button { width: 100%; display: flex; justify-content: end; margin-top: 13px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form .chatapp_button button {
  font-family: vazir;
  border: none;
  outline: none;
  padding: 8px 22px;
  cursor: pointer;
  border-radius: 8px;
  background: linear-gradient(135deg, #C9A96E, #9a7a48);
  color: #fff;
  font-weight: 700;
}

/* ─── Scroll to bottom button ─── */
section.chatapp .chatapp__msg .msg__body .body__wrapper .btn_last_msg { position: absolute; left: 20px; bottom: 60px; z-index: 9999; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .btn_last_msg button {
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A96E, #9a7a48);
  position: relative;
  box-shadow: 0 3px 12px rgba(201,169,110,0.35);
}
section.chatapp .chatapp__msg .msg__body .body__wrapper .btn_last_msg button img { height: 35px; width: 35px; padding: 5px 3px; padding-top: 8px; }
section.chatapp .chatapp__msg .msg__body .body__wrapper .btn_last_msg button div.unreadmsg_counter {
  position: absolute;
  right: -2px;
  top: -2px;
  padding: 3px 7px;
  background: linear-gradient(135deg, #C9A96E, #9a7a48);
  border-radius: 50%;
  font-size: 10pt;
  color: #fff;
  border: 2px solid #fff;
}

/* ─── Input bar ─── */
section.chatapp .chatapp__msg .body__inputs {
  padding: 10px 12px;
  padding-top: 6px !important;
  background-color: #f8f5f0;
  border-radius: 0 0 14px 14px;
  border-top: 1px solid rgba(201,169,110,0.15);
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper {
  background-color: #fff;
  border: 1.5px solid rgba(201,169,110,0.25);
  border-radius: 25px;
  display: flex;
  position: relative;
  transition: border-color 0.2s ease;
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper:focus-within {
  border-color: #C9A96E;
  box-shadow: 0 0 0 3px rgba(201,169,110,0.1);
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper input {
  flex: auto;
  font-family: vazir !important;
  outline: none;
  border: none;
  background-color: transparent;
  padding: 10px 15px;
  border-radius: 25px;
  font-size: 0.88rem;
  color: #3a3a3a;
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper input::placeholder { color: rgba(154,122,72,0.5); }

/* ─── Reply bar ─── */
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .reply_msg_wrapper {
  position: absolute;
  bottom: 44px;
  border-radius: 10px;
  right: 0px;
  background-color: #fff;
  border: 1px solid rgba(201,169,110,0.2);
  padding: 8px 12px;
  z-index: 9999;
  width: 70%;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .reply_msg_wrapper div { order: 1; display: flex; flex-direction: column; }
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .reply_msg_wrapper div p {
  margin: 0;
  color: #9a7a48;
  font-size: 9pt;
  padding: 0 5px;
  border-right: 2px solid #C9A96E;
  height: 20px;
  overflow: hidden;
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .reply_msg_wrapper button.close_replybar {
  order: 2;
  background-color: rgba(0,0,0,0) !important;
  color: rgba(154,122,72,0.6);
  border: none;
  outline: none;
  font-size: 20px;
  cursor: pointer;
  padding: 0 10px 10px 0;
  height: 100%;
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .reply_msg_wrapper button.close_replybar:hover { color: #C9A96E; }

/* ─── Emoji wrapper ─── */
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .emoji_wrapper {
  position: absolute;
  bottom: 44px;
  border-radius: 10px;
  right: 0px;
  background-color: #fff;
  border: 1px solid rgba(201,169,110,0.2);
  padding: 8px 10px;
  z-index: 9999;
  width: 70%;
  height: 100px;
  overflow-y: scroll;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .emoji_wrapper div.emoji_box { order: 1; display: flex; flex-direction: row; flex-wrap: wrap; }
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .emoji_wrapper div.emoji_box div.emoji_item { flex: 1; cursor: pointer; font-size: 18px; padding: 4px; max-width: 25px; }

/* ─── Input action buttons ─── */
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper button.show_game {
  outline: none;
  background-color: rgba(0,0,0,0);
  border: none;
  margin-right: 3px;
  padding: 6px 10px;
  cursor: pointer;
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper button.show_game img { height: 26px; width: 28px; }
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper button.show_emoji {
  outline: none;
  background-color: rgba(0,0,0,0);
  border: none;
  margin-right: 3px;
  padding: 6px 2px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper button.show_emoji:hover { opacity: 1; }
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper button.show_emoji img { height: 26px; width: 28px; margin-bottom: -4px; }

/* ─── Send button ─── */
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper button[type=submit] {
  outline: none;
  background: linear-gradient(135deg, #C9A96E, #9a7a48);
  border: none;
  margin-right: 3px;
  border-radius: 25px;
  padding: 6px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(201,169,110,0.3);
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper button[type=submit]:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(201,169,110,0.45);
}
section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper button[type=submit] img { height: 20px; width: 21px; }

/* ─── Go back / return to chat ─── */
section.chatapp .chatapp__msg .body__inputs .goback_chat_btn { text-align: center; padding: 4px; cursor: pointer; transition: all 0.3s; }
section.chatapp .chatapp__msg .body__inputs .goback_chat_btn:hover { color: #C9A96E; }
section.chatapp .chatapp__msg .body__inputs .goback_chat_btn .new_msg_shower {
  background: linear-gradient(135deg, #C9A96E, #9a7a48);
  color: #fff;
  width: 56px;
  font-size: 12px;
  border-radius: 5px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  margin-bottom: 10px;
}
section.chatapp .chatapp__msg .body__inputs .goback_chat_btn .new_msg_shower img { height: 20px; margin-bottom: -5px; }
section.chatapp .chatapp__msg .body__inputs .goback_chat_btn .new_msg_shower div { flex: 1; }

/* ─────────────────────────────────────
   SECTION: LTR overrides
───────────────────────────────────── */
section.chatapp__ltr { direction: ltr !important; }
section.chatapp__ltr .chatapp__btn { left: 14px; right: unset !important; }
section.chatapp__ltr .chatapp__msg {
  left: 0px;
  right: unset !important;
  width: 100%;
  max-width: 400px;
  border-radius: 14px;
  bottom: 0px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 1px rgba(201,169,110,0.15);
}
section.chatapp__ltr .chatapp__msg::after { right: unset !important; left: 22px; }
section.chatapp__ltr .msg__info__status img { margin-right: 5px; margin-left: unset !important; }
section.chatapp__ltr .msg__header .msg__wrapper .header__info div span:nth-child(2) { right: unset !important; left: 0; }
section.chatapp__ltr .chatapp__msg .body__inputs form div button { margin-right: unset !important; margin-left: 3px; }
section.chatapp__ltr .chatapp__msg .msg__body .body__wrapper .chatapp__form form div.chatapp_formcontrol label { right: unset !important; left: 10px; }
section.chatapp__ltr .m2px_l { margin-left: unset !important; margin-right: 2px; }
section.chatapp__ltr .msg__body .body__wrapper .msg { text-align: left !important; }
section.chatapp__ltr .msg__body .body__wrapper .msg p.msg__replied { border-right: unset !important; border-left: 2px solid rgba(201,169,110,0.5); border-radius: 0 4px 4px 0 !important; }
section.chatapp__ltr .chatapp__msg .msg__header .msg__wrapper { background: linear-gradient(258deg, rgba(201,169,110,0.04) 0%, rgba(0,0,0,0.3) 100%) rgba(0,0,0,0) !important; }
section.chatapp__ltr .body__inputs .btn_last_msg { left: unset !important; right: 15px; }
section.chatapp__ltr .body__inputs form div.forminput_wrapper .reply_msg_wrapper { left: 0px; right: unset !important; }
section.chatapp__ltr .body__inputs form div.forminput_wrapper .reply_msg_wrapper div p { border-left: 2px solid #C9A96E !important; border-right: unset !important; }
section.chatapp__ltr .body__inputs form div.forminput_wrapper .emoji_wrapper { left: 0px; right: unset !important; }
section.chatapp__ltr .reply_one_msg--right { float: right !important; }
section.chatapp__ltr .body__wrapper .msg div.msg__info__edited { margin-top: unset !important; }

/* ─────────────────────────────────────
   SECTION: DARK MODE overrides
───────────────────────────────────── */
body.theme-dark section.chatapp .chatapp__msg {
  background-color: #1a1a1a;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,169,110,0.15);
}
body.theme-dark section.chatapp .chatapp__msg::after {
  border-top-color: #1a1a1a;
}
body.theme-dark section.chatapp .chatapp__msg .msg__body {
  background-color: #141414;
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg p {
  color: #e8e0d0 !important;
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__left {
  background-color: #2a2520;
  border-color: rgba(201,169,110,0.2);
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__left::after {
  border-right-color: #2a2520;
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__left div.msg__info__clock {
  color: rgba(201,169,110,0.45) !important;
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .all__msg__wrapper div.one_msg_wrapper .msg__left p {
  color: #d8cfc0 !important;
}
body.theme-dark section.chatapp .chatapp__msg .body__inputs {
  background-color: #1a1a1a;
  border-top-color: rgba(201,169,110,0.12);
}
body.theme-dark section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper {
  background-color: #242424;
  border-color: rgba(201,169,110,0.2);
}
body.theme-dark section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper input {
  background-color: transparent;
  color: #e0d8c8;
}
body.theme-dark section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper input::placeholder {
  color: rgba(201,169,110,0.35);
}
body.theme-dark section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .reply_msg_wrapper {
  background-color: #2a2520;
  border-color: rgba(201,169,110,0.18);
}
body.theme-dark section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .reply_msg_wrapper div p {
  color: #e8cfa0;
}
body.theme-dark section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper .emoji_wrapper {
  background-color: #2a2520;
  border-color: rgba(201,169,110,0.18);
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form {
  border-color: rgba(201,169,110,0.2);
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form div.chatapp_formcontrol input {
  background: #242424 !important;
  color: #e0d8c8;
  border-color: rgba(201,169,110,0.25);
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .chatapp__form form div.chatapp_formcontrol label {
  background-color: #242424;
  color: rgba(201,169,110,0.5);
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .btn_last_msg button {
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}
body.theme-dark section.chatapp .chatapp__msg .msg__body .body__wrapper .btn_last_msg button div.unreadmsg_counter {
  border-color: #1a1a1a;
}

/* ─────────────────────────────────────
   SECTION: LIGHT MODE overrides
───────────────────────────────────── */
body.theme-light section.chatapp .chatapp__msg {
  background-color: #ffffff;
}
body.theme-light section.chatapp .chatapp__msg::after {
  border-top-color: #f8f5f0;
}
body.theme-light section.chatapp .chatapp__msg .msg__body {
  background-color: #f8f5f0;
}
body.theme-light section.chatapp .chatapp__msg .body__inputs {
  background-color: #f8f5f0;
}
body.theme-light section.chatapp .chatapp__msg .body__inputs form div.forminput_wrapper {
  background-color: #ffffff;
}

/* ─────────────────────────────────────
   SECTION: Animations
───────────────────────────────────── */
@keyframes blink { from { opacity: 0; } to { opacity: 1; } }
@keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ─────────────────────────────────────
   SECTION: Responsive
───────────────────────────────────── */
@media screen and (min-width: 1001px) {
  .chatapp__msg .msg__header .msg__wrapper { width: 100% !important; }
}
@media screen and (max-width: 1000px) {
  .chatapp__msg .msg__header .msg__wrapper .header__info div span:nth-child(1) { font-size: 13pt !important; }
  .chatapp__msg .msg__header .msg__wrapper .header__info div span:nth-child(2) { font-size: 9pt !important; }
}