:root {
  /* Background */
  --color-bg: #060d10;
  --color-bg-chat: #0a1014;
  --color-bg-elevated: #141e26;

  /* Text */
  --color-text-primary: #f0f4f8;

  /* Accent */
  --color-accent: #00e5a0;
  --color-accent-dark: #00b87e;
  --color-accent-hover: #33f0ba;
  --color-accent-sky: #38bdf8;

  /* Semantic */
  --color-danger: #f43f5e;
  --color-danger-dark: #d4293e;
  --color-warning: #fbbf24;
  --color-warning-dark: #e6a817;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* UI */
  --color-nav-inactive: #C6C6C6;
  --color-border: #DEDEDE;
  --color-row-alt: #EFEFEF;
  --color-badge: #ff0000;
  --color-alpha-tag: rgb(196, 46, 0);
  --color-dev: #818cf8;
  --color-night: #818cf8;

  /* Message time backgrounds */
  --color-msg-time-right: #092a25;
  --color-msg-time-left: #191e22;
}

html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  box-sizing: border-box;

  position: relative;
  vertical-align:top;
  font-family: 'Montserrat', sans-serif;
  overflow:hidden;
  background-color: var(--color-bg);

  -webkit-overscroll-behavior: none;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-overflow-scrolling: touch;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

html {
  height: 100%;
  width: 100%;
}

body {
  position:absolute;
  top:env(safe-area-inset-top, 0);
  left:0px;

  width:100%;
  height:100%;
  height:calc(100% - env(safe-area-inset-bottom, 0));
}

a {
  text-decoration:none;
  color:inherit;
}
*:focus {
  outline:none;
}
* {
  outline:none;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Montserrat', sans-serif;

  -webkit-overscroll-behavior: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  
  touch-action: none;
  touch-action: pan-y;
}
pre {
  margin:0px;
  padding:0px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

img {
    transition: opacity 342ms ease;
}
img[data-src] {
    opacity: 0;
    pointer-events: none;

    min-width: 1px;
    min-height: 1px;
}
img.img_loaded {
    opacity: 1;
    pointer-events: auto !important;
}

.pending_invites_cont {
    margin-bottom:20px !important;
}

.hb_button {
    color: var(--color-bg);
    font-size: 16px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

.hbbm_cont {
  display:flex;
}
.hb_button_multi {
    color: var(--color-bg);
    font-size: 16px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: var(--color-white);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    margin: 0px;
    padding: 0px;
    border: 0px;
}

.no_pending_invites {
    font-size:14px;
}

#mop_wrap {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display:none;
  z-index:999;
}
#message_options_popup {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  padding:20px;
  width:60%;
  height:auto;
  background-color:var(--color-bg-elevated);
  color:var(--color-text-primary);
  border-radius:20px;
  display:none;

  z-index:9999;

  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.mop_title {
  font-size:20px;
  text-align:center;
  font-weight:bold;
}

#attachments_wrap {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    display:none;
    z-index:999;
}
#attachments_popup {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:20px;
    width:60%;
    height:auto;
    background-color:var(--color-bg-elevated);
    color:var(--color-text-primary);
    border-radius:20px;
    display:none;
  
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    z-index:9999;
  }

#mop_message {
  border:0px;
  background-color:var(--color-bg-elevated);
  color:var(--color-bg);
  width:100%;
  margin:0px;
  padding:0px;
  opacity:0;
  height:20px;
}
.mop_button {
  border-radius:10px;
  border:0px;
  background-color:var(--color-white);
  color:var(--color-bg);
  width:100px;
  margin:0px;
  padding:10px 10px;
  font-weight:bold;
  font-size:14px;
}
.mop_buttons_cont {
  display:flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}
#delete_message {
  margin-left:30px;
}

.chat_cont {
  display:flex;
  align-items: center;
  position:relative;
  margin-bottom:20px;
  padding-top:20px;
  border-top:1px solid var(--color-border);
}
.chat_cont_first {
  border-top:0px;
  padding-top:0px;
}

.chat_cont_picture {
  width:60px;
  height:60px;
}
.chat_cont_picture img {
  object-fit:cover;
  object-position: center;
  border-radius: 14px;
  width:100%;
  height:100%;
}

.contact_pic {
  width:150px;
  height:150px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:20px;
}
.contact_pic img {
  width:100%;
  height:100%;
  border-radius: 14px;
  object-fit:cover;
  object-position: center;
}
.contact_name {
  text-align:center;
  font-size:24px;
  font-weight:bold;
  width:100%;
  height:auto;
}
.contact_name_sub {
  text-align:center;
  font-size:12px;
}

.fr_list_title {
  font-weight:bold;
}
.fr_list_cont {
  margin-top:20px;
  margin-bottom:20px;
}

.pending_fr_banner {
  background-color:var(--color-bg-elevated);
  color:var(--color-text-primary);
  display:flex;
  justify-content: space-between;
  align-items: center;
  height:auto;
  border-radius:14px;
  font-weight:bold;
  padding:10px 20px;
  margin-bottom:20px;
}

.contact_options {
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top:30px;
  margin-bottom:20px;
  width:100%;
  gap:40px;
}
.contact_option_indv {
  text-align: center;
  background-color:var(--color-bg-elevated);
  color:var(--color-text-primary);
  padding:10px 20px;
  border-radius:14px;
  border:0px;

  height:100px;
  width:100px;

  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.option_icon {
  font-size:30px;
  text-align: center;
}
.single_co {
  margin-right:0px !important;
}
.option_title {
  font-size:12px;
  text-align: center;
  font-weight:bold;
  margin-top:10px;
}

.chat_name_sub {
  font-size:12px;
  width:100%;
  font-weight:normal;
  margin: 0px;
  padding: 0px;

  word-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;

  overflow: hidden;
  text-overflow: ellipsis;
}
.chat_cont_name {
  margin-left:20px;
  width: calc(100% - 154px);
}
.chat_name_title {
  font-size:16px;
  font-weight:bold;
  width:100%;
}
.chat_unread_messages {
  border-radius:50%;
  background-color:var(--color-bg-elevated);
  width:25px;
  height:25px;
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color:var(--color-white);
  font-weight:bold;
  margin-top:5px;
  float:right;
}
.chat_right_info {
  position:absolute;
  right:0px;
  top:50%;
  transform: translateY(-50%);
  font-size:12px;
  text-align:right;
}
.chat_right_dt {
  color:var(--color-black);
}

.bottom_message {
  position:relative;
  bottom:0px;
  left:0px;
  min-height:30px;
  height:auto;
  padding:20px;
  width:calc(100% - 40px);
  background-color:var(--color-bg-elevated);
  display: flex;
  align-items: center;
  
  overflow-y:visible;
  overflow-x:visible;
  overscroll-behavior: none;
  
  touch-action: none;
  z-index:8;
}

.message_process {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display:flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  z-index:1000000000;
  font-weight:bold;
  font-size:20px;
  color:var(--color-white);
  background-color:var(--color-bg-elevated);
  display:none;
}

.bottom_nav {
  height:70px;
  justify-content: center;
  font-weight:bold;
  background-color: var(--color-bg-elevated);
  color:var(--color-white);
  padding:0px;
  margin:0px;
  width:100% !important;
  z-index:9;
}
.bnm_inner {
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  background-color: var(--color-bg-elevated);
}

.bnm_item {
  font-size:32px;
  width:100%;
  height:100%;
  display:flex;
  align-items: center;
  text-align: center;
  justify-content: center;

  background-color:var(--color-bg-elevated);
  color:var(--color-nav-inactive);
}
.bnm_item a {
  display:flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  line-height: 1;

  position: relative;
}
.bnm_selected {
  color:var(--color-white);
}

.bottom_message #user_message {
  display: block;
  max-height:100px;
  overflow-x: hidden;
  overflow-y: hidden;
  width:calc(100% - 110px);
  resize:none;
  min-height: 20px;
  line-height: 20px;
  background-color:var(--color-white);
  color:var(--color-black);
  margin:0px;
  padding:5px;
  font-size:14px;
  height:20px;
  border:0px;
  border-radius:10px;
  margin-left:50px;

  -webkit-overscroll-behavior: none;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}

.bottom_message button {
  position:absolute;
  bottom:20px;
  margin:0px;
  padding:0px;
  border:0px;
  height:30px;
  width:30px;
  background-color:var(--color-white);
  border-radius: 10px;
  color:var(--color-bg);
  font-size:16px;
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bottom_message #attach_message {
  left:20px;
}
.bottom_message #send_message {
  right:20px;
  font-size:24px;
}

.indv_message {
  border-radius:12px;
  margin-bottom:20px;
  padding:10px;
  padding-right:46px;
  width:auto;
  max-width:80%;
  position:relative;

  display:flex;
  flex-direction: column;

  clear:both;
  text-align:left;
  color:var(--color-white);
  overflow:hidden;
  font-size:14px;
}
.indv_message pre a {
  text-decoration: underline;
}

.indv_message_name {
  font-weight:bold;
  margin-bottom:5px;
}

.indv_message_hidden_st {
  display:none;
}

.date_line {
  height:auto;
  width:50%;
  text-align:center;
  padding:10px;
  font-size:14px;
  font-weight:bold;
  clear:both;
  margin-bottom:20px;
  background-color:var(--color-bg-elevated);
  color:var(--color-text-primary);
  border-radius:10px;
  margin-left:auto;
  margin-right:auto;
}
.system_line {
  width:80%;
}

.indv_message_info_cont {
  width:26px;
  height: calc(100% - 20px);
  position:absolute;
  top:10px;
  right:10px;
  text-align:right;
}

.indv_message_info {
  position:absolute;
  font-size:10px;
  text-align:right;
  bottom:0px;
  right:0px;
  z-index:2;
  min-height:20px;
  width:100%;

  display:flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.indv_message_moreinfo {
  position:absolute;
  font-size:14px;
  font-weight:900;
  letter-spacing: 1.5px;
  line-height: 10px;
  text-align:right;
  top:0px;
  right:0px;
  z-index:1;
  width:100%;

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

.message_right {
  float:right;
  background-color:var(--color-bg-elevated);
}
.message_left {
  float:left;
  background-color:rgba(255, 255, 255, 0.06);
}

.chat_top_info {
  position:relative;
  top:0px;
  left:0px;
  height:24px;
  width:calc(100% - 40px);
  padding:20px;
  background-color:var(--color-bg-elevated);

  font-weight:bold;
  font-size:24px;
  z-index:10;

  display: flex;
  align-items: center;
  
  overflow-y:hidden;
  overflow-x:hidden;
  overscroll-behavior: none;
  
  touch-action: none;
}

.cti_cont {
  justify-content: space-between;
}
.cti_left {
  display:flex;
  align-items: center;
}
.cti_right {
  color: var(--color-bg);
  font-size:16px;
  width:30px;
  height:30px;
  border-radius: 10px;
  background-color: var(--color-white);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  margin: 0px;
  padding: 0px;
  border: 0px;
}
.cti_right a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.header_top {
  justify-content: space-between;
  color:var(--color-white);
}

.chat_other_name {
  color: var(--color-white);
  margin-left: 20px;
  margin-right: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: calc(100vw - 140px);

  font-size:20px;
}

#chat_online_status {
    font-size:12px;
    font-weight:normal;
}
.chat_back_button {
  color: var(--color-bg);
  font-size:24px;
  width:30px;
  height:30px;
  border-radius: 10px;
  background-color: var(--color-white);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  margin: 0px;
  padding: 0px;
  border: 0px;
}
.chat_back_button a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.chats_cont {
  position:relative;
  background-color: var(--color-white);

  padding:20px;
  width:calc(100% - 40px);

  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: none;
  
  padding-top: 40px;
  padding-bottom: 40px;
  height: calc(100% - 214px);
  font-size: 18px;
}

.chat_page {
  padding-bottom:20px;
  height: calc(100% - 194px);
}

.settings_page {
  padding:20px;
  padding-top:40px;
  padding-bottom:40px;
  height:calc(100% - 214px);
  font-size:18px;
}

.contacts_page {
  padding-bottom:20px;
  height: calc(100% - 194px);
}

.settings_returnMessage {
  background-color:var(--color-bg-elevated);
  border-radius:14px;
  padding:20px;
  color:var(--color-text-primary);
  text-align:center;
  margin-bottom:20px;
  font-weight:bold;
}
.settings_item {
  margin-bottom:20px;
}
.settings_item form {
  display:flex;
}
.settings_item input {
  font-size:17px;
  margin:0px;
  padding:15px;
  width:calc(100% - 122px);
  margin-right:10px;
  border-radius:12px;
  border:1px solid rgba(255, 255, 255, 0.1);
}
.settings_item button {
  font-size:17px;
  font-weight:bold;
  padding:15px;
  text-align:center;
  height:auto;
  margin:0px;
  border:0px;
  border-radius:12px;
  background-color:var(--color-bg-elevated);
  border:1px solid rgba(255, 255, 255, 0.1);
  color:var(--color-text-primary);
  width:100px;
}

.uds_table {
    font-size:12px;
    border-radius:14px;
    border:1px solid rgba(255, 255, 255, 0.1);
}
.uds_table_row {
    text-align:left;
    padding:10px;
    border-bottom:1px solid rgba(255, 255, 255, 0.06);
    display:flex;
    justify-content: space-between;
    align-items:center;
}
.uds_table_row:last-child {
    border-bottom:0px;
}
.udstr_right {
    font-size:24px;
    margin-left:20px;
}
.udstr_right button {
    color: var(--color-text-primary);
    font-size:18px;
    width:32px;
    height:32px;
    border-radius: 10px;
    background-color: var(--color-bg-elevated);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    margin: 0px;
    padding: 0px;
    border: 0px;
}
.ld_buttons {
  display:block !important;
  text-align:center;
  margin-top:10px;
}
.ld_buttons button {
  width:100%;
  display:block;
}

.settings_item_title {
  font-weight:bold;
  margin-bottom:10px;
  font-size:20px;
  line-height:0.9;
}
.ap_inner {
  display:flex;
  align-items: center;
}
.ap_inner button {
  margin-left:10px;
}
.ap_inner img {
  border-radius: 12px;
  object-fit:cover;
  height:53px;
  width:53px;
}
.ap_choose_file {
  margin-bottom:0px;
}
.ap_choose_file .settings_item_title {
  margin-bottom:20px;
}
.ap_choose_file form {
  display:block;
}
.ap_choose_file input {
  display:block;
  border:0px;
  margin:0px;
  padding:0px;
  border-radius:0px;
}
.ap_choose_file button {
  display:block;
  margin-top:20px;
  width:100%;
}

.change_number form {
  display:block;
}
.change_number input {
  margin-top:5px;
  margin-right:0px;
  width:calc(100% - 12px);
  margin-bottom:20px;
}
.change_number button {
  width:100%;
}
.cn_subtext {
  font-size:14px;
  margin-bottom:20px;
}

#new_messages_button {
    position:absolute;
    top:-60px;
    right:20px;
    background-color:var(--color-bg-elevated);
    color:var(--color-text-primary);
    height:40px;
    width:40px;
    border-radius:10px;
    display: flex;
    align-items: center;
    text-align:center;
    justify-content: center;
}
#new_messages_button i {
    font-size:30px;
    line-height:1;
}

#chatbox {
  position:relative;

  padding:20px;
  padding-bottom:0px;

  width:calc(100% - 40px);
  height:calc(100% - 160px);

  min-height:calc(100% - 240px);
  max-height:calc(100% - 160px);

  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: none;

  background-color:var(--color-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.chatbox_long {
  height:calc(100% - 84px) !important;
  min-height:calc(100% - 84px) !important;
  max-height:calc(100% - 84px) !important;
}

.chatbox_loading {
  position:fixed;
  inset:0;
  top:env(safe-area-inset-top, 0);

  text-align: center;
  display:flex;
  vertical-align:middle;
  justify-content: center;
  align-items: center;

  background-color: var(--color-bg);
  z-index:9;

  font-size:24px;
  font-weight:bold;
  color:var(--color-white);
}
.chatbox_loading_inner {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  text-align: center;
}
.cli_spin {
  display:flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  text-align: center;

  font-size:48px;
}
.cli_text {
  display:flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  text-align: center;

  margin-top:20px;
}

.chat_info_cont {
  position:relative;
  background-color: var(--color-white);

  padding:40px;
  padding-left:20px;
  padding-right:20px;
  width:calc(100% - 40px);
  height:calc(100% - 144px);
  overflow-y: scroll;
  overflow-x: hidden;
}

/* ===== AUTH PAGE ===== */
.moo-auth {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-bg);
  z-index: 1;
}
.moo-auth::before,
.moo-auth::after {
  content: '';
  flex: 1 0 24px;
}

.moo-auth__bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.moo-auth__orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.moo-auth__orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.5) 0%, transparent 70%);
  top: -10%;
  right: -5%;
  animation: mooOrb1 20s ease-in-out infinite;
}
.moo-auth__orb--2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, transparent 70%);
  bottom: -15%;
  left: -10%;
  animation: mooOrb2 25s ease-in-out infinite;
}
.moo-auth__orb--3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.35) 0%, transparent 70%);
  top: 40%;
  left: 50%;
  margin-left: -200px;
  animation: mooOrb3 30s ease-in-out infinite;
}

@keyframes mooOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(80px, -120px) scale(1.1); }
  50% { transform: translate(-40px, -60px) scale(0.9); }
  75% { transform: translate(60px, 40px) scale(1.05); }
}
@keyframes mooOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-100px, 80px) scale(1.15); }
  66% { transform: translate(60px, -100px) scale(0.95); }
}
@keyframes mooOrb3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(100px, 50px) scale(0.9); }
  40% { transform: translate(-60px, 120px) scale(1.1); }
  60% { transform: translate(-120px, -40px) scale(1.05); }
  80% { transform: translate(40px, -80px) scale(0.95); }
}

.moo-auth__noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Glass card */
.moo-auth__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  flex-shrink: 0;
  padding: 48px 40px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 80px rgba(0, 0, 0, 0.4);
  animation: mooCardIn 0.6s ease-out forwards;
}

@keyframes mooCardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered entrance */
.moo-auth__card > * {
  opacity: 0;
  animation: mooFadeUp 0.5s ease-out forwards;
}
.moo-auth__card > *:nth-child(1) { animation-delay: 0.08s; }
.moo-auth__card > *:nth-child(2) { animation-delay: 0.14s; }
.moo-auth__card > *:nth-child(3) { animation-delay: 0.2s; }
.moo-auth__card > *:nth-child(4) { animation-delay: 0.26s; }
.moo-auth__card > *:nth-child(5) { animation-delay: 0.32s; }
.moo-auth__card > *:nth-child(6) { animation-delay: 0.38s; }
.moo-auth__card > *:nth-child(7) { animation-delay: 0.44s; }

@keyframes mooFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo */
.moo-auth__logo {
  text-align: center;
  margin-bottom: 32px;
}
.moo-auth__logo a {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.moo-auth__logo a:hover {
  transform: scale(1.05);
}
.moo-auth__logo img {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: 0 0 40px rgba(0, 229, 160, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Title + Subtitle */
.moo-auth__title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}
.moo-auth__subtitle {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 32px;
  line-height: 1.5;
}

/* Form fields */
.moo-auth__field {
  position: relative;
  margin-bottom: 24px;
}
.moo-auth__field-icon {
  position: absolute;
  left: 0;
  bottom: 13px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 15px;
  width: 20px;
  text-align: center;
  transition: color 0.3s;
  pointer-events: none;
}
.moo-auth__field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  padding: 22px 0 10px 32px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  transition: border-color 0.3s;
  box-sizing: border-box;
  border-radius: 0;
  -webkit-appearance: none;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.moo-auth__field input:focus {
  border-bottom-color: var(--color-accent);
}
.moo-auth__field label {
  position: absolute;
  left: 32px;
  top: 18px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 16px;
  font-weight: 500;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.moo-auth__field input:focus + label,
.moo-auth__field input:not(:placeholder-shown) + label {
  top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.moo-auth__field:has(input:focus) .moo-auth__field-icon {
  color: var(--color-accent);
}
.moo-auth__field:has(input:not(:placeholder-shown)) .moo-auth__field-icon {
  color: rgba(255, 255, 255, 0.45);
}
.moo-auth__field:has(input:focus) .moo-auth__field-icon {
  color: var(--color-accent);
}

/* Readonly / locked fields */
.moo-auth__field--locked input {
  color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.05);
  cursor: default;
}
.moo-auth__field--locked input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
.moo-auth__field--locked input:focus + label,
.moo-auth__field--locked input:not(:placeholder-shown) + label {
  color: rgba(255, 255, 255, 0.3);
}
.moo-auth__field--locked .moo-auth__field-icon {
  color: rgba(255, 255, 255, 0.15) !important;
}

/* Submit button */
.moo-auth__btn {
  width: 100%;
  padding: 16px 24px;
  margin-top: 8px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border: none;
  border-radius: 14px;
  color: var(--color-bg);
  font-weight: 700;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
}
.moo-auth__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25);
}
.moo-auth__btn:active {
  transform: translateY(0) scale(0.98);
}
.moo-auth__btn i {
  font-size: 14px;
  transition: transform 0.3s;
}
.moo-auth__btn:hover i {
  transform: translateX(3px);
}
.moo-auth__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}
.moo-auth__btn:hover::before {
  left: 100%;
}
.moo-auth__btn:disabled {
  opacity: 0.7;
  cursor: default;
}
.moo-auth__btn:disabled:hover {
  transform: none;
  box-shadow: none;
}
.moo-auth__btn:disabled::before {
  display: none;
}

/* Switch link (login <-> register) */
.moo-auth__switch {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}
.moo-auth__switch a {
  color: var(--color-accent);
  font-weight: 700;
  margin-left: 4px;
  transition: color 0.2s;
  text-decoration: none;
}
.moo-auth__switch a:hover {
  color: var(--color-accent-hover);
}

/* Account deleted banner */
.moo-auth__deleted-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.15);
  color: rgba(244, 63, 94, 0.85);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
}
.moo-auth__deleted-banner i {
  font-size: 16px;
  flex-shrink: 0;
}

/* Invite-only notice */
.moo-auth__invite-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 24px;
}
.moo-auth__invite-note > i {
  color: rgba(255, 255, 255, 0.25);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.moo-auth__invite-note strong {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.moo-auth__invite-note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  line-height: 1.5;
}

/* Auth mobile responsive */
@media (max-width: 480px) {
  .moo-auth::before,
  .moo-auth::after {
    flex: 1 0 16px;
  }
  .moo-auth__card {
    padding: 32px 24px;
    border-radius: 20px;
    max-width: calc(100% - 32px);
  }
  .moo-auth__title {
    font-size: 24px;
  }
  .moo-auth__field input {
    font-size: 15px;
  }
  .moo-auth__orb--1 { width: 300px; height: 300px; }
  .moo-auth__orb--2 { width: 350px; height: 350px; }
  .moo-auth__orb--3 { width: 250px; height: 250px; margin-left: -125px; }
}

/* ===== CONTACTS PAGE OVERHAUL ===== */

/* Page background — aurora gradient on body when contacts page is active */
html:has(.contacts_page) {
  background: var(--color-bg);
}
body:has(.contacts_page) {
  background:
    radial-gradient(ellipse at 75% 15%, rgba(14, 165, 233, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 25% 85%, rgba(99, 102, 241, 0.11) 0%, transparent 50%),
    radial-gradient(ellipse at 55% 55%, rgba(244, 63, 94, 0.07) 0%, transparent 40%),
    var(--color-bg);
}

/* Header — dark glass */
body:has(.contacts_page) .chat_top_info.header_top {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body:has(.contacts_page) .hb_button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.2s;
}
body:has(.contacts_page) .hb_button:hover {
  background: rgba(0, 229, 160, 0.15);
  border-color: rgba(0, 229, 160, 0.3);
  color: var(--color-accent);
}

/* Bottom nav — dark glass */
body:has(.contacts_page) .bottom_nav {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body:has(.contacts_page) .bnm_inner,
body:has(.contacts_page) .bnm_item {
  background: rgba(6, 13, 16, 0.85);
}
body:has(.contacts_page) .bnm_item {
  color: rgba(255, 255, 255, 0.3);
}
body:has(.contacts_page) .bnm_selected {
  color: var(--color-accent);
}

/* Content area — transparent so aurora shows through */
.contacts_page {
  background: transparent !important;
  color: var(--color-text-primary);
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  height: calc(100% - 174px) !important;
}

/* Contact list items — glass cards */
.contacts_page .chat_cont {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px;
  padding: 16px !important;
  margin-bottom: 12px !important;
  transition: background 0.25s, border-color 0.25s;
}
.contacts_page .chat_cont:active {
  background: rgba(255, 255, 255, 0.08);
}
.contacts_page #getContacts_API > a:last-child .chat_cont,
.contacts_page .fr_list_cont > a:last-child .chat_cont {
  margin-bottom: 0 !important;
}
.contacts_page .chat_cont_first {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 16px !important;
}
.contacts_page .chat_cont_picture img {
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.contacts_page .chat_cont_name {
  width: calc(100% - 80px);
}
.contacts_page .chat_name_title {
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "No contacts" empty state */
.contacts_page #getContacts_API:empty,
.contacts_page #getContacts_API:not(:has(.chat_cont)) {
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  padding: 60px 0;
  font-size: 15px;
}

/* Pending friend requests banner — accent glass */
.contacts_page .pending_fr_banner {
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid rgba(0, 229, 160, 0.15);
  border-radius: 16px;
  color: var(--color-text-primary);
  padding: 16px 20px;
  transition: background 0.25s;
}
.contacts_page .pending_fr_banner:active {
  background: rgba(0, 229, 160, 0.14);
}
.contacts_page .pending_fr_banner .pfr_number {
  background: var(--color-accent);
  color: var(--color-bg);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

/* Friend request list titles */
.contacts_page .fr_list_title {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

/* ---- Profile card (individual contact & own profile) ---- */
.moo-profile-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  padding: 32px;
  text-align: center;
  margin-bottom: 8px;
}
.contacts_page .contact_pic {
  width: 110px;
  height: 110px;
  margin: 0 auto 20px;
}
.contacts_page .contact_pic img {
  border-radius: 24px;
  box-shadow:
    0 0 40px rgba(0, 229, 160, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.contacts_page .contact_name {
  color: var(--color-text-primary);
  font-size: 24px;
}
.contacts_page .contact_mn_display {
  color: rgba(255, 255, 255, 0.4);
  font-size: 15px;
  margin-top: 4px;
}
.contacts_page .contact_real_name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}
.contacts_page .contact_last_online {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  margin-top: 12px;
}
.contacts_page .contact_last_online b {
  color: rgba(255, 255, 255, 0.6);
}
.contacts_page .contact_timezone {
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}
.contacts_page .contact_timezone b {
  color: rgba(255, 255, 255, 0.5);
}
.contacts_page .contact_name_sub {
  text-align: center;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: -4px;
  margin-bottom: 8px;
}

/* Contact action buttons */
.contacts_page .contact_options {
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 0;
}
.contacts_page .contact_option_indv {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  color: var(--color-text-primary);
  width: 110px;
  height: 100px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.contacts_page .contact_option_indv:hover {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.contacts_page .contact_option_indv:active {
  transform: translateY(0);
}
.contacts_page .option_icon {
  font-size: 24px;
  color: var(--color-accent);
}
.contacts_page .option_title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.contacts_page .moo-btn-danger:hover {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(244, 63, 94, 0.25) !important;
}
.contacts_page .moo-btn-danger .option_icon {
  color: var(--color-danger);
}
.contacts_page .moo-btn-success:hover {
  background: rgba(0, 229, 160, 0.12) !important;
  border-color: rgba(0, 229, 160, 0.25) !important;
}
.contacts_page .co_contact_form {
  gap: 12px;
}
.contacts_page .coy_form {
  gap: 12px;
}

/* Alpha tag on contacts page */
.contacts_page .moo_alpha_tag {
  background-color: rgba(0, 229, 160, 0.15);
  color: var(--color-accent);
  border: 1px solid rgba(0, 229, 160, 0.2);
  border-radius: 8px;
}

/* ---- Form cards (add contact, create/join group) ---- */
.contacts_page .moo-form-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  padding: 36px 32px;
}
.contacts_page .moo-form-icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.contacts_page .moo-form-card .settings_item_title {
  color: var(--color-text-primary);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.contacts_page .moo-form-card .cn_subtext {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.contacts_page .moo-form-card .cn_input_title {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.contacts_page .moo-form-card form {
  display: block;
}
.contacts_page .moo-form-card input {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text-primary) !important;
  padding: 14px 0 !important;
  font-size: 16px !important;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  width: 100% !important;
  margin: 0 0 24px 0 !important;
  border-radius: 0 !important;
  -webkit-appearance: none;
  transition: border-color 0.3s;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.contacts_page .moo-form-card input:focus {
  border-bottom-color: var(--color-accent) !important;
}
.contacts_page .moo-form-card input[readonly] {
  color: rgba(255, 255, 255, 0.4) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.contacts_page .moo-form-card button[type="submit"],
.contacts_page .moo-form-card .moo-form-link-btn button {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 24px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-family: 'Montserrat', sans-serif;
  width: 100% !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.contacts_page .moo-form-card button[type="submit"]:hover,
.contacts_page .moo-form-card .moo-form-link-btn button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25);
}
.contacts_page .moo-form-card button[type="submit"]:active,
.contacts_page .moo-form-card .moo-form-link-btn button:active {
  transform: translateY(0) scale(0.98);
}
.contacts_page .moo-form-card button[type="submit"] i,
.contacts_page .moo-form-card .moo-form-link-btn button i {
  font-size: 14px;
}
.contacts_page .moo-form-link-btn {
  display: block;
  margin-top: 12px;
}

/* Return/status messages */
.contacts_page .settings_returnMessage {
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid rgba(0, 229, 160, 0.15);
  border-radius: 16px;
  color: var(--color-text-primary);
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.contacts_page .settings_returnMessage i {
  color: var(--color-accent);
  font-size: 18px;
  flex-shrink: 0;
}

/* Invite confirmation dialog */
.contacts_page .ays_cont {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
}
.contacts_page .ays_icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.contacts_page .ays_title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.contacts_page .ays_cont form {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.contacts_page .ays_btn_secondary {
  flex: 1;
  padding: 14px !important;
  width: auto !important;
  height: auto !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: all 0.2s;
}
.contacts_page .ays_btn_secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.contacts_page .ays_btn_primary {
  flex: 1;
  padding: 14px !important;
  width: auto !important;
  height: auto !important;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
  border: none !important;
  border-radius: 14px !important;
  color: var(--color-bg) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: all 0.2s;
}
.contacts_page .ays_btn_primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 229, 160, 0.25);
}

/* Pending invites table */
.contacts_page .uds_table {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 16px;
}
.contacts_page .uds_table_row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.6);
}
.contacts_page .uds_table_row b {
  color: rgba(255, 255, 255, 0.4);
}
.contacts_page .udstr_right button {
  background: rgba(244, 63, 94, 0.1) !important;
  border: 1px solid rgba(244, 63, 94, 0.2) !important;
  color: var(--color-danger) !important;
  border-radius: 10px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s;
}
.contacts_page .udstr_right button:hover {
  background: rgba(244, 63, 94, 0.2);
}
.contacts_page .no_pending_invites {
  color: rgba(255, 255, 255, 0.35);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

/* ---- Modal — frosted glass ---- */
body:has(.contacts_page) #chats_popup_wrap {
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: mooOverlayIn 0.2s ease-out;
}
body:has(.contacts_page) #chats_popup {
  background: rgba(20, 30, 38, 0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 32px;
  width: min(320px, 80%);
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes mooOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mooModalIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.moo-modal__title {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
  color: var(--color-text-primary);
  letter-spacing: -0.3px;
}
.moo-modal__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.moo-modal__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.moo-modal__option:hover {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.2);
}
.moo-modal__option:active {
  background: rgba(0, 229, 160, 0.14);
}
.moo-modal__option i {
  color: var(--color-accent);
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Nickname form on contact page */
.contacts_page .moo-settings-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 24px;
}
.contacts_page .moo-settings-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.contacts_page .moo-settings-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 229, 160, 0.1);
  border: 1px solid rgba(0, 229, 160, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 14px;
  flex-shrink: 0;
}
.contacts_page .moo-settings-card .settings_item_title {
  color: var(--color-text-primary);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1;
}
.moo-nickname-form {
  display: flex;
  gap: 8px;
}
.moo-nickname-form input[type="text"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  width: auto;
  margin: 0;
  -webkit-appearance: none;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.moo-nickname-form input[type="text"]:focus {
  border-color: rgba(0, 229, 160, 0.4);
}
.moo-nickname-form input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.moo-nickname-form button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.moo-nickname-form button:hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
}
.moo-nickname-form .moo-btn-danger-outline {
  background: transparent;
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: var(--color-danger);
}
.moo-nickname-form .moo-btn-danger-outline:hover {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.4);
}

/* Contacts page responsive */
@media (max-width: 480px) {
  .moo-profile-card {
    padding: 24px;
    border-radius: 20px;
  }
  .contacts_page .moo-form-card {
    padding: 28px 24px;
    border-radius: 20px;
  }
  .contacts_page .contact_option_indv {
    width: 90px;
    height: 90px;
  }
  .contacts_page .moo-settings-card {
    padding: 20px;
    border-radius: 16px;
  }
  .moo-nickname-form {
    flex-direction: column;
  }
}

/* ===== SETTINGS PAGE OVERHAUL ===== */

/* Page background */
html:has(.moo-settings) {
  background: var(--color-bg);
}
body:has(.moo-settings) {
  background:
    radial-gradient(ellipse at 70% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(244, 63, 94, 0.06) 0%, transparent 40%),
    var(--color-bg);
}

/* Header — dark glass */
body:has(.moo-settings) .chat_top_info.header_top {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body:has(.moo-settings) .hb_button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.2s;
}
body:has(.moo-settings) .hb_button:hover {
  background: rgba(0, 229, 160, 0.15);
  border-color: rgba(0, 229, 160, 0.3);
  color: var(--color-accent);
}

/* Bottom nav — dark glass */
body:has(.moo-settings) .bottom_nav {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body:has(.moo-settings) .bnm_inner,
body:has(.moo-settings) .bnm_item {
  background: rgba(6, 13, 16, 0.85);
}
body:has(.moo-settings) .bnm_item {
  color: rgba(255, 255, 255, 0.3);
}
body:has(.moo-settings) .bnm_selected {
  color: var(--color-accent);
}

/* Section headers */
.moo-settings__section {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.3);
  padding: 0 4px;
  margin-bottom: 12px;
}
.moo-settings__section:not(:first-of-type) {
  margin-top: 28px;
}

/* Content area */
.moo-settings {
  background: transparent !important;
  color: var(--color-text-primary);
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  height: calc(100% - 174px) !important;
}

/* Settings cards */
.moo-settings .moo-settings-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 16px;
}
.moo-settings .moo-settings-card:last-child,
.moo-settings .moo-settings-card:last-of-type,
.moo-settings .moo-form-card:last-child,
.moo-settings .moo-form-card:last-of-type,
.moo-settings .settings_item_last {
  margin-bottom: 0;
}
.moo-settings-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.moo-settings-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 229, 160, 0.1);
  border: 1px solid rgba(0, 229, 160, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 14px;
  flex-shrink: 0;
}
.moo-settings .moo-settings-card .settings_item_title {
  color: var(--color-text-primary);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1;
}

/* Settings card forms (Name, Mobile Number) */
.moo-settings .moo-settings-card form:not(.ap_inner):not(.ld_buttons) {
  display: flex;
  gap: 10px;
}
.moo-settings .moo-settings-card input[type="text"],
.moo-settings .moo-settings-card input[type="tel"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  width: auto;
  margin: 0;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.moo-settings .moo-settings-card input[type="text"]:focus,
.moo-settings .moo-settings-card input[type="tel"]:focus {
  border-color: rgba(0, 229, 160, 0.4);
}
.moo-settings .moo-settings-card input[readonly] {
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.05);
}
.moo-settings .moo-settings-card button[type="submit"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  width: auto;
  height: auto;
  margin: 0;
}
.moo-settings .moo-settings-card button[type="submit"]:hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
}

/* Account picture */
.moo-settings .moo-settings-card .ap_inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.moo-settings .moo-settings-card .ap_inner img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.moo-settings .moo-ap-buttons {
  display: flex;
  gap: 8px;
  height: 56px;
}
.moo-settings .moo-ap-buttons button {
  margin-left: 0;
  height: 100% !important;
}

/* Danger outline button */
.moo-settings .moo-btn-danger-outline {
  background: transparent !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  color: var(--color-danger) !important;
}
.moo-settings .moo-btn-danger-outline:hover {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
}

/* Push notifications */
.moo-settings .push_box {
  margin-top: 0;
}
.moo-pn-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}
.moo-pn-enabled {
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid rgba(0, 229, 160, 0.15);
  color: var(--color-accent);
}
.moo-pn-disabled {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
}
.moo-settings .push_button {
  display: flex;
  gap: 8px;
}
.moo-settings .push_button button {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-settings .push_button button:hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
}
.moo-settings .push_button .moo-btn-danger-outline {
  background: transparent !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  color: var(--color-danger) !important;
}
.moo-settings .push_button .moo-btn-danger-outline:hover {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
  color: var(--color-danger) !important;
}

/* Account devices table */
.moo-settings .uds_table {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
}
.moo-settings .uds_table_row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}
.moo-settings .uds_table_row:last-child {
  border-bottom: 0;
}
.moo-settings .uds_table_row b {
  color: rgba(255, 255, 255, 0.8);
}
.moo-settings .udstr_right button {
  background: rgba(244, 63, 94, 0.1) !important;
  border: 1px solid rgba(244, 63, 94, 0.2) !important;
  color: var(--color-danger) !important;
  border-radius: 10px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s;
  cursor: pointer;
}
.moo-settings .udstr_right button:hover {
  background: rgba(244, 63, 94, 0.2) !important;
}

/* Log out everywhere button */
.moo-settings .ld_buttons {
  display: block !important;
  margin-top: 14px;
}
.moo-settings .ld_buttons button {
  width: 100% !important;
  background: rgba(244, 63, 94, 0.08) !important;
  border: 1px solid rgba(244, 63, 94, 0.2) !important;
  border-radius: 12px !important;
  color: var(--color-danger) !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-settings .ld_buttons button:hover {
  background: rgba(244, 63, 94, 0.15) !important;
}

/* Return messages */
.moo-settings .settings_returnMessage {
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid rgba(0, 229, 160, 0.15);
  border-radius: 16px;
  color: var(--color-text-primary);
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.moo-settings .settings_returnMessage i {
  color: var(--color-accent);
  font-size: 18px;
  flex-shrink: 0;
}
.moo-settings .form_return_message {
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid rgba(0, 229, 160, 0.15);
  border-radius: 16px;
  color: var(--color-text-primary);
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  margin-bottom: 16px;
}

/* Privacy toggles */
.moo-privacy-toggles {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.moo-privacy-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.moo-privacy-toggle:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.moo-privacy-toggle:first-child {
  padding-top: 0;
}
.moo-privacy-toggle__text {
  flex: 1;
  min-width: 0;
}
.moo-privacy-toggle__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.moo-privacy-toggle__desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}
/* Toggle switch */
.moo-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.moo-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.moo-toggle__track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  transition: background 0.25s;
}
.moo-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: transform 0.25s, background 0.25s;
}
.moo-toggle input:checked + .moo-toggle__track {
  background: var(--color-accent);
}
.moo-toggle input:checked + .moo-toggle__track::after {
  transform: translateX(18px);
  background: var(--color-bg);
}
.moo-toggle input:disabled + .moo-toggle__track {
  opacity: 0.35;
  cursor: not-allowed;
}
.moo-toggle:has(input:disabled) {
  cursor: not-allowed;
}

/* Sub-pages (change picture, verify number) — reuse moo-form-card from contacts */
.moo-settings .moo-form-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  padding: 36px 32px;
}
.moo-settings .moo-form-icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.moo-settings .moo-form-card .settings_item_title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.moo-settings .moo-form-card .cn_subtext {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.moo-settings .moo-form-card .cn_input_title {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.moo-settings .moo-form-card form {
  display: block;
}
.moo-settings .moo-form-card input[type="text"],
.moo-settings .moo-form-card input[type="tel"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  color: var(--color-text-primary) !important;
  padding: 14px 0 !important;
  font-size: 16px !important;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  width: 100% !important;
  margin: 0 0 24px 0 !important;
  -webkit-appearance: none;
  transition: border-color 0.3s;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.moo-settings .moo-form-card input[type="text"]:focus,
.moo-settings .moo-form-card input[type="tel"]:focus {
  border-bottom-color: var(--color-accent) !important;
}
.moo-settings .moo-form-card input[readonly] {
  color: rgba(255, 255, 255, 0.4) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.moo-settings .moo-form-card input[type="file"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.6);
  padding: 14px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  width: calc(100% - 30px);
  margin-bottom: 24px;
  cursor: pointer;
}
.moo-settings .moo-form-card button[type="submit"] {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 24px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-family: 'Montserrat', sans-serif;
  width: 100% !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-settings .moo-form-card button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25);
}
.moo-settings .moo-form-card button[type="submit"]:active {
  transform: translateY(0) scale(0.98);
}

/* Bug report modal — frosted glass */
body:has(.moo-settings) #br_popup_wrap {
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: mooOverlayIn 0.2s ease-out;
}
body:has(.moo-settings) #br_popup {
  background: rgba(20, 30, 38, 0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 32px;
  width: min(360px, 80%);
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body:has(.moo-settings) .br_popup_title {
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 20px;
}
body:has(.moo-settings) .br_form {
  gap: 12px;
}
body:has(.moo-settings) .br_selectbox {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
}
body:has(.moo-settings) .br_selectbox option {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
body:has(.moo-settings) .br_textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  min-height: 100px;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
body:has(.moo-settings) .br_textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}
body:has(.moo-settings) .br_submit_button {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 24px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-family: 'Montserrat', sans-serif;
  width: 100% !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body:has(.moo-settings) .br_submit_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25);
}

/* Styled file picker (replaces native file input) */
.moo-file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.moo-file-picker {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 0;
}
.moo-file-picker:hover {
  background: rgba(0, 229, 160, 0.04);
  border-color: rgba(0, 229, 160, 0.2);
}
.moo-file-picker:active {
  background: rgba(0, 229, 160, 0.08);
}
.moo-file-picker--selected {
  background: rgba(0, 229, 160, 0.06);
  border-color: rgba(0, 229, 160, 0.25);
  border-style: solid;
}
.moo-file-picker__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 229, 160, 0.1);
  border: 1px solid rgba(0, 229, 160, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 18px;
  flex-shrink: 0;
}
.moo-file-picker__text {
  flex: 1;
  min-width: 0;
}
.moo-file-picker__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-file-picker--selected .moo-file-picker__label {
  color: var(--color-accent);
}
.moo-file-picker__hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}

/* ===== IMAGE CROP MODAL ===== */
#moo_crop_wrap {
  position: fixed;
  inset: 0;
  background: rgba(6, 13, 16, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100000;
  animation: mooOverlayIn 0.2s ease-out;
}
#moo_crop_modal {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text-primary);
}
.moo-crop__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  padding-top: calc(16px + env(safe-area-inset-top, 0));
  flex-shrink: 0;
}
.moo-crop__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
#moo_crop_cancel {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.moo-crop__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
  touch-action: none;
}
.moo-crop__img-area {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#moo_crop_img {
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  will-change: transform;
  opacity: 1 !important;
}
.moo-crop__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(6, 13, 16, 0.65);
  z-index: 2;
  pointer-events: none;
}
.moo-crop__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--color-accent);
  border-style: solid;
  border-width: 0;
}
.moo-crop__corner--tl { top: -2px; left: -2px; border-top-width: 3px; border-left-width: 3px; border-radius: 2px 0 0 0; }
.moo-crop__corner--tr { top: -2px; right: -2px; border-top-width: 3px; border-right-width: 3px; border-radius: 0 2px 0 0; }
.moo-crop__corner--bl { bottom: -2px; left: -2px; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 2px; }
.moo-crop__corner--br { bottom: -2px; right: -2px; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 2px 0; }

.moo-crop__controls {
  padding: 12px 24px;
  flex-shrink: 0;
}
.moo-crop__zoom {
  display: flex;
  align-items: center;
  gap: 14px;
}
.moo-crop__zoom button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.2s;
}
.moo-crop__zoom button:active {
  background: rgba(0, 229, 160, 0.15);
  border-color: rgba(0, 229, 160, 0.3);
  color: var(--color-accent);
}
.moo-crop__zoom-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.moo-crop__zoom-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.15s ease;
}

.moo-crop__actions {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
  flex-shrink: 0;
}
.moo-crop__btn-secondary {
  flex: 0.8;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}
.moo-crop__btn-primary {
  flex: 1.2;
  padding: 16px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border: none;
  border-radius: 14px;
  color: var(--color-bg);
  font-weight: 700;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.moo-crop__btn-primary:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Upload progress overlay */
#moo_crop_uploading {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.8);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 5;
}
.moo-crop__upload-spinner {
  font-size: 36px;
  color: var(--color-accent);
}
.moo-crop__upload-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Settings responsive */
@media (max-width: 480px) {
  .moo-settings .moo-settings-card {
    padding: 20px;
    border-radius: 16px;
  }
  .moo-settings .moo-form-card {
    padding: 28px 24px;
    border-radius: 20px;
  }
  .moo-settings-card__icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
}

/* ===== TOOLS PAGE OVERHAUL ===== */

/* Page background */
html:has(.moo-tools) {
  background: var(--color-bg);
}
body:has(.moo-tools) {
  background:
    radial-gradient(ellipse at 65% 25%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 35% 75%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(244, 63, 94, 0.06) 0%, transparent 40%),
    var(--color-bg);
}

/* Header — dark glass */
body:has(.moo-tools) .chat_top_info.header_top {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body:has(.moo-tools) .hb_button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.2s;
}
body:has(.moo-tools) .hb_button:hover {
  background: rgba(0, 229, 160, 0.15);
  border-color: rgba(0, 229, 160, 0.3);
  color: var(--color-accent);
}
body:has(.moo-tools) .hb_button_multi {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.2s;
}
body:has(.moo-tools) .hb_button_multi:hover {
  background: rgba(0, 229, 160, 0.15);
  border-color: rgba(0, 229, 160, 0.3);
  color: var(--color-accent);
}

/* Bottom nav — dark glass */
body:has(.moo-tools) .bottom_nav {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body:has(.moo-tools) .bnm_inner,
body:has(.moo-tools) .bnm_item {
  background: rgba(6, 13, 16, 0.85);
}
body:has(.moo-tools) .bnm_item {
  color: rgba(255, 255, 255, 0.3);
}
body:has(.moo-tools) .bnm_selected {
  color: var(--color-accent);
}

/* Content area */
.moo-tools {
  background: transparent !important;
  color: var(--color-text-primary);
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  height: calc(100% - 174px) !important;
}

/* ---- Tools list items (main page) ---- */
.moo-tools__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  color: var(--color-text-primary);
  text-decoration: none;
  margin-bottom: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.moo-tools__item:last-child,
.moo-tools__item:last-of-type {
  margin-bottom: 0;
}
.moo-tools__item:active {
  background: rgba(255, 255, 255, 0.08);
}
.moo-tools__item-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(0, 229, 160, 0.1);
  border: 1px solid rgba(0, 229, 160, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 18px;
  flex-shrink: 0;
}
.moo-tools__item-icon--dev {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: var(--color-dev);
}
.moo-tools__item-info {
  flex: 1;
  min-width: 0;
}
.moo-tools__item-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-tools__item-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-tools__item-arrow {
  color: rgba(255, 255, 255, 0.15);
  font-size: 14px;
  flex-shrink: 0;
}
.moo-tools__empty {
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  padding: 60px 0;
  font-size: 15px;
}

/* ---- Medication list items ---- */
.moo-tools__med-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  color: var(--color-text-primary);
  text-decoration: none;
  margin-bottom: 10px;
  transition: all 0.25s;
}
.moo-tools__med-item:last-child,
.moo-tools__med-item:last-of-type {
  margin-bottom: 0;
}
.moo-tools__med-item:active {
  background: rgba(255, 255, 255, 0.08);
}
.moo-tools__med-item.moo-med-due {
  border-color: rgba(0, 229, 160, 0.2);
  background: rgba(0, 229, 160, 0.04);
}
.moo-tools__med-info {
  flex: 1;
  min-width: 0;
}
.moo-tools__med-name {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-med-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.moo-med-due-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-bg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.moo-tools__med-detail {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Medication taken banner */
.moo-med-taken-banner {
  margin-bottom: 16px;
}
.moo-med-taken-banner button {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border: none;
  border-radius: 14px;
  color: var(--color-bg);
  font-weight: 700;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-med-taken-banner button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25);
}
.moo-med-taken-banner button:active {
  transform: translateY(0) scale(0.98);
}

/* Medication reorder banner */
.moo-med-reorder-banner {
  margin-bottom: 16px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 14px;
  padding: 16px 20px;
}
.moo-med-reorder-banner__label {
  color: var(--color-warning);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.moo-med-reorder-banner button {
  width: 100%;
  padding: 12px 24px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 10px;
  color: var(--color-warning);
  font-weight: 700;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-med-reorder-banner button:active {
  transform: scale(0.98);
}

/* Medication reorder list badges */
.moo-med-reorder-badge,
.moo-med-reorder-badge--overdue {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}
.moo-med-reorder-badge {
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-warning);
}
.moo-med-reorder-badge--overdue {
  background: rgba(244, 63, 94, 0.15);
  color: var(--color-danger);
}
.moo-tools__med-item.moo-med-reorder-due {
  border-color: rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.04);
}

/* Medication date input */
.moo-tools .moo-settings-card input[type="date"],
.moo-tools .moo-form-card input[type="date"] {
  color-scheme: dark;
}

/* Medication custom date picker */
.moo-med-datepicker {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  animation: mooCalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-sizing: border-box;
}
@keyframes mooCalIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.moo-med-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.moo-med-datepicker__nav {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.moo-med-datepicker__nav:active {
  background: rgba(0, 229, 160, 0.12);
  border-color: rgba(0, 229, 160, 0.25);
  transform: scale(0.92);
}
.moo-med-datepicker__nav--disabled {
  opacity: 0.15;
  pointer-events: none;
}
.moo-med-datepicker__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.moo-med-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 4px;
}
.moo-med-datepicker__weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
}
.moo-med-datepicker__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-gap: 4px;
  gap: 4px;
}
.moo-med-datepicker__day {
  height: 36px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
  background: none;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.moo-med-datepicker__day:active:not(.moo-med-datepicker__day--past):not(.moo-med-datepicker__day--empty) {
  transform: scale(0.88);
  background: rgba(0, 229, 160, 0.15);
}
.moo-med-datepicker__day--empty {
  cursor: default;
}
.moo-med-datepicker__day--past {
  color: rgba(255, 255, 255, 0.12);
  cursor: default;
}
.moo-med-datepicker__day--today {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
  font-weight: 700;
}
.moo-med-datepicker__day--selected {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-bg);
  font-weight: 700;
  border-color: transparent;
}
/* Override generic button styles on datepicker day cells */
.moo-med-datepicker__day {
  padding: 0 !important;
  margin: 3px !important;
  height: 36px !important;
}

/* Medication detail cards — reuse settings card styles */
.moo-tools .moo-settings-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 16px;
}
.moo-tools .moo-settings-card:last-child,
.moo-tools .moo-settings-card:last-of-type,
.moo-tools .moo-form-card:last-child,
.moo-tools .moo-form-card:last-of-type {
  margin-bottom: 0;
}
.moo-tools .moo-settings-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.moo-tools .moo-settings-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 229, 160, 0.1);
  border: 1px solid rgba(0, 229, 160, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 14px;
  flex-shrink: 0;
}
.moo-tools .moo-settings-card .settings_item_title {
  color: var(--color-text-primary);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1;
}
.moo-tools .moo-settings-card__value {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
}
.moo-tools .moo-settings-card form {
  display: flex;
  gap: 10px;
}
.moo-tools .moo-settings-card input[type="text"],
.moo-tools .moo-settings-card input[type="tel"],
.moo-tools .moo-settings-card input[type="time"],
.moo-tools .moo-settings-card input[type="date"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  width: auto;
  height: auto;
  margin: 0;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.moo-tools .moo-settings-card input:focus {
  border-color: rgba(0, 229, 160, 0.4);
}
.moo-tools .moo-settings-card select {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto;
  margin: 0;
}
.moo-tools .moo-settings-card select option {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
.moo-tools .moo-settings-card button[type="submit"],
.moo-tools .moo-settings-card button[type="button"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  width: auto;
  height: auto;
  margin: 0;
}
.moo-tools .moo-settings-card button[type="submit"]:hover,
.moo-tools .moo-settings-card button[type="button"]:hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
}

/* Form cards (new medication) — reuse pattern */
.moo-tools .moo-form-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  padding: 36px 32px;
}
.moo-tools .moo-form-icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.moo-tools .moo-form-card .settings_item_title {
  color: var(--color-text-primary);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.moo-tools .moo-form-card .cn_subtext {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.moo-tools .moo-form-card .cn_input_title {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  margin-top: 20px;
}
.moo-tools .moo-form-card .cn_input_title:first-of-type {
  margin-top: 0;
}
.moo-tools .moo-form-card form {
  display: block;
}
.moo-tools .moo-form-card input[type="text"],
.moo-tools .moo-form-card input[type="time"],
.moo-tools .moo-form-card input[type="date"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  color: var(--color-text-primary) !important;
  padding: 14px 0 !important;
  font-size: 16px !important;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 4px 0 !important;
  -webkit-appearance: none;
  transition: border-color 0.3s;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.moo-tools .moo-form-card input[type="text"]:focus,
.moo-tools .moo-form-card input[type="time"]:focus,
.moo-tools .moo-form-card input[type="date"]:focus {
  border-bottom-color: var(--color-accent) !important;
}
.moo-tools .moo-form-card input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.moo-tools .moo-form-card select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  margin-bottom: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.moo-tools .moo-form-card select option {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
.moo-tools .moo-form-card button[type="submit"] {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 24px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-family: 'Montserrat', sans-serif;
  width: 100% !important;
  margin-top: 24px !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-tools .moo-form-card button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25);
}

/* ---- Notes Tool ---- */
.moo-note-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  color: var(--color-text-primary);
  text-decoration: none;
  margin-bottom: 10px;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.moo-note-item:last-child,
.moo-note-item:last-of-type {
  margin-bottom: 0;
}
.moo-note-item:active {
  background: rgba(255, 255, 255, 0.08);
}
.moo-note-item__info {
  flex: 1;
  min-width: 0;
}
.moo-note-item__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-note-item__preview {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.moo-note-item__meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.moo-note-item__shared {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(0, 229, 160, 0.08);
  color: var(--color-accent);
  font-weight: 600;
  font-size: 10px;
}

/* Note editor */
.moo-note-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.moo-note-editor__title {
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 24px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  padding: 0;
  margin: 0 0 8px;
  width: 100%;
  outline: none;
  letter-spacing: -0.3px;
  -webkit-appearance: none;
  user-select: text;
  -webkit-user-select: text;
}
.moo-note-editor__title::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.moo-note-editor__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 16px;
  font-weight: 500;
}
.moo-note-editor__content {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.7;
  padding: 0;
  margin: 0;
  width: 100%;
  resize: none;
  outline: none;
  -webkit-appearance: none;
  user-select: text;
  -webkit-user-select: text;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
.moo-note-editor__content::placeholder {
  color: rgba(255, 255, 255, 0.15);
}

/* Note lock screen */
.moo-note-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 0;
  padding: 40px 24px;
}
.moo-note-lock__icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(0, 229, 160, 0.06);
  border: 1px solid rgba(0, 229, 160, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--color-accent);
  margin-bottom: 20px;
  box-shadow: 0 0 40px rgba(0, 229, 160, 0.08);
}
.moo-note-lock__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 6px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moo-note-lock__subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 28px;
}
.moo-note-lock__form {
  width: 100%;
  max-width: 280px;
}
.moo-pw-mask {
  -webkit-text-security: disc;
  text-security: disc;
}
.moo-note-lock__input {
  width: calc(100% - 36px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: var(--color-text-primary);
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  outline: none;
  text-align: center;
  letter-spacing: 2px;
  -webkit-appearance: none;
  transition: border-color 0.2s;
}
.moo-note-lock__input:focus {
  border-color: rgba(0, 229, 160, 0.4);
}
.moo-note-lock__input::placeholder {
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0;
}
.moo-note-lock__error {
  font-size: 12px;
  color: var(--color-danger);
  font-weight: 600;
  min-height: 16px;
  margin-top: 8px;
}
.moo-note-lock__btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border: none;
  border-radius: 14px;
  color: var(--color-bg);
  font-size: 15px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.moo-note-lock__btn:active {
  transform: scale(0.97);
}

/* ---- Weather Tool ---- */

/* Loading spinner */
.moo-wt-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  font-size: 28px;
  color: var(--color-accent);
  animation: moo-wt-pulse 1.5s ease-in-out infinite;
}
@keyframes moo-wt-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Error state */
.moo-wt-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  gap: 12px;
}
.moo-wt-error__icon {
  font-size: 36px;
  color: var(--color-warning);
}
.moo-wt-error__text {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}
.moo-wt-error__retry {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-bg);
  border: none;
  border-radius: 12px;
  padding: 10px 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
}

/* Setup / onboarding screen */
.moo-wt-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  text-align: center;
}
.moo-wt-setup__icon {
  font-size: 52px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-sky));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 24px rgba(0,229,160,0.3));
}
.moo-wt-setup__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.moo-wt-setup__subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 24px;
  line-height: 1.5;
  max-width: 300px;
}

/* Search row (shared between setup and settings modal) */
.moo-wt-search-row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 360px;
}
.moo-wt-search-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.2s;
}
.moo-wt-search-input:focus {
  border-color: var(--color-accent);
}
.moo-wt-search-input::placeholder {
  color: rgba(255,255,255,0.25);
}
.moo-wt-search-btn {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-bg);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.moo-wt-search-btn:active {
  transform: scale(0.93);
}

/* Search status */
.moo-wt-search-status {
  width: 100%;
  max-width: 360px;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  text-align: center;
}
.moo-wt-search-status i {
  color: var(--color-accent);
}

/* Search results */
.moo-wt-search-results {
  width: 100%;
  max-width: 360px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.moo-wt-result {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-family: 'Montserrat', sans-serif;
  color: var(--color-text-primary);
}
.moo-wt-result:active {
  background: rgba(0,229,160,0.08);
  border-color: rgba(0,229,160,0.2);
}
.moo-wt-result__name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.moo-wt-result__detail {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

/* ---- Weather Dashboard ---- */

.moo-wt-dashboard {
  padding: 16px;
}

/* Hero card */
.moo-wt-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}
.moo-wt-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(0,229,160,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.moo-wt-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -10%;
  width: 50%;
  height: 70%;
  background: radial-gradient(circle, rgba(56,189,248,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.moo-wt-hero__location {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.moo-wt-hero__icon {
  font-size: 48px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-sky));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 16px rgba(0,229,160,0.25));
}
.moo-wt-hero__temp {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 1;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--color-text-primary) 30%, var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.moo-wt-hero__condition {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.moo-wt-hero__feels {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  position: relative;
  z-index: 1;
}

/* Detail pills row */
.moo-wt-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.moo-wt-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.moo-wt-pill__icon {
  font-size: 16px;
  color: var(--color-accent);
  margin-bottom: 8px;
  opacity: 0.8;
}
.moo-wt-pill__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 3px;
}
.moo-wt-pill__label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Sunrise / Sunset bar */
.moo-wt-sun {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.moo-wt-sun__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.moo-wt-sun__item i {
  color: var(--color-warning);
  font-size: 14px;
  opacity: 0.7;
}
.moo-wt-sun__item i.fa-moon {
  color: var(--color-night);
}
.moo-wt-sun__divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.1);
}

/* 7-Day Forecast */
.moo-wt-forecast-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  padding: 0 2px;
}
.moo-wt-forecast {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.moo-wt-forecast-row {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: background 0.2s;
}
.moo-wt-forecast-row--today {
  border-color: rgba(0,229,160,0.2);
  background: rgba(0,229,160,0.04);
}
.moo-wt-forecast-row__day {
  width: 46px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  flex-shrink: 0;
}
.moo-wt-forecast-row--today .moo-wt-forecast-row__day {
  color: var(--color-accent);
}
.moo-wt-forecast-row__icon {
  width: 28px;
  text-align: center;
  font-size: 16px;
  color: var(--color-accent);
  opacity: 0.7;
  flex-shrink: 0;
}
.moo-wt-forecast-row__cond {
  flex: 1;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-wt-forecast-row__temps {
  display: flex;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.moo-wt-forecast-row__hi {
  color: var(--color-text-primary);
}
.moo-wt-forecast-row__lo {
  color: rgba(255,255,255,0.3);
}
.moo-wt-forecast-row__rain {
  width: 48px;
  text-align: right;
  font-size: 11px;
  color: rgba(56,189,248,0.6);
  flex-shrink: 0;
  margin-left: 8px;
}
.moo-wt-forecast-row__rain i {
  font-size: 10px;
}

/* ---- Weather Settings Modal ---- */

#wts_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6,13,16,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#wts_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  background: rgba(20,30,38,0.95);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  width: min(400px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
#wts_body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Settings cards */
.moo-wt-setting {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.moo-wt-setting:last-child {
  border-bottom: none;
}
.moo-wt-setting__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}
.moo-wt-setting__header i {
  color: var(--color-accent);
  font-size: 14px;
  opacity: 0.7;
  width: 18px;
  text-align: center;
}
.moo-wt-setting__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}
.moo-wt-setting__btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px 16px;
  color: var(--color-accent);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.moo-wt-setting__btn:active {
  background: rgba(255,255,255,0.1);
}

/* Unit toggle */
.moo-wt-unit-toggle {
  display: flex;
  gap: 6px;
}
.moo-wt-unit-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.moo-wt-unit-btn--active {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-bg);
  border-color: transparent;
}

/* Notification row */
.moo-wt-notify-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.moo-wt-notify-hint {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  line-height: 1.4;
}

/* Toggle switch */
.moo-wt-toggle-wrap {
  cursor: pointer;
  padding: 4px 0;
}
.moo-wt-toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  position: relative;
  transition: background 0.25s;
}
.moo-wt-toggle--on {
  background: var(--color-accent);
}
.moo-wt-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.moo-wt-toggle--on .moo-wt-toggle__knob {
  transform: translateX(20px);
}

/* Time input */
.moo-wt-time-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--color-text-primary);
  outline: none;
  color-scheme: dark;
  transition: border-color 0.2s;
}
.moo-wt-time-input:focus {
  border-color: var(--color-accent);
}
.moo-wt-time-input:disabled {
  opacity: 0.35;
}

/* Reset weather button */
.moo-wt-reset-btn {
  width: 100%;
  padding: 10px 16px;
  background: rgba(244,63,94,0.1);
  border: 1px solid rgba(244,63,94,0.2);
  border-radius: 10px;
  color: var(--color-danger);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}
.moo-wt-reset-btn:active {
  background: rgba(244,63,94,0.18);
}

/* Reset confirmation modal */
#wtr_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6,13,16,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#wtr_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20,30,38,0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(244,63,94,0.15);
  border-radius: 24px;
  width: min(380px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}

/* Back button in settings location search */
.moo-wt-back-btn {
  background: none;
  border: none;
  color: var(--color-accent);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Dashboard stagger animation */
.moo-wt-dashboard .moo-wt-hero { animation: moo-wt-fadeup 0.4s ease-out both; }
.moo-wt-dashboard .moo-wt-details { animation: moo-wt-fadeup 0.4s ease-out 0.08s both; }
.moo-wt-dashboard .moo-wt-sun { animation: moo-wt-fadeup 0.4s ease-out 0.14s both; }
.moo-wt-dashboard .moo-wt-forecast-title { animation: moo-wt-fadeup 0.4s ease-out 0.18s both; }
.moo-wt-dashboard .moo-wt-forecast { animation: moo-wt-fadeup 0.4s ease-out 0.22s both; }

@keyframes moo-wt-fadeup {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile refinements */
@media (max-width: 380px) {
  .moo-wt-details {
    grid-template-columns: repeat(2, 1fr);
  }
  .moo-wt-hero__temp {
    font-size: 48px;
  }
  .moo-wt-forecast-row__cond {
    display: none;
  }
}

/* ===== CHAT PASSWORD ENCRYPTION ===== */

/* Chat lock screen — fills chat content area below header */
.moo-chat-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  height: calc(100% - 84px);
  min-height: 0;
  box-sizing: border-box;
}
.moo-chat-lock .moo-note-lock__icon {
  box-shadow: 0 0 60px rgba(0, 229, 160, 0.1);
}

/* Chat info — encryption status */
.moo-enc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.moo-enc-status i {
  font-size: 13px;
  flex-shrink: 0;
}
.moo-enc-status--disabled {
  color: rgba(255, 255, 255, 0.3);
}

/* Enable encryption button */
.moo-enc-enable-btn {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border: none;
  border-radius: 12px;
  color: var(--color-bg);
  font-size: 15px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-enc-enable-btn:active {
  transform: scale(0.97);
}

/* Disable encryption button */
.moo-enc-disable-btn {
  width: 100%;
  padding: 14px 20px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 12px;
  color: var(--color-warning);
  font-size: 15px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-enc-disable-btn:hover {
  background: rgba(251, 191, 36, 0.15);
}
.moo-enc-disable-btn:active {
  transform: scale(0.97);
}

/* Enable/Disable encryption modals */
#cpe_wrap, #cpd_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#cpe_modal, #cpd_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(380px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Forward picker — disabled encrypted targets */
.forward_item_disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Locked note list label */
.moo-note-item__locked-label {
  color: rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.moo-note-item__locked-label i {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
}

/* Lock/Remove lock modals — reuse nc_modal structure */
#npl_wrap, #npr_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#npl_modal, #npr_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(380px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Delete note modal */
#nd_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#nd_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(244, 63, 94, 0.15);
  border-radius: 24px;
  width: min(380px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Invite code modal */
#ic_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#ic_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(380px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Settings account modals (username, password, recovery key) */
#cu_wrap, #cp_wrap, #rk_wrap, #tf_wrap, #tfd_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#cu_modal, #cp_modal, #rk_modal, #tf_modal, #tfd_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(380px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Create note modal */
#nc_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#nc_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(380px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.moo-nc-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 24px 0;
  flex-shrink: 0;
}
.moo-nc-modal__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 229, 160, 0.1);
  border: 1px solid rgba(0, 229, 160, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-accent);
}
.moo-nc-modal__title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.moo-nc-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.moo-nc-modal__input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: var(--color-text-primary);
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  user-select: text;
  -webkit-user-select: text;
}
.moo-nc-modal__input:focus {
  border-color: rgba(0, 229, 160, 0.4);
}
.moo-nc-modal__input::placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
}
.moo-nc-modal__actions {
  display: flex;
  gap: 10px;
  padding: 0 24px 24px;
}
.moo-nc-modal__create {
  flex: 1;
  padding: 14px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border: none;
  color: var(--color-bg);
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.moo-nc-modal__create:hover:not(:disabled) {
  box-shadow: 0 8px 24px rgba(0, 229, 160, 0.25);
}
.moo-nc-modal__create:disabled {
  cursor: not-allowed;
}

/* Note share modal — reuses FM modal styles */
#note_share_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#note_share_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(400px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.moo-note-share__btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.moo-note-share__btn--active {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
}
.moo-note-share__btn--cancel {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.25);
  color: var(--color-danger);
}

/* ---- Calculator ---- */
.moo-calc {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: 0 auto;
  gap: 16px;
}
.moo-calc__display {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 24px 24px 20px;
  text-align: right;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.moo-calc__expression {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
  min-height: 20px;
  line-height: 20px;
  margin-bottom: 8px;
  word-break: break-all;
}
.moo-calc__expression i {
  font-size: 10px;
  vertical-align: middle;
}
.moo-calc__result {
  font-size: 48px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.1;
  letter-spacing: -1.5px;
  word-break: break-all;
  transition: font-size 0.15s ease;
}
.moo-calc__keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.moo-calc__key {
  aspect-ratio: 1;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  font-size: 22px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: 0;
}
.moo-calc__key:active {
  transform: scale(0.93);
  background: rgba(255, 255, 255, 0.1);
}
.moo-calc__key--fn {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
  font-size: 17px;
  font-weight: 700;
}
.moo-calc__key--fn:active {
  background: rgba(255, 255, 255, 0.14);
}
.moo-calc__key--op {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.15);
  color: var(--color-accent);
  font-size: 18px;
}
.moo-calc__key--op:active {
  background: rgba(0, 229, 160, 0.25);
}
.moo-calc__key--zero {
  grid-column: span 2;
  aspect-ratio: auto;
  border-radius: 16px;
}
.moo-calc__key--eq {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border-color: transparent;
  color: var(--color-bg);
  font-size: 24px;
  font-weight: 800;
}
.moo-calc__key--eq:active {
  transform: scale(0.93);
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
}

/* Calculator responsive */
@media (max-width: 380px) {
  .moo-calc__keypad {
    gap: 8px;
  }
  .moo-calc__key {
    border-radius: 14px;
    font-size: 20px;
  }
  .moo-calc__key--fn {
    font-size: 15px;
  }
  .moo-calc__key--op {
    font-size: 16px;
  }
  .moo-calc__result {
    font-size: 40px;
  }
}

/* ---- Gang Rota ---- */
.moo-gr-holiday {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 16px;
  color: var(--color-warning);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
}
.moo-gr-holiday i {
  font-size: 18px;
  flex-shrink: 0;
}
.moo-gr-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 12px;
  margin-top: 24px;
}
.moo-gr-section-label:first-child,
.moo-gr-holiday + .moo-gr-section-label {
  margin-top: 0;
}
.moo-gr-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  max-width: 500px;
}
.moo-gr-card--active {
  background: rgba(0, 229, 160, 0.06);
  border-color: rgba(0, 229, 160, 0.2);
}
.moo-gr-card__photo {
  width: 30%;
  max-width: 100px;
  overflow: hidden;
  flex-shrink: 0;
}
.moo-gr-card__photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.moo-gr-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.moo-gr-card__detail {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}
.moo-gr-card--active .moo-gr-card__name {
  color: var(--color-accent);
}
.moo-gr-card--active .moo-gr-card__detail {
  color: rgba(255, 255, 255, 0.6);
}
.moo-gr-upcoming {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Admin / Developer tables ---- */
.moo-tools .table_cont {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  overflow: hidden;
}
.moo-tools .table_header {
  background: rgba(255, 255, 255, 0.04);
  padding: 16px 20px;
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.moo-tools .table_header i {
  color: var(--color-accent);
  font-size: 14px;
}
.moo-tools .table_content {
  background: transparent;
}
.moo-tools .table_headers {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.moo-tools .table_row {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.moo-tools .table_row_content {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.moo-tools .table_row_content:last-child {
  border-bottom: 0;
}
.moo-tools .table_row_content:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}
.moo-tools .table_row_content b {
  color: rgba(255, 255, 255, 0.8);
}
.moo-tools .table_column {
  padding: 14px 16px;
  font-size: 13px;
}
.moo-tools .table_buttons button {
  background: rgba(244, 63, 94, 0.1) !important;
  border: 1px solid rgba(244, 63, 94, 0.2) !important;
  color: var(--color-danger) !important;
  border-radius: 8px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  cursor: pointer;
  transition: all 0.2s;
}
.moo-tools .table_buttons button:hover {
  background: rgba(244, 63, 94, 0.2) !important;
}
.moo-tools .fa_eye_slash_button {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  color: var(--color-warning) !important;
}
.moo-tools .fa_eye_slash_button:hover {
  background: rgba(245, 158, 11, 0.2) !important;
}
.moo-tools .table_open_content_button {
  background: rgba(0, 229, 160, 0.1);
  border: 1px solid rgba(0, 229, 160, 0.15);
  color: var(--color-accent);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
  height: 28px;
}
.moo-tools .table_norows {
  padding: 20px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  text-align: left;
}
.moo-tools .tc_margintop {
  margin-top: 16px;
}

/* Content dialog modal (admin) */
body:has(.moo-tools) #content_dialog_wrap {
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: mooOverlayIn 0.2s ease-out;
}
body:has(.moo-tools) #cd_popup {
  background: rgba(20, 30, 38, 0.9);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  width: 80%;
  max-height: 80%;
  color: rgba(255, 255, 255, 0.7);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body:has(.moo-tools) .content_dialog_text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* Beehive logo */
.moo-tools .hli_cont {
  margin-bottom: 12px;
}
.moo-tools .hive_logo_img {
  border-radius: 16px;
}

/* Tools responsive */
@media (max-width: 480px) {
  .moo-tools .moo-settings-card {
    padding: 20px;
    border-radius: 16px;
  }
  .moo-tools .moo-form-card {
    padding: 28px 24px;
    border-radius: 20px;
  }
  .moo-tools__item {
    padding: 16px;
    border-radius: 16px;
  }
  .moo-tools__item-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  .moo-tools .table_column {
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* ===== CHATS LIST PAGE OVERHAUL ===== */

/* Page background */
html:has(.moo-chats) {
  background: var(--color-bg);
}
body:has(.moo-chats) {
  background:
    radial-gradient(ellipse at 60% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(244, 63, 94, 0.06) 0%, transparent 40%),
    var(--color-bg);
}

/* Header — dark glass */
body:has(.moo-chats) .chat_top_info.header_top {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body:has(.moo-chats) .hb_button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.2s;
}
body:has(.moo-chats) .hb_button:hover {
  background: rgba(0, 229, 160, 0.15);
  border-color: rgba(0, 229, 160, 0.3);
  color: var(--color-accent);
}

/* Bottom nav — dark glass */
body:has(.moo-chats) .bottom_nav {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body:has(.moo-chats) .bnm_inner,
body:has(.moo-chats) .bnm_item {
  background: rgba(6, 13, 16, 0.85);
}
body:has(.moo-chats) .bnm_item {
  color: rgba(255, 255, 255, 0.3);
}
body:has(.moo-chats) .bnm_selected {
  color: var(--color-accent);
}

/* Content area */
.moo-chats {
  background: transparent !important;
  color: var(--color-text-primary);
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  height: calc(100% - 174px) !important;
}

/* Loading screen */
body:has(.moo-chats) .chatbox_loading {
  position: absolute !important;
  inset: 64px 0 70px 0 !important;
  background:
    radial-gradient(ellipse at 60% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    var(--color-bg);
  color: var(--color-text-primary);
}
body:has(.moo-chats) .cli_spin {
  color: var(--color-accent);
  font-size: 36px;
}
body:has(.moo-chats) .cli_text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  font-weight: 600;
  margin-top: 16px;
}

/* Chat list items — glass cards */
.moo-chats .chat_cont {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px;
  padding: 16px !important;
  margin-bottom: 10px !important;
  transition: background 0.25s;
}
.moo-chats .chat_cont:active {
  background: rgba(255, 255, 255, 0.08);
}
.moo-chats .chat_cont_first {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 16px !important;
}
.moo-chats .chat_cont_picture img {
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.moo-chats .chat_name_title {
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-chats .chat_name_sub {
  color: rgba(255, 255, 255, 0.4);
}
.moo-chats .chat_cont_name {
  color: var(--color-text-primary);
  width: calc(100% - 170px);
}

/* Date/time info */
.moo-chats .chat_right_info {
  right: 16px;
}
.moo-chats .chat_right_dt {
  color: rgba(255, 255, 255, 0.35);
}

/* Muted chat icon */
.chat_muted_icon {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 4px;
  text-align: right;
}

/* Unread messages badge */
.moo-chats .chat_unread_messages {
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

/* No chats empty state */
.moo-chats .chats_list_none {
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  padding: 60px 0;
  font-size: 15px;
}

/* Last chat item — no bottom margin */
.moo-chats > a:last-of-type .chat_cont {
  margin-bottom: 0 !important;
}

/* ---- Modal — frosted glass ---- */
body:has(.moo-chats) #chats_popup_wrap {
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: mooOverlayIn 0.2s ease-out;
}
body:has(.moo-chats) #chats_popup {
  background: rgba(20, 30, 38, 0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 32px;
  width: min(320px, 80%);
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Message Yourself form button — styled like moo-modal__option */
.moo-modal__option--form {
  padding: 0;
  background: none;
  border: none;
}
.moo-modal__option--form form {
  width: 100%;
}
.moo-modal__option--form button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  transition: all 0.2s;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.moo-modal__option--form button:hover {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.2);
}
.moo-modal__option--form button:active {
  background: rgba(0, 229, 160, 0.14);
}
.moo-modal__option--form button i {
  color: var(--color-accent);
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* ===== CHAT INFO PAGE OVERHAUL ===== */

/* Page background */
html:has(.moo-chatinfo) {
  background: var(--color-bg);
}
body:has(.moo-chatinfo) {
  background:
    radial-gradient(ellipse at 60% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(244, 63, 94, 0.06) 0%, transparent 40%),
    var(--color-bg);
}

/* Header — dark glass */
body:has(.moo-chatinfo) .chat_top_info {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body:has(.moo-chatinfo) .chat_back_button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body:has(.moo-chatinfo) .chat_other_name {
  color: var(--color-text-primary);
}
body:has(.moo-chatinfo) #chat_online_status {
  color: rgba(255, 255, 255, 0.4);
}
body:has(.moo-chatinfo) .my_top_display {
  color: rgba(255, 255, 255, 0.4);
}

/* Content area */
.moo-chatinfo {
  background: transparent !important;
  color: var(--color-text-primary);
  padding: 20px !important;
  height: calc(100% - 104px) !important;
  width: calc(100% - 40px) !important;
}

/* Settings cards — reuse pattern */
.moo-chatinfo .moo-settings-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 16px;
}
.moo-chatinfo .moo-settings-card:last-child,
.moo-chatinfo .moo-settings-card:last-of-type,
.moo-chatinfo .moo-form-card:last-child,
.moo-chatinfo .moo-form-card:last-of-type {
  margin-bottom: 0;
}
.moo-chatinfo .moo-settings-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.moo-chatinfo .moo-settings-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 229, 160, 0.1);
  border: 1px solid rgba(0, 229, 160, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 14px;
  flex-shrink: 0;
}
.moo-chatinfo .moo-settings-card .settings_item_title {
  color: var(--color-text-primary);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1;
}

/* Card inline forms (Group Name) */
.moo-chatinfo .moo-settings-card form:not(.ap_inner) {
  display: flex;
  gap: 10px;
}
.moo-chatinfo .moo-settings-card input[type="text"],
.moo-chatinfo .moo-settings-card input[type="tel"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  width: auto;
  margin: 0;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.moo-chatinfo .moo-settings-card input:focus {
  border-color: rgba(0, 229, 160, 0.4);
}
.moo-chatinfo .moo-settings-card input[readonly] {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.06);
  cursor: default;
}
.moo-chatinfo .moo-settings-card button[type="submit"],
.moo-chatinfo .moo-settings-card button[type="button"]:not(.moo-enc-enable-btn):not(.moo-enc-disable-btn):not(.moo-chat-media__show-all):not(.moo-member-btn) {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  width: auto;
  height: auto;
  margin: 0;
}
.moo-chatinfo .moo-settings-card button[type="submit"]:hover,
.moo-chatinfo .moo-settings-card button[type="button"]:not(.moo-enc-enable-btn):not(.moo-enc-disable-btn):not(.moo-chat-media__show-all):not(.moo-member-btn):hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
}

/* Group picture */
.moo-chatinfo .moo-settings-card .ap_inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.moo-chatinfo .moo-settings-card .ap_inner img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.moo-chatinfo .moo-ap-buttons {
  display: flex;
  gap: 8px;
  height: 56px;
}
.moo-chatinfo .moo-ap-buttons button {
  height: 100% !important;
}
.moo-chatinfo .moo-btn-danger-outline {
  background: transparent !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  color: var(--color-danger) !important;
}
.moo-chatinfo .moo-btn-danger-outline:hover {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
}

/* Chat participants list */
.moo-chatinfo .chat_participants {
  margin-top: 8px;
}
.moo-chatinfo .chat_cont {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px;
  padding: 14px !important;
  margin-bottom: 8px !important;
  transition: background 0.25s;
}
.moo-chatinfo .chat_cont:active {
  background: rgba(255, 255, 255, 0.08);
}
.moo-chatinfo .chat_cont_first {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 14px !important;
}
.moo-chatinfo .chat_cont_picture img {
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.moo-chatinfo .chat_cont_name {
  width: calc(100% - 80px);
}
.moo-chatinfo .chat_name_title {
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-chatinfo .chat_participants > a:last-child .chat_cont,
.moo-chatinfo .chat_participants > .chat_cont:last-child {
  margin-bottom: 0 !important;
}

/* Return messages */
.moo-chatinfo .settings_returnMessage {
  background: rgba(0, 229, 160, 0.08);
  border: 1px solid rgba(0, 229, 160, 0.15);
  border-radius: 16px;
  color: var(--color-text-primary);
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.moo-chatinfo .settings_returnMessage i {
  color: var(--color-accent);
  font-size: 18px;
  flex-shrink: 0;
}

/* Leave chat button */
.moo-chatinfo__leave {
  margin-top: 16px;
}
.moo-chatinfo__leave button {
  width: 100%;
  padding: 16px 24px;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.2);
  border-radius: 14px;
  color: var(--color-danger);
  font-weight: 700;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-chatinfo__leave button:hover {
  background: rgba(244, 63, 94, 0.15);
}

/* Leave chat confirmation dialog */
.moo-chatinfo__confirm {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  margin-bottom: 16px;
}
.moo-chatinfo__confirm-icon {
  font-size: 28px;
  color: var(--color-danger);
  margin-bottom: 16px;
}
.moo-chatinfo__confirm-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 24px;
}
.moo-chatinfo__confirm form {
  display: flex;
  gap: 10px;
}
.moo-chatinfo__confirm-btn--secondary {
  flex: 1;
  padding: 14px !important;
  width: auto !important;
  height: auto !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.moo-chatinfo__confirm-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.moo-chatinfo__confirm-btn--danger {
  flex: 1;
  padding: 14px !important;
  width: auto !important;
  height: auto !important;
  background: rgba(244, 63, 94, 0.15) !important;
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
  border-radius: 14px !important;
  color: var(--color-danger) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.moo-chatinfo__confirm-btn--danger:hover {
  background: rgba(244, 63, 94, 0.25) !important;
}

/* ===== GROUP ADMIN ROLES ===== */

/* Member badges row */
.moo-member-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

/* Admin badge pill */
.moo-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 229, 160, 0.1);
  border: 1px solid rgba(0, 229, 160, 0.18);
  color: var(--color-accent);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.4;
}
.moo-admin-badge i {
  font-size: 7px;
}

/* You badge */
.moo-you-badge {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-weight: 600;
}

/* Member row with action buttons (admin view) */
.moo-chatinfo .moo-member-row {
  display: flex;
  align-items: center;
}
.moo-chatinfo .moo-member-link {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.moo-chatinfo .moo-member-row .chat_cont_name {
  width: auto;
  flex: 1;
  min-width: 0;
}
.moo-chatinfo .moo-member-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}
.moo-chatinfo .moo-member-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s;
  padding: 0;
}
.moo-chatinfo .moo-member-btn:hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
}
.moo-chatinfo .moo-member-btn--active {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.2);
  color: var(--color-accent);
}
.moo-chatinfo .moo-member-btn--danger:hover {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(244, 63, 94, 0.25) !important;
  color: var(--color-danger) !important;
}

/* Remove member modal */
#grm_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#grm_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px;
  width: min(340px, calc(100% - 48px));
  text-align: center;
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.moo-grm__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.15);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 auto 16px;
}
.moo-grm__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.moo-grm__text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin-bottom: 24px;
}
.moo-grm__text strong {
  color: var(--color-text-primary);
  font-weight: 700;
}
.moo-grm__buttons {
  display: flex;
  gap: 10px;
}
.moo-grm__btn {
  flex: 1;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.moo-grm__btn--cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}
.moo-grm__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}
.moo-grm__btn--remove {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.25);
  color: var(--color-danger);
}
.moo-grm__btn--remove:hover {
  background: rgba(244, 63, 94, 0.25);
}

/* Upload picture sub-page (form card) */
.moo-chatinfo .moo-form-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  padding: 36px 32px;
}
.moo-chatinfo .moo-form-icon {
  font-size: 32px;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.moo-chatinfo .moo-form-card .settings_item_title {
  color: var(--color-text-primary);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.moo-chatinfo .moo-form-card .cn_subtext {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.moo-chatinfo .moo-form-card form {
  display: block;
}
.moo-chatinfo .moo-form-card input[type="file"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.6);
  padding: 14px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  width: calc(100% - 30px);
  margin-bottom: 24px;
  cursor: pointer;
}
.moo-chatinfo .moo-form-card button[type="submit"] {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 24px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-family: 'Montserrat', sans-serif;
  width: 100% !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.moo-chatinfo .moo-form-card button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25);
}

/* Mute chat */
.moo-mute-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
}
.moo-mute-status i {
  flex-shrink: 0;
}
.moo-mute-form {
  display: flex;
  gap: 10px;
}
.moo-mute-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 12px 16px;
  padding-right: 36px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.moo-mute-select option {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
.moo-mute-form button {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  border-radius: 12px !important;
  color: var(--color-warning) !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  width: auto !important;
  height: auto !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.moo-mute-form button:hover {
  background: rgba(245, 158, 11, 0.18) !important;
}
.moo-unmute-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: var(--color-text-primary) !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto !important;
}
.moo-unmute-btn:hover {
  background: rgba(0, 229, 160, 0.1) !important;
  border-color: rgba(0, 229, 160, 0.25) !important;
  color: var(--color-accent) !important;
}

/* Chat info responsive */
@media (max-width: 480px) {
  .moo-chatinfo .moo-settings-card {
    padding: 20px;
    border-radius: 16px;
  }
  .moo-chatinfo .moo-form-card {
    padding: 28px 24px;
    border-radius: 20px;
  }
  .moo-chatinfo .moo-settings-card__icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .moo-mute-form {
    flex-direction: column;
  }
}

/* ===== GLOBAL IMAGE VIEWER ===== */
#moo_img_viewer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top, 0));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
  animation: mooImgViewerIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#moo_img_viewer_bg {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: -1;
}
@keyframes mooImgViewerIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
#moo_img_close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0));
  right: calc(16px + env(safe-area-inset-right, 0));
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 2;
  padding: 0;
  margin: 0;
}
#moo_img_close:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.3);
  color: var(--color-danger);
}
#moo_img_container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  max-height: calc(100% - 80px);
  pointer-events: none;
}
#moo_img_preview,
#moo_vid_preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
#moo_img_actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-shrink: 0;
}
.moo_img_action_btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: var(--color-text-primary);
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.moo_img_action_btn:hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
}
@media (max-width: 480px) {
  #moo_img_actions {
    flex-direction: column;
    width: 100%;
  }
  .moo_img_action_btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* ===== CHAT PAGE OVERHAUL ===== */

/* Page background */
html:has(.moo-chat) {
  background: var(--color-bg);
}
body:has(.moo-chat) {
  background: var(--color-bg);
}

/* Header — dark glass */
body:has(.moo-chat) .chat_top_info {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body:has(.moo-chat) .chat_back_button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body:has(.moo-chat) .chat_other_name {
  color: var(--color-text-primary);
}
body:has(.moo-chat) #chat_online_status {
  color: rgba(255, 255, 255, 0.4);
}
body:has(.moo-chat) .my_top_display {
  color: rgba(255, 255, 255, 0.4);
}
body:has(.moo-chat) .cti_right {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Chatbox — dark with subtle texture */
.moo-chat {
  background-color: var(--color-bg-chat) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle%3E.i%7Bfill:rgba(255,255,255,0.025);%7D%3C/style%3E%3C/defs%3E%3Ccircle class='i' cx='20' cy='20' r='3'/%3E%3Ccircle class='i' cx='120' cy='90' r='2.5'/%3E%3Ccircle class='i' cx='60' cy='160' r='2'/%3E%3Ccircle class='i' cx='170' cy='40' r='2'/%3E%3Ccircle class='i' cx='140' cy='170' r='3'/%3E%3Cpath class='i' d='M90 15c0-3.3 2.7-6 6-6h8c3.3 0 6 2.7 6 6v6c0 3.3-2.7 6-6 6h-5l-4 4v-4h-1c-2.2 0-4-1.8-4-4v-8z'/%3E%3Cpath class='i' d='M30 100c0-3.3 2.7-6 6-6h8c3.3 0 6 2.7 6 6v6c0 3.3-2.7 6-6 6h-5l-4 4v-4h-1c-2.2 0-4-1.8-4-4v-8z'/%3E%3Cpath class='i' d='M155 120c0-3.3 2.7-6 6-6h8c3.3 0 6 2.7 6 6v6c0 3.3-2.7 6-6 6h-5l-4 4v-4h-1c-2.2 0-4-1.8-4-4v-8z'/%3E%3Cpath class='i' d='M75 70l3-5.2 3 5.2-3 1.8z'/%3E%3Cpath class='i' d='M180 140l3-5.2 3 5.2-3 1.8z'/%3E%3Crect class='i' x='100' y='130' width='10' height='8' rx='2'/%3E%3Crect class='i' x='10' y='60' width='8' height='6' rx='1.5'/%3E%3Cpath class='i' d='M50 45a4 4 0 11-8 0 4 4 0 018 0zm-4-2v3m0 1v.5'/%3E%3Cpath class='i' d='M130 55a4 4 0 11-8 0 4 4 0 018 0zm-4-2v3m0 1v.5'/%3E%3Cpath class='i' d='M80 185a3 3 0 100-6 3 3 0 000 6zm-1.5-3h3m-1.5-1.5v3'/%3E%3Cpath class='i' d='M185 85a3 3 0 100-6 3 3 0 000 6zm-1.5-3h3m-1.5-1.5v3'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 200px 200px !important;
}

/* Loading screen */
body:has(.moo-chat) .chatbox_loading {
  position: absolute !important;
  inset: 64px 0 0 0 !important;
  background:
    radial-gradient(ellipse at 60% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    var(--color-bg);
  color: var(--color-text-primary);
}
body:has(.moo-chat) .cli_spin {
  color: var(--color-accent);
  font-size: 36px;
}
body:has(.moo-chat) .cli_text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  font-weight: 600;
  margin-top: 16px;
}

/* Loading more chat banner */
body:has(.moo-chat) .loading_more_chat {
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: var(--color-text-primary);
  font-size: 15px;
}
body:has(.moo-chat) .loading_more_chat i {
  color: var(--color-accent);
}

/* Encryption banner */
.moo-chat .messages_encrypted {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.moo-chat .messages_encrypted:active {
  background: rgba(255, 255, 255, 0.08);
}
.moo-chat .messages_encrypted i {
  margin-right: 6px;
  color: var(--color-accent);
}
.moo-chat .messages_encrypted b {
  color: var(--color-accent);
}

/* Scroll-to-message loading toast */
#scroll_to_toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  white-space: nowrap;
  background: rgba(6, 13, 16, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
#scroll_to_toast i {
  color: var(--color-accent);
}

/* Date and system lines */
.moo-chat .date_line,
.moo-chat .system_line {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  width: fit-content;
}

/* Message bubbles */
.moo-chat .indv_message.message_right {
  background: rgba(0, 229, 160, 0.12);
  border: 1px solid rgba(0, 229, 160, 0.1);
}
.moo-chat .indv_message.message_left {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.moo-chat .indv_message_info.message_right {
  background: var(--color-msg-time-right);
  border: none;
  padding: 2px 4px;
  border-radius: 4px;
}
.moo-chat .indv_message_info.message_left {
  background: var(--color-msg-time-left);
  border: none;
  padding: 2px 4px;
  border-radius: 4px;
}
.moo-chat .indv_message {
  border-radius: 14px;
  color: var(--color-text-primary);
  font-size: 14px;
  padding-right: 52px;
  display: inline-flex;
}
.moo-chat .indv_message_info_cont {
  width: 26px;
  right: 10px;
  top: 10px;
  height: calc(100% - 20px);
}
.moo-chat .indv_message_info {
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  width: auto;
}
.moo-chat .indv_message_moreinfo {
  color: rgba(255, 255, 255, 0.25);
}
.moo-chat .indv_message pre a {
  color: var(--color-accent);
}
.moo-chat .indv_message_name {
  color: var(--color-accent);
  font-size: 13px;
}

/* GIF images in messages */
.moo-chat .GIF_IMG {
  border-radius: 10px;
}

/* New messages scroll button */
body:has(.moo-chat) #new_messages_button {
  background: rgba(0, 229, 160, 0.15);
  border: 1px solid rgba(0, 229, 160, 0.2);
  color: var(--color-accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body:has(.moo-chat) #new_messages_button i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---- Message input bar ---- */
.moo-chat-bar {
  background: rgba(6, 13, 16, 0.9) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 20px !important;
  width: calc(100% - 40px) !important;
  min-height: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.moo-chat-bar #user_message {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  color: var(--color-text-primary) !important;
  padding: 7px 14px !important;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  margin-left: 0 !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 20px;
  height: 20px;
  line-height: 20px;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.moo-chat-bar button {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: var(--color-text-primary) !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.moo-chat-bar #send_message {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
  border: none !important;
  color: var(--color-bg) !important;
  font-size: 16px !important;
}
.moo-chat-bar .message_process {
  background: rgba(6, 13, 16, 0.95) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 15px;
}

/* ---- Message options popup ---- */
body:has(.moo-chat) #mop_wrap {
  background: rgba(6, 13, 16, 0.6);
  animation: mooOverlayIn 0.2s ease-out;
}
body:has(.moo-chat) #message_options_popup {
  background: rgba(20, 30, 38, 0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px;
  width: min(320px, 80%);
  height: auto !important;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body:has(.moo-chat) .mop_title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
}
body:has(.moo-chat) #mop_message {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 1px;
  width: 1px;
  padding: 0;
  margin: 0;
  border: 0;
}
body:has(.moo-chat) .mop_buttons_cont {
  display: flex;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
body:has(.moo-chat) .mop_button {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: var(--color-text-primary);
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  width: auto;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body:has(.moo-chat) .mop_button:hover {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.2);
  color: var(--color-accent);
}
body:has(.moo-chat) .mop_button_delete {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.15);
  color: var(--color-danger);
}
body:has(.moo-chat) .mop_button_delete:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.25);
  color: var(--color-danger);
}
body:has(.moo-chat) #delete_message {
  margin-left: 0;
}

/* ---- Attachments popup ---- */
body:has(.moo-chat) #attachments_wrap {
  background: rgba(6, 13, 16, 0.6);
  animation: mooOverlayIn 0.2s ease-out;
}
body:has(.moo-chat) #attachments_popup {
  background: rgba(20, 30, 38, 0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 32px;
  width: min(320px, 80%);
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Attachment option buttons — reset button defaults for .moo-modal__option */
body:has(.moo-chat) #attachments_popup .moo-modal__option {
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

/* ---- Tenor/GIF popup ---- */
body:has(.moo-chat) #tenor_wrap {
  background: rgba(6, 13, 16, 0.6);
  animation: mooOverlayIn 0.2s ease-out;
}
body:has(.moo-chat) #tenor_popup {
  background: rgba(20, 30, 38, 0.9);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: var(--color-text-primary);
}
body:has(.moo-chat) .tenor_title {
  color: var(--color-text-primary);
}
body:has(.moo-chat) .tenor_title_sub {
  color: rgba(255, 255, 255, 0.35);
}
body:has(.moo-chat) #tenor_search {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding-left: 36px;
}
body:has(.moo-chat) .tenor_search_icon {
  color: rgba(255, 255, 255, 0.3);
}
body:has(.moo-chat) .tenor_indv img {
  border-radius: 10px;
}
body:has(.moo-chat) .gifs_loading {
  background: rgba(20, 30, 38, 0.9);
  color: var(--color-text-primary);
  font-size: 16px;
}
body:has(.moo-chat) .gifs_loading .cli_spin {
  color: var(--color-accent);
  font-size: 28px;
}
body:has(.moo-chat) .gifs_loading .cli_text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* ---- Encryption info popup ---- */
body:has(.moo-chat) #ms_popup_wrap {
  background: rgba(6, 13, 16, 0.6);
  animation: mooOverlayIn 0.2s ease-out;
}
body:has(.moo-chat) #ms_popup {
  background: rgba(20, 30, 38, 0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 32px;
  width: min(360px, 80%);
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body:has(.moo-chat) .ms_popup_title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.3px;
}
body:has(.moo-chat) .ms_popup_message {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 1.7;
}
body:has(.moo-chat) .ms_popup_message b {
  color: rgba(255, 255, 255, 0.7);
}

/* Reply reference card (inside message bubbles) */
.reply_reference {
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s;
  max-width: 100%;
  overflow: hidden;
}
.reply_reference:active {
  background: rgba(255, 255, 255, 0.1);
}
.reply_ref_name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 2px;
}
.reply_ref_text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Forwarded label */
.forwarded_label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 4px;
  font-style: italic;
}
.forwarded_label i {
  margin-right: 4px;
}

/* Message highlight animation (scroll to reply target) */
.message_highlight {
  animation: mooMsgHighlight 2s ease-out;
}
@keyframes mooMsgHighlight {
  0%, 20% { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  100% { outline: 2px solid transparent; outline-offset: 2px; }
}

/* Reply preview bar (above message input) */
#reply_preview {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 10px 10px 0;
  margin-bottom: 10px;
  width: calc(100% - 19px);
}
#reply_preview_inner {
  flex: 1;
  min-width: 0;
}
#reply_preview_name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}
#reply_preview_text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#reply_cancel {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  font-size: 12px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Input row wrapper */
#moo_chat_input_row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}

/* Message options - accent button (reply) */
body:has(.moo-chat) .mop_button_accent {
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.15);
  color: var(--color-accent);
}
body:has(.moo-chat) .mop_button_accent:hover {
  background: rgba(0, 229, 160, 0.15);
  border-color: rgba(0, 229, 160, 0.25);
}

/* Message options button grid */
body:has(.moo-chat) .mop_buttons_grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
body:has(.moo-chat) .mop_buttons_grid .mop_button {
  flex: 1 1 calc(50% - 4px);
  min-width: calc(50% - 4px);
  box-sizing: border-box;
}
body:has(.moo-chat) .mop_buttons_grid .mop_button:last-child:nth-child(odd) {
  flex: 1 1 100%;
  min-width: 100%;
}

/* Forward picker modal */
body:has(.moo-chat) #forward_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
body:has(.moo-chat) #forward_popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(20, 30, 38, 0.9);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px;
  width: min(360px, 85%);
  max-height: 70%;
  color: var(--color-text-primary);
  display: none;
  flex-direction: column;
  z-index: 9999;
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#forward_list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  margin-bottom: 16px;
}
.forward_section_title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
  margin-top: 16px;
}
.forward_section_title:first-child {
  margin-top: 0;
}
.forward_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
}
.forward_item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.forward_item:active {
  background: rgba(255, 255, 255, 0.08);
}
.forward_item img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.forward_item span {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forward_check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  font-size: 11px;
  color: transparent;
}
.forward_selected .forward_check {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.forward_selected {
  background: rgba(0, 229, 160, 0.06);
}
#forward_send {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border: none;
  border-radius: 14px;
  color: var(--color-bg);
  font-weight: 700;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}
#forward_send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 229, 160, 0.25);
}

/* ===== ATTACHMENTS ===== */

/* ---- Location Card ---- */
.moo-location-card {
  display: block;
  width: 260px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-primary);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s;
}
.moo-location-card:active {
  border-color: rgba(0, 229, 160, 0.3);
}
.moo-location-card__map {
  width: 100%;
  height: 140px;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
}
.moo-location-card__map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(6, 13, 16, 0.5));
  pointer-events: none;
}
.moo-location-card__tiles {
  display: grid;
  grid-template-columns: repeat(3, 256px);
  grid-template-rows: repeat(3, 256px);
  pointer-events: none;
}
.moo-location-card__tiles img {
  display: block;
  width: 256px;
  height: 256px;
}
.moo-location-card__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -90%);
  color: var(--color-accent);
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  z-index: 1;
}
.moo-location-card__info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
}
.moo-location-card__info i {
  color: var(--color-accent);
  font-size: 14px;
}
.moo-location-card__info span {
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Media Grid ---- */
.moo-media-grid {
  display: grid;
  gap: 3px;
  border-radius: 10px;
  overflow: hidden;
  max-width: 280px;
}
.moo-media-grid--single {
  grid-template-columns: auto;
}
.moo-media-grid--two {
  grid-template-columns: 1fr 1fr;
}
.moo-media-grid--three {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.moo-media-grid--three .moo-media-grid__item:first-child {
  grid-column: 1 / -1;
}
.moo-media-grid--multi {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.moo-media-grid__item {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  min-height: 80px;
}
.moo-media-grid--single .moo-media-grid__item {
  min-height: 0;
  max-height: 320px;
}
.moo-media-grid__item img,
.moo-media-grid__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 80px;
}
.moo-media-grid--single .moo-media-grid__item img,
.moo-media-grid--single .moo-media-grid__item video {
  min-height: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.moo-media-grid__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(6, 13, 16, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.moo-media-grid__play i {
  color: var(--color-white);
  font-size: 16px;
  margin-left: 2px;
}

/* ---- File Card ---- */
.moo-file-attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(280px, 100%);
}
.moo-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background 0.15s, border-color 0.15s;
  min-width: 0;
}
.moo-file-card:active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
.moo-file-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 229, 160, 0.15), rgba(0, 229, 160, 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.moo-file-card__icon i {
  color: var(--color-accent);
  font-size: 16px;
}
.moo-file-card__info {
  flex: 1;
  min-width: 0;
}
.moo-file-card__name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-file-card__size {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}
.moo-file-card__download {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.moo-file-card__download i {
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}

/* ---- Upload Overlay ---- */
#moo_upload_overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 13, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  animation: mooOverlayIn 0.2s ease-out;
}
.moo-upload__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.moo-upload__progress-ring {
  width: 80px;
  height: 80px;
  position: relative;
}
.moo-upload__progress-ring svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}
.moo-upload__progress-ring .ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 4;
}
.moo-upload__progress-ring .ring-fg {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 226.2;
  stroke-dashoffset: 226.2;
  transition: stroke-dashoffset 0.3s ease;
}
.moo-upload__status {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.moo-upload__percent {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

/* ---- Upload Preview Modal ---- */
#moo_upload_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#moo_upload_preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: rgba(20, 30, 38, 0.9);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(360px, 85%);
  max-height: 70%;
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.moo-upload-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.moo-upload-preview__count {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.moo-upload-preview__close {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  font-size: 12px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}
.moo-upload-preview__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow-y: auto;
  max-height: 40vh;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.moo-upload-preview__items::-webkit-scrollbar {
  display: none;
}
.moo-upload-preview__thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.moo-upload-preview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moo-upload-preview__thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(6, 13, 16, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.moo-upload-preview__file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}
.moo-upload-preview__file-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 229, 160, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.moo-upload-preview__file-icon i {
  color: var(--color-accent);
  font-size: 15px;
}
.moo-upload-preview__file-details {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.moo-upload-preview__file-remove {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(244, 63, 94, 0.06);
  border: 1px solid rgba(244, 63, 94, 0.1);
  color: rgba(244, 63, 94, 0.5);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.moo-upload-preview__file-remove:active {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.3);
  color: var(--color-danger);
}
.moo-upload-preview__file-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.moo-upload-preview__file-size {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}
.moo-upload-preview__send {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--color-bg) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: 'Montserrat', sans-serif !important;
  padding: 12px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}
.moo-upload-preview__send:active {
  transform: scale(0.98);
}

/* Hidden file inputs for upload */
#moo_file_input_media,
#moo_file_input_files {
  display: none !important;
}

/* ---- File Manager (Settings) ---- */
.moo-fm-quota {
  margin-bottom: 16px;
}
.moo-fm-quota__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-bottom: 8px;
}
.moo-fm-quota__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
  transition: width 0.4s ease;
  min-width: 0;
}
.moo-fm-quota__fill--warn {
  background: linear-gradient(90deg, var(--color-warning), #e6a817);
}
.moo-fm-quota__fill--danger {
  background: linear-gradient(90deg, var(--color-danger), #d1213a);
}
.moo-fm-quota__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}
.moo-fm-quota__label span {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}


/* File Manager Modal */
#fm_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#fm_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(400px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.moo-fm-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  flex-shrink: 0;
}
.moo-fm-modal__title {
  font-size: 17px;
  font-weight: 700;
}
.moo-fm-modal__header button {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.moo-fm-modal__header button:active {
  background: rgba(255, 255, 255, 0.1);
}
.moo-fm-modal__list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0 24px 24px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.moo-fm-modal__loading,
.moo-fm-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 0;
  color: rgba(255, 255, 255, 0.25);
  font-size: 14px;
}
.moo-fm-modal__loading i,
.moo-fm-modal__empty i {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.15);
}

/* File list items */
.moo-fm-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: opacity 0.2s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.moo-fm-file:last-child {
  border-bottom: none;
}
.moo-fm-file__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0, 229, 160, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.moo-fm-file__icon i {
  color: var(--color-accent);
  font-size: 15px;
}
.moo-fm-file__info {
  flex: 1;
  min-width: 0;
}
.moo-fm-file__type {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.moo-fm-file__meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-fm-file__delete {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(244, 63, 94, 0.06);
  border: 1px solid rgba(244, 63, 94, 0.1);
  color: rgba(244, 63, 94, 0.5);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.moo-fm-file__delete:active {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.3);
  color: var(--color-danger);
}

/* ---- Delete Account (Settings) ---- */
.moo-delete-account-card {
  border: 1px solid rgba(244, 63, 94, 0.15) !important;
}
.moo-settings-card__icon--danger {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(244, 63, 94, 0.15) !important;
  color: var(--color-danger) !important;
}
.moo-delete-account__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.5;
  margin: 0 0 16px;
}

/* Delete Account Modal */
#da_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#da_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(244, 63, 94, 0.15);
  border-radius: 24px;
  width: min(380px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.moo-da-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 24px 0;
  flex-shrink: 0;
}
.moo-da-modal__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-danger);
}
.moo-da-modal__title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.moo-da-modal__body {
  padding: 16px 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}
.moo-da-modal__body p {
  margin: 0 0 8px;
}
.moo-da-modal__body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.moo-da-modal__body li {
  margin-bottom: 4px;
}
.moo-da-modal__warn {
  color: var(--color-danger);
  font-weight: 600;
  font-size: 13px;
}
.moo-da-modal__actions {
  display: flex;
  gap: 10px;
  padding: 0 24px 20px;
}
.moo-da-modal__actions form {
  flex: 1;
  margin: 0;
}
.moo-da-modal__cancel {
  flex: 1;
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.moo-da-modal__cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}
.moo-da-modal__confirm {
  flex: 1;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  white-space: nowrap;
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: var(--color-danger);
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.moo-da-modal__confirm:hover:not(:disabled) {
  background: rgba(244, 63, 94, 0.25);
  border-color: rgba(244, 63, 94, 0.5);
}
.moo-da-modal__confirm:disabled {
  cursor: not-allowed;
}
.moo-da-modal__countdown {
  text-align: center;
  padding: 0 24px 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 500;
}
.moo-da-modal__countdown span {
  color: var(--color-danger);
  font-weight: 700;
}

/* ===== REPORT MODAL ===== */
#report_wrap {
  position: fixed;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  animation: mooOverlayIn 0.2s ease-out;
}
#report_popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(20, 30, 38, 0.9);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 0;
  width: min(380px, 88%);
  max-height: 80%;
  color: var(--color-text-primary);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.moo-report__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 28px 24px 0;
  flex-shrink: 0;
}
.moo-report__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.moo-report__subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}
#report_close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.moo-report__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 20px 24px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.moo-report__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}
.moo-report__textarea {
  width: calc(100% - 32px);
  min-height: 70px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-text-primary);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  resize: none;
  -webkit-appearance: none;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.moo-report__textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.moo-report__textarea:focus {
  border-color: rgba(244, 63, 94, 0.4);
}
.moo-report__actions {
  display: flex;
  gap: 10px;
  padding: 0 24px 24px;
  flex-shrink: 0;
}
.moo-report__btn-secondary {
  flex: 0.8;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}
.moo-report__btn-primary {
  flex: 1.2;
  padding: 16px;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: 14px;
  color: var(--color-danger);
  font-weight: 700;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.moo-report__btn-primary:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Report User button in profile card */
.moo-report-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 10px;
}
.moo-report-user-btn:active {
  color: var(--color-danger);
  background: rgba(244, 63, 94, 0.1);
}

/* Report Message link in message options */
.moo-report-msg-link {
  text-align: center;
  margin-top: 14px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: color 0.2s;
}
.moo-report-msg-link i {
  margin-right: 4px;
}
.moo-report-msg-link:active {
  color: var(--color-danger);
}

/* Report submitted toast */
.moo-report__toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(6, 13, 16, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 229, 160, 0.15);
  border-radius: 14px;
  padding: 14px 24px;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  z-index: 100001;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.moo-report__toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Pinned messages list (chat info page) */
.moo-pinned-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.moo-pinned-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
}
.moo-pinned-item__content {
  flex: 1;
  min-width: 0;
}
.moo-pinned-item__sender {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 3px;
}
.moo-pinned-item__text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-pinned-item__text i {
  margin-right: 4px;
}
.moo-pinned-item__time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 4px;
}
.moo-pinned-item__unpin {
  flex-shrink: 0;
}
.moo-pinned-item__unpin button {
  background: rgba(244, 63, 94, 0.1) !important;
  border: 1px solid rgba(244, 63, 94, 0.2) !important;
  border-radius: 10px !important;
  color: var(--color-danger) !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0;
}
.moo-pinned-item__unpin button:hover {
  background: rgba(244, 63, 94, 0.2) !important;
}

/* ===== CHAT INFO — FILES & MEDIA ===== */
.moo-chat-media__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.moo-chat-media__item {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  -webkit-tap-highlight-color: transparent;
}
.moo-chat-media__item img,
.moo-chat-media__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.moo-chat-media__item--video::after {
  content: '\f04b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  font-size: 12px;
  padding-left: 2px;
  pointer-events: none;
}
.moo-chat-media__item--file {
  aspect-ratio: auto;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
.moo-chat-media__file-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 14px;
}
.moo-chat-media__file-info {
  flex: 1;
  min-width: 0;
}
.moo-chat-media__file-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-chat-media__file-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}
.moo-chat-media__show-all {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.moo-chat-media__show-all:hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.25);
  color: var(--color-accent);
}
.moo-chat-media__show-all:active {
  transform: scale(0.98);
  background: rgba(0, 229, 160, 0.08);
}

/* ===== GROUP INVITE CARDS (chats page) ===== */
.moo-gi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 229, 160, 0.06);
  border: 1px solid rgba(0, 229, 160, 0.12);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: opacity 0.2s;
}
.moo-gi-card:last-child {
  margin-bottom: 0;
}
.moo-gi-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0, 229, 160, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 16px;
}
.moo-gi-card__info {
  flex: 1;
  min-width: 0;
}
.moo-gi-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-gi-card__sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}
.moo-gi-card__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.moo-gi-card__accept {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-bg);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.moo-gi-card__accept:active {
  transform: scale(0.9);
}
.moo-gi-card__decline {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.moo-gi-card__decline:active {
  transform: scale(0.9);
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.2);
  color: var(--color-danger);
}

/* Group invite modal */
#gi_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  animation: mooOverlayIn 0.2s ease-out;
}
#gi_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  background: rgba(20, 30, 38, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(400px, calc(100% - 48px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  z-index: 9999;
  color: var(--color-text-primary);
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Clickable pinned items */
.moo-pinned-item__content {
  cursor: pointer;
  transition: opacity 0.2s;
}
.moo-pinned-item__content:active {
  opacity: 0.7;
}

/* Pinned message viewer popup */
#pinned_view_wrap {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 16, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  animation: mooOverlayIn 0.2s ease-out;
}
#pinned_view_popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(20, 30, 38, 0.9);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 0;
  width: min(400px, 85%);
  max-height: 70%;
  color: var(--color-text-primary);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pinned-view__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 28px 28px 0;
  flex-shrink: 0;
}
#pinned_view_close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
#pinned_view_close:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.3);
  color: var(--color-danger);
}
.pinned-view__sender {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 4px;
}
.pinned-view__time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}
.pinned-view__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 20px 28px 28px;
}
.pinned-view__content {
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.6;
}
.pinned-view__content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.pinned-view__content pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
.pinned-view__attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 600;
}

.moo_alpha_tag {
  text-align:center;
  padding:7px 10px;
  font-weight:bold;
  font-size:12px;
  background-color:var(--color-alpha-tag);
  border-radius:10px;
  color:var(--color-white);

  display:inline-flex;
  align-items:center;
  justify-content: center;
  vertical-align: middle;
}
.moo_alpha_tag i {
    margin-right:7px;
}
.mat_wrapper {
    width:100%;
    text-align:center;
    display:block;
    margin-top:10px;
    margin-bottom:10px;
}


#delete_chat_button {
  width:100%;
}
.chat_participants {
  margin-top:20px;
}
.ays_cont {
  margin-bottom:20px;
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-radius:14px;
  padding:20px;
}
.ays_title {
  text-align: center;
  font-weight:bold;
  font-size:20px;
  margin-bottom:20px;
}
.invite_cont .ays_title {
    font-size:16px;
}
.ays_cont form {
  display:flex;
  align-items: center;
  text-align: center;
  justify-content: space-between;
}
.ays_cont button {
  font-size: 18px;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  height: 35px;
  margin: 0px;
  border: 0px;
  border-radius: 12px;
  background-color: var(--color-white);
  color: var(--color-bg);
  width:calc(50% - 10px);
}

.tenor_indv {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.tenor_indv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.gifs_loading {
  position:absolute;
  top:68px;
  left:0px;

  opacity: 0;
  transition: opacity 250ms ease;

  display:none;
  text-align: center;
  vertical-align:middle;
  justify-content: center;
  align-items: center;

  width:100%;
  height:calc(100% - 68px);
  background-color: var(--color-bg-elevated);
  z-index:9;

  font-size:24px;
  font-weight:bold;
  color:var(--color-white);
}

#tenor_results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;

    width: 100%;
    height: calc(100% - 108px);

    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;

    margin-top: 20px;
    border-radius: 12px;
    padding: 0;
    box-sizing: border-box;
}

#tenor_search {
    width:calc(100% - 35px);
    min-height: 20px;
    line-height: 20px;
    background-color: var(--color-white);
    color: var(--color-black);
    margin: 0px;
    padding: 5px;
    padding-left:30px;
    font-size: 14px;
    height: 20px;
    border: 0px;
    border-radius: 12px;
}
#tenor_popup {
    overflow:hidden;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:20px;
    width:80%;
    height:80%;
    background-color:var(--color-bg-elevated);
    color:var(--color-text-primary);
    border-radius:20px;
    display:none;
    z-index:9999;
}
#tenor_wrap {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display:none;
    z-index:999;
}
.tenor_title {
    margin-bottom:20px;
    font-weight:bold;
    height:38px;
    font-size:20px;
    text-align:center;
    line-height:1.2;
}
.tenor_title_sub {
  width:100%;
  font-weight: normal;
  font-size:12px;
  text-align: center;
}

.GIF_IMG {
    width:auto !important;
    height:auto !important;

    min-width: 200px;
    max-width: 50vw;

    border-radius: 12px;
    overflow:hidden;
    display:flex;
}

.tenor_search_cont {
    position:relative;
}
.tenor_search_icon {
    position:absolute;
    top:0px;
    left:0px;

    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height:1;

    width:30px;
    height:30px;

    color:var(--color-black);
}

.form_return_message {
  background-color:var(--color-bg-elevated);
  border-radius:14px;
  padding:20px;
  color:var(--color-text-primary);
  text-align:center;
  margin-bottom:20px;
  font-weight:bold;
}

.push_button button {
  width:100%;
  margin-top:10px;
}
.push_button {
  display:flex;
  justify-content: center;
  align-items: center;
  gap:10px;
}

.userUnread_API {
  display:none;
}
.unread_badge {
  position:absolute;
  top:-5px;
  right:-5px;

  background-color: var(--color-badge);
  color:var(--color-white);

  border-radius: 50%;

  width:20px;
  height:20px;
  overflow:hidden;

  font-weight:bold;
  font-size:12px;

  display:none;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.input_time {
  background-color: var(--color-white);
  height:23px;
  text-align: left;
}

#pn_asked_wrap {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(6, 13, 16, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: block;
    z-index: 999;
    animation: mooOverlayIn 0.2s ease-out;
}
#pn_asked_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 32px;
    width: min(320px, 80%);
    height: auto;
    background: rgba(20, 30, 38, 0.85);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    color: var(--color-text-primary);
    display: block;
    text-align: center;
    z-index: 9999;
    animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.moo-pn-asked-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(0, 229, 160, 0.1);
    border: 1px solid rgba(0, 229, 160, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 22px;
    color: var(--color-accent);
}
#pn_asked_popup .pn_popup_title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}
#pn_asked_popup .pn_popup_message {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    margin-bottom: 24px;
}
#pn_asked_popup .mop_buttons_cont {
    display: flex;
    gap: 10px;
}
#pn_asked_popup .pn_button_no {
    flex: 1;
    margin-left: 0;
    padding: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
}
#pn_asked_popup .pn_button_no:hover {
    background: rgba(255, 255, 255, 0.1);
}
#pn_asked_popup .mop_button_yes {
    flex: 1;
    padding: 14px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    border: none;
    border-radius: 14px;
    color: var(--color-bg);
    font-weight: 700;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#pn_asked_popup .mop_button_yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 229, 160, 0.25);
}

#chats_popup_wrap {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display:none;
    z-index:999;
}
#chats_popup {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:20px;
    width:60%;
    height:auto;
    background-color:var(--color-bg-elevated);
    color:var(--color-text-primary);
    border-radius:20px;
    display:none;

    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    z-index:9999;
}

.co_contact_form {
  display:flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  gap:40px;
}
.coy_form {
  display:flex;
}

.contact_mn_display {
  font-size:16px;
  font-weight:normal;
}

.contact_last_online {
  font-size:14px;
  font-weight:normal;
  
  margin-top:10px;
}
.contact_timezone {
  font-size:14px;
  font-weight:normal;
}

.my_top_display {
  font-size:12px;
  font-weight:normal;
}

.loading_bar {
    position: fixed;
    top: 0px;
    left: 0px;

    width: calc(100% - 40px);
    height: 24px;

    color: var(--color-text-primary);
    background: var(--color-bg);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 0px;
    padding: 20px;
    padding-top: calc(20px + env(safe-area-inset-top, 0));
    overflow: hidden;

    display: none;
    justify-content: flex-start;
    align-items: center;
    text-align: left;

    z-index: 999999;
}
.lb_left {
  font-size: 20px;
  color: var(--color-accent);

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.lb_right {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-left: 14px;
}
.lbr_line1 {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-primary);

  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  line-height: 1;
}
.lbr_line2 {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);

  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  line-height: 1;
  margin-top: 2px;
}

#br_popup_wrap {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display:none;
    z-index:999;
}
#br_popup {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:20px;

    width:80%;
    max-width:300px;

    height:auto;
    max-height:80%;

    overflow-x:hidden;
    overflow-y:auto;

    background-color:var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color:var(--color-black);
    border-radius:20px;

    display:none;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;

    z-index:9999;
}
.br_popup_title {
  font-size:18px;
  text-align:center;
  font-weight:bold;
  margin-bottom:20px;
}
.br_form {
  display:flex;
  flex-direction: column;
  gap:10px;
  width:100%;
}
.br_submit_button {
  font-size: 17px;
  font-weight: bold;
  padding: 15px;
  text-align: center;
  height: auto;
  margin: 0px;
  border: 0px;
  border-radius: 12px;
  background-color: var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  width: 100%;
}
.br_selectbox {
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

  font-size: 17px;
  margin: 0px;
  padding: 15px;
  width:100%;
  margin-right: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--color-white);
  color:var(--color-black);
}
.br_textarea {
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

  font-size: 17px;
  margin: 0px;
  padding: 15px;
  width:calc(100% - 32px);
  height:140px;
  margin-right: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color:var(--color-black);

  overflow-x:hidden;
  overflow-y:auto;

  resize:none;
}
.br_textarea::placeholder {
  font-weight: normal;
  opacity: 1;
  color: var(--color-black);
}

#ms_popup_wrap {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display:none;
    z-index:999;
}
#ms_popup {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:20px;
    width:80%;
    height:auto;
    max-height:80%;

    overflow-x:hidden;
    overflow-y:auto;

    background-color:var(--color-bg-elevated);
    border:0px;
    color:var(--color-text-primary);
    border-radius:20px;
    display:none;

    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;

    z-index:9999;
}
.ms_popup_title {
  font-size:18px;
  text-align:center;
  font-weight:bold;
  margin-bottom:20px;
}

.messages_encrypted {
  height:auto;
  width:fit-content;
  text-align:center;
  padding:10px;
  font-size:14px;
  font-weight:normal;
  clear:both;
  margin-bottom:20px;
  background-color:var(--color-bg-elevated);
  color:var(--color-text-primary);
  border-radius:10px;
  margin-left:auto;
  margin-right:auto;
}

.input_select {
  font-size: 18px;
  margin: 0px;
  padding: 5px;
  width: calc(100% - 12px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#reset_keyboard {
    caret-color:transparent;
    opacity:0;

    margin: 0px;
    border: 0px;
    border-radius: 12px;
    padding: 5px;

    font-size: 14px;
    line-height: 20px;
    display:none;

    width: calc(100% - 150px);
    height: 20px;
    position: absolute;
    top: 20px;
    left: 70px;
}

.loading_more_chat {
  position:absolute;
  top:20px;
  left:20px;
  width:calc(100% - 80px);
  height:auto;
  
  padding: 20px;
  font-size: 20px;
  font-weight: bold;

  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-radius: 12px;

  opacity: 0;
  transition: opacity 200ms ease;

  display:none;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.lmc_text {
  margin-left:10px;
}

.table_cont {
  border:1px solid rgba(255, 255, 255, 0.1);
  border-radius:14px;

  display:flex;
  flex-direction: column;
  overflow:hidden;
}
.table_header {
  background-color: var(--color-bg-elevated);
  padding:20px;
  color:var(--color-white);
  font-weight:bold;
  font-size:20px;
}
.table_content {
  display:flex;
  flex-direction: column;
  overflow:hidden;
}
.table_headers {
  font-weight:bold;
  font-size:18px;
  border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.table_row {
  font-size:16px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  overflow:hidden;
}
.table_column {
  display:flex;
  padding:20px;

  overflow-y:hidden;
  overflow-x:scroll;

  white-space: nowrap;

  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.tc_splitbutton {
  justify-content: space-between;
  align-items: center;
  gap:20px;
}
.table_buttons {
  display:flex;
  align-items: center;
  gap:10px;
  justify-content: flex-start;

  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.table_buttons button {
  color: var(--color-text-primary);
  font-size:16px;
  width:28px;
  height:28px;
  border-radius: 10px;
  background-color: var(--color-bg-elevated);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  margin: 0px;
  padding: 0px;
  border: 0px;

  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.fa_eye_slash_button {
  font-size:13px !important;
}
.table_content_hidden {
  display:none;
}
.table_open_content_button {
  border-radius:10px;
  cursor: pointer;

  font-size:14px;
  font-weight:bold;

  padding:0px 10px;
  height:28px;

  background-color: var(--color-accent);
  color:var(--color-bg);

  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;

  display:flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.table_row_content:nth-child(odd) {
  background-color: var(--color-row-alt);
}
.sv_trc1 {
  width:50%;
}
.sv_trc2 {
  width:50%;
}
.tc_margintop {
  margin-top:20px;
}
.table_norows {
  padding:20px;
}
.report_trc1 {
  width:20%;
}
.report_trc2 {
  width:30%;
}
.report_trc3 {
  width:50%;
}

.content_dialog_text {
  display:flex;
  overflow-wrap: break-word;
  word-wrap: break-word;  
  word-break: break-all;
}
#content_dialog_wrap {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display:none;
    z-index:999;
}
#cd_popup {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:20px;

    width:80%;
    height:auto;
    max-height:80%;

    overflow-x:hidden;
    overflow-y:auto;

    background-color:var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color:var(--color-black);
    border-radius:20px;

    display:none;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;

    z-index:9999;
}

.chats_list_none {
  display:none;
}

.hli_cont {
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hive_logo_img {
  width:70%;
  max-width:300px;
}

.settings_item_last {
  margin-bottom:0px;
}