:root {
  font-family: Inter, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #eef2f7;
  background: #090e12;
  color-scheme: dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

html, body, #root {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  background: #090e12;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .55; cursor: not-allowed; }
input, textarea { color: #eef2f7; }
input::placeholder, textarea::placeholder { color: #7f8b94; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #54a6ff;
  outline-offset: 2px;
}

.auth-page {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at 8% 5%, #173b5048, transparent 42%),
    #090e12;
}

.auth-card {
  width: min(100%, 440px);
  padding: clamp(22px, 6vw, 34px);
  border: 1px solid #26333d;
  border-radius: 24px;
  background: #111a20;
  box-shadow: 0 25px 80px #0006;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.auth-card > .brand { margin-bottom: 35px; }

.brand-logo {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #168bff, #0878e8);
  color: #fff;
  font-size: 21px;
  font-weight: 850;
  box-shadow: 0 6px 20px #2677df32;
}

.brand-text { min-width: 0; }
.brand-text strong, .brand-text small { display: block; }
.brand-text strong { font-size: 17px; font-weight: 800; }
.brand-text small { margin-top: 4px; color: #8c9ba7; font-size: 11px; }

.eyebrow {
  color: #65b7ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

h1 {
  margin: 13px 0 9px;
  font-size: clamp(27px, 7vw, 35px);
  line-height: 1.18;
  letter-spacing: -.9px;
  overflow-wrap: anywhere;
}

h2 { font-size: 18px; }
p { overflow-wrap: anywhere; }

.subtitle {
  color: #a1afb9;
  font-size: 13px;
  line-height: 1.75;
}

.auth-card form {
  display: grid;
  gap: 16px;
  margin-top: 25px;
}

.auth-card label,
.group-form label {
  display: grid;
  gap: 8px;
  color: #dbe5ec;
  font-size: 12px;
  font-weight: 650;
}

.auth-card input,
.group-form input,
.group-form textarea {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #34434d;
  border-radius: 12px;
  background: #0b1318;
  color: #f4f7fa;
  font-size: 13px;
  outline: none;
}

.auth-card input:focus,
.group-form input:focus,
.group-form textarea:focus {
  border-color: #4da4ed;
  box-shadow: 0 0 0 3px #3295e51e;
}

.primary, .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 11px 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 750;
}

.primary {
  background: #167086;
  color: white;
}
.primary:hover:not(:disabled) { background: #1b819a; }

.secondary {
  border-color: #31414b;
  background: #1a272f;
  color: #dce7ed;
}

.secondary:hover:not(:disabled) { background: #23343e; }

.full { width: 100%; margin-top: 11px; }

.text-button {
  display: block;
  margin: 14px 0 4px auto;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: #61bbf5;
  font-size: 12px;
  font-weight: 650;
}

.fine-print {
  margin-top: 23px;
  color: #778793;
  font-size: 10px;
  line-height: 1.8;
}

.notice {
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.notice.error {
  border-color: #376571;
  background: #1f495340;
  color: #ffb6bd;
}

.notice.success {
  border-color: #235d6b;
  background: #07455436;
  color: #9ce1f2;
}

/* App layout */
.messenger {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
  background: #090e12;
}

.main-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 1500px;
  min-width: 0;
  margin: 0 auto 10px;
  padding: 10px 14px;
  border: 1px solid #26343b;
  border-radius: 16px;
  background: #111a1f;
}

.main-header .brand { flex: 0 1 auto; }
.main-header .brand-logo { flex-basis: 39px; width: 39px; height: 39px; }
.main-header .brand-text strong { font-size: 16px; }
.main-header .brand-text small { font-size: 10px; }

.account-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.account-label {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: right;
}

.account-label strong {
  overflow: hidden;
  color: #e1e9ed;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-label small {
  overflow: hidden;
  max-width: 160px;
  color: #82929d;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signout {
  min-height: 35px;
  padding: 8px 11px;
  border: 1px solid #34434b;
  border-radius: 10px;
  background: #1a272e;
  color: #e3e9ed;
  font-size: 11px;
}

.messenger-shell {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(260px, 355px) minmax(0, 1fr);
  width: 100%;
  max-width: 1500px;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #28363c;
  border-radius: 17px;
  background: #10191f;
}

.list-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border-right: 1px solid #2a363c;
  background: #10191f;
  scrollbar-width: thin;
  scrollbar-color: #33444b transparent;
}

.pane-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 4px 13px;
}

.pane-heading h1 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -.5px;
}

.online-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #30a7c5;
  box-shadow: 0 0 0 4px #30a7c51c;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 12px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: #202b31;
}

.search-box > span {
  color: #91a0a9;
  font-size: 23px;
  line-height: 1;
}

.search-box input {
  flex: 1;
  width: 0;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef5f8;
  font-size: 12px;
}

.search-box input:focus { box-shadow: none; }

.search-box button {
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: #17596a;
  color: white;
  font-size: 10px;
  font-weight: 700;
}

.result-section {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid #2a4248;
  border-radius: 13px;
  background: #0c151a;
}

.result-section h3 {
  margin: 4px 4px 7px;
  color: #90a2ac;
  font-size: 11px;
}

.list-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 2px;
}

.list-heading h2 {
  margin: 0;
  color: #dce6eb;
  font-size: 14px;
}

.round-button {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #35444b;
  border-radius: 50%;
  background: #1a282f;
  color: #dce6eb;
  font-size: 19px;
}

.person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #eff4f7;
  text-align: left;
}

.person-row:hover,
.row-selected {
  border-color: #293e43;
  background: #1a2a2e;
}

.avatar {
  display: grid;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid #3d5d65;
  border-radius: 50%;
  background: linear-gradient(145deg, #0c2944, #0d2138);
  color: #c7f4ff;
  font-size: 15px;
  font-weight: 800;
}

.row-text {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 5px;
}

.row-text strong {
  overflow: hidden;
  color: #e9f0f3;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-text small {
  overflow: hidden;
  color: #8c9da5;
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-action {
  padding: 6px 8px;
  border-radius: 9px;
  background: #17363e;
  color: #a1dfef;
  font-size: 10px;
}

.row-arrow {
  color: #71858f;
  font-size: 22px;
}

.empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 28px 12px;
  color: #dbe5e9;
  text-align: center;
}

.empty-symbol {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  border: 1px solid #2a4850;
  border-radius: 16px;
  background: #15282d;
  color: #75c7db;
  font-size: 23px;
}

.empty-list strong { font-size: 12px; }
.empty-list p {
  max-width: 250px;
  margin: 0;
  color: #8fa0a8;
  font-size: 11px;
  line-height: 1.7;
}

.muted {
  color: #8b9da6;
  font-size: 12px;
  line-height: 1.7;
}

/* Group-creation form */
.group-form {
  display: grid;
  gap: 12px;
  margin-bottom: 17px;
  padding: 13px;
  border: 1px solid #293b42;
  border-radius: 14px;
  background: #0d161b;
}

.group-form h2 {
  margin: 0 0 2px;
  font-size: 15px;
}

.group-form label { font-size: 11px; }
.group-form input, .group-form textarea { padding: 10px; font-size: 12px; }
.group-form textarea { resize: vertical; }
.group-form .primary { width: 100%; }

.field-help {
  color: #81949f;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
}

/* Conversation */
.conversation-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: #0b141a;
  background-image: radial-gradient(#24394136 1px, transparent 1px);
  background-size: 21px 21px;
}

.conversation-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px 15px;
  border-bottom: 1px solid #2a393f;
  background: #111b20;
}

.conversation-header .avatar { flex-basis: 39px; width: 39px; height: 39px; }

.conversation-heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.conversation-heading strong {
  overflow: hidden;
  color: #eaf1f4;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-heading small {
  overflow: hidden;
  color: #8a9ba4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-tag {
  padding: 6px 8px;
  border: 1px solid #2e4348;
  border-radius: 8px;
  background: #152529;
  color: #99d4e3;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .7px;
}

.back-button {
  display: none;
  flex: 0 0 31px;
  width: 31px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #d5e2e8;
  font-size: 29px;
}

.message-history {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #33484d transparent;
}

.message-line { display: flex; justify-content: flex-start; }
.message-line.mine { justify-content: flex-end; }

.bubble-message {
  max-width: min(82%, 540px);
  min-width: 0;
  padding: 10px 12px 6px;
  border: 1px solid #263c42;
  border-radius: 13px 13px 13px 4px;
  background: #19282e;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 1px #0002;
}

.bubble-mine {
  border-color: #1c4c58;
  border-radius: 13px 13px 4px 13px;
  background: #074959;
}

.bubble-message p {
  margin: 0;
  color: #eef4f5;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble-message time {
  display: block;
  margin-top: 5px;
  color: #a7bcc1;
  font-size: 9px;
  text-align: right;
}

.message-author {
  display: block;
  margin-bottom: 5px;
  color: #9accd9;
  font-size: 10px;
  font-weight: 750;
}

.empty-conversation {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  text-align: center;
}

.welcome-logo {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border: 1px solid #33626e;
  border-radius: 25px;
  background: linear-gradient(145deg, #0c2944, #0a1d31);
  color: #c4f3ff;
  font-size: 32px;
  font-weight: 850;
}

.small-logo {
  width: 53px;
  height: 53px;
  margin-bottom: 13px;
  border-radius: 17px;
  font-size: 22px;
}

.empty-conversation strong {
  color: #e3ebef;
  font-size: 14px;
}

.empty-conversation p {
  max-width: 330px;
  color: #8fa1aa;
  font-size: 12px;
  line-height: 1.7;
}

.welcome-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px;
  text-align: center;
}

.welcome-panel h1 { margin: 20px 0 4px; font-size: 34px; }
.welcome-panel p { color: #a1b0b7; font-size: 13px; }
.welcome-panel > span {
  margin-top: 17px;
  color: #788b94;
  font-size: 10px;
  letter-spacing: .6px;
}

.message-composer {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 9px;
  margin: 0;
  padding: 11px;
  border-top: 1px solid #25373e;
  background: #101a20;
}

.message-composer textarea {
  flex: 1;
  width: 0;
  min-width: 0;
  min-height: 42px;
  max-height: 120px;
  padding: 11px 13px;
  border: 1px solid #34454d;
  border-radius: 15px;
  outline: 0;
  background: #202b31;
  color: #f3f7f9;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}

.message-composer textarea:focus { border-color: #3689c3; }

.send-button {
  display: grid;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1890ae;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

/* Bottom navigation */
.bottom-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  justify-content: space-around;
  gap: 5px;
  width: 100%;
  max-width: 850px;
  margin: 8px auto 0;
  padding: 6px;
  border: 1px solid #25343a;
  border-radius: 17px;
  background: #10191e;
}

.nav-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 3px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #8c9da6;
  font-size: 10px;
  font-weight: 650;
}

.nav-icon {
  font-size: 22px;
  line-height: 1.1;
}

.nav-active {
  background: #123139;
  color: #b9e9f5;
}

@media (min-width: 681px) {
  .messenger { padding: 12px; }
  .main-header { padding: 12px 17px; }
  .bottom-nav { margin-bottom: 2px; }
  .list-pane { padding: 15px; }
  .search-box { margin-bottom: 14px; }
}

@media (max-width: 680px) {
  .messenger {
    height: 100dvh;
    padding: 0;
  }

  .main-header {
    min-height: 61px;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid #26343b;
    border-radius: 0;
    background: #090e12;
  }

  .main-header .brand { gap: 8px; }
  .main-header .brand-logo {
    flex-basis: 37px;
    width: 37px;
    height: 37px;
    border-radius: 12px;
    font-size: 18px;
  }
  .main-header .brand-text strong { font-size: 15px; }
  .main-header .brand-text small { font-size: 9px; }

  .account-tools { gap: 7px; }
  .account-label strong { max-width: 95px; font-size: 10px; }
  .account-label small { max-width: 95px; font-size: 9px; }
  .signout { min-height: 34px; padding: 7px 9px; font-size: 10px; }

  .messenger-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    border: 0;
    border-radius: 0;
  }

  .messenger-shell.chat-open { grid-template-rows: minmax(0, 1fr); }

  .messenger-shell.list-open .conversation-pane { display: none; }
  .messenger-shell.chat-open .list-pane { display: none; }
  .messenger-shell.chat-open .conversation-pane { display: flex; }

  .list-pane {
    padding: 13px 12px;
    border: 0;
  }

  .pane-heading { margin: 4px 3px 15px; }
  .pane-heading h1 { font-size: 25px; }

  .search-box {
    min-height: 44px;
    padding: 4px 12px;
    border-radius: 23px;
  }

  .search-box input { font-size: 13px; }
  .list-heading { margin: 10px 4px; }
  .person-row { gap: 11px; padding: 10px 7px; }
  .avatar { flex-basis: 45px; width: 45px; height: 45px; }
  .row-text strong { font-size: 13px; }
  .row-text small { font-size: 11px; }

  .group-form { padding: 14px; }
  .group-form h2 { font-size: 16px; }

  .bottom-nav {
    margin: 0;
    padding: 5px 6px max(5px, env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    background: #0c1318;
  }

  .nav-item { gap: 4px; padding: 8px 2px; font-size: 10px; }
  .nav-icon { font-size: 23px; }

  .conversation-header {
    min-height: 60px;
    gap: 8px;
    padding: 8px 10px;
  }

  .back-button { display: grid; }
  .conversation-header .avatar { flex-basis: 37px; width: 37px; height: 37px; }
  .header-tag { font-size: 8px; padding: 5px 6px; }

  .message-history { gap: 8px; padding: 12px 10px; }
  .bubble-message { max-width: 88%; padding: 9px 10px 6px; }
  .bubble-message p { font-size: 12px; }

  .message-composer {
    gap: 7px;
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .message-composer textarea { min-height: 41px; padding: 10px 12px; font-size: 12px; }
  .send-button { flex-basis: 41px; width: 41px; height: 41px; }
}

@media (max-width: 360px) {
  .account-label { display: none; }
  .main-header { padding-inline: 9px; }
  .nav-item { font-size: 9px; }
  .header-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* VexApp PART 5: private media status interface */
.status-feature {
  display: grid;
  gap: 15px;
  padding: 2px 0 18px;
}

.status-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.status-heading h2 {
  margin: 7px 0 4px;
  font-size: 22px;
}

.status-heading p {
  margin: 0;
  color: #91a4ad;
  font-size: 11px;
  line-height: 1.7;
}

.status-refresh {
  display: grid;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid #34484d;
  border-radius: 50%;
  background: #1b292f;
  color: #e0ecef;
  font-size: 20px;
}

.status-publish {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 13px;
  border: 1px solid #2a3c40;
  border-radius: 16px;
  background: #111f22;
}

.status-own-avatar,
.status-author-avatar {
  position: relative;
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid #238199;
  border-radius: 50%;
  background: #15333b;
  color: #c8eff9;
  font-weight: 800;
}

.status-own-avatar > span {
  position: absolute;
  right: -3px;
  bottom: -2px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #111f22;
  border-radius: 50%;
  background: #1da6c8;
  color: white;
  font-size: 13px;
}

.status-publish-content {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 9px;
}

.status-publish-content > strong { font-size: 12px; }
.status-publish-content > small { color: #82979e; font-size: 10px; }

.status-file-label {
  display: block;
  min-width: 0;
  padding: 10px;
  border: 1px dashed #3a5a62;
  border-radius: 10px;
  background: #0c171a;
  color: #a9dce9;
  font-size: 11px;
  cursor: pointer;
}

.status-file-label span {
  display: block;
  overflow-wrap: anywhere;
}

.status-file-label input {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 7px;
  color: #91a7ad;
  font-size: 10px;
}

.status-publish-content textarea {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #34464a;
  border-radius: 10px;
  background: #0a1418;
  color: #eff6f8;
  font: inherit;
  font-size: 11px;
  resize: vertical;
}

.status-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.status-form-footer small {
  color: #82969b;
  font-size: 9px;
}

.status-form-footer .primary {
  min-height: 35px;
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 10px;
}

.status-feed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 3px 0;
  border-top: 1px solid #293a40;
}

.status-feed-heading h3 {
  margin: 0;
  font-size: 13px;
}

.status-feed-heading > span {
  color: #82969b;
  font-size: 10px;
}

.status-empty {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 26px 12px;
  border: 1px dashed #2c4146;
  border-radius: 15px;
  text-align: center;
}

.status-empty-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #335b65;
  border-radius: 17px;
  background: #162f35;
  color: #90d7e9;
  font-size: 23px;
}

.status-empty strong { font-size: 12px; }
.status-empty p {
  margin: 0;
  color: #85999f;
  font-size: 11px;
}

.status-feed { display: grid; gap: 13px; }

.status-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2b4045;
  border-radius: 16px;
  background: #111d22;
}

.status-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.status-author-avatar {
  flex-basis: 37px;
  width: 37px;
  height: 37px;
  border-width: 1px;
  font-size: 13px;
}

.status-author {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.status-author strong {
  overflow-wrap: anywhere;
  color: #e6eef0;
  font-size: 11px;
}

.status-author small {
  color: #899ca1;
  font-size: 9px;
  line-height: 1.5;
}

.status-delete {
  padding: 7px 9px;
  border: 1px solid #673c43;
  border-radius: 8px;
  background: #1e3439;
  color: #ffbcc3;
  font-size: 10px;
}

.status-media {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100px;
  overflow: hidden;
  background: #080f13;
}

.status-media img,
.status-media video {
  display: block;
  width: 100%;
  max-height: 470px;
  object-fit: contain;
  background: #080f13;
}

.status-media-error {
  margin: 10px;
  padding: 12px;
  color: #ffb8c0;
  font-size: 11px;
}

.status-caption {
  margin: 0;
  padding: 12px 13px 4px;
  color: #e6ecee;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.status-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px 12px;
  color: #8ba49c;
  font-size: 9px;
}

@media (max-width: 680px) {
  .status-feature { gap: 12px; }
  .status-publish { padding: 10px; }
  .status-media img, .status-media video { max-height: 360px; }
}

/* PART 6: E2EE Alpha indicator */
.e2ee-note {
  color: #83cadc !important;
  font-size: 9px !important;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}

.header-tag {
  max-width: 120px;
  white-space: normal;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 680px) {
  .e2ee-note {
    max-width: 100%;
    font-size: 8px !important;
  }

  .header-tag {
    max-width: 75px;
  }
}

/* PART 6: E2EE Alpha indicator */
.e2ee-note {
  color: #83cadc !important;
  font-size: 9px !important;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}

.header-tag {
  max-width: 120px;
  white-space: normal;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 680px) {
  .e2ee-note {
    max-width: 100%;
    font-size: 8px !important;
  }

  .header-tag {
    max-width: 75px;
  }
}


/* VexApp verification selector — mobile-first polish */
.auth-card .verification-select-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
  margin: 18px 0 22px !important;
  padding: 17px !important;
  border: 1px solid #293947 !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #15212b, #101820) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.auth-card .verification-select-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 5px !important;
}

.auth-card .verification-eyebrow {
  color: #75b5ff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
}

.auth-card .verification-select-heading > strong {
  display: block !important;
  margin: 0 !important;
  color: #eff5ff !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.auth-card .verification-select-heading > p {
  display: block !important;
  margin: 0 !important;
  color: #98a9bb !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.auth-card .verification-select-label {
  display: block !important;
  margin: 3px 0 0 !important;
  color: #cbd7e4 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.auth-card .verification-select-control {
  position: relative !important;
  width: 100% !important;
}

.auth-card .verification-select-control::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-58%);
  color: #80b8ff;
  font-size: 23px;
  pointer-events: none;
}

.auth-card select.verification-select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 13px 43px 13px 14px !important;
  border: 1px solid #34495b !important;
  border-radius: 13px !important;
  background: #0b141c !important;
  color: #eff5ff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.auth-card select.verification-select:focus {
  outline: 2px solid rgba(70, 145, 255, .6) !important;
  outline-offset: 2px !important;
  border-color: #579cff !important;
}

.auth-card select.verification-select option {
  background: #111d27 !important;
  color: #eff5ff !important;
}

.auth-card .verification-select-help {
  display: block !important;
  margin: 2px 0 0 !important;
  padding: 10px 12px !important;
  border-left: 3px solid #00dffc !important;
  border-radius: 0 9px 9px 0 !important;
  background: rgba(67, 143, 255, .075) !important;
  color: #a7b7c8 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}


/* VexApp V6 — Profile editor */
.profile-edit-trigger,
.profile-save,
.profile-cancel,
.profile-editor-close {
  font: inherit;
  cursor: pointer;
}

.profile-edit-trigger {
  border: 1px solid var(--border, rgba(130, 155, 195, .28));
  border-radius: 10px;
  padding: 9px 12px;
  color: inherit;
  background: var(--surface, rgba(100, 130, 180, .12));
  white-space: nowrap;
}

.avatar-has-image {
  overflow: hidden;
  padding: 0;
}

.avatar-has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.profile-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 18px;
  background: rgba(4, 8, 18, .76);
  backdrop-filter: blur(9px);
}

.profile-editor {
  width: min(100%, 460px);
  max-height: 92dvh;
  overflow-y: auto;
  padding: 22px;
  color: var(--text, #edf3ff);
  background: var(--panel, #111827);
  border: 1px solid var(--border, rgba(160, 180, 220, .24));
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
}

.profile-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.profile-editor-heading h2 {
  margin: 0 0 6px;
  font-size: 21px;
}

.profile-editor-heading p,
.profile-editor-note {
  margin: 0;
  color: var(--muted, #a5b1c7);
  font-size: 12px;
  line-height: 1.5;
}

.profile-editor-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border, rgba(160, 180, 220, .24));
  border-radius: 10px;
  color: inherit;
  background: transparent;
  font-size: 24px;
}

.profile-editor-form {
  display: grid;
  gap: 15px;
}

.profile-editor-form > label:not(.profile-photo-picker) {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
}

.profile-editor-form input:not([type="file"]),
.profile-editor-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border, rgba(160, 180, 220, .24));
  border-radius: 11px;
  padding: 12px;
  color: inherit;
  background: var(--surface, rgba(100, 130, 180, .08));
  font: inherit;
  font-size: 14px;
}

.profile-editor-form textarea {
  resize: vertical;
}

.profile-editor-form label small {
  color: var(--muted, #a5b1c7);
  font-size: 11px;
  font-weight: 400;
}

.profile-photo-picker {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0 auto 4px;
  color: var(--accent, #83b8ff);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.profile-photo-picker img,
.profile-photo-placeholder {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surface, rgba(100, 130, 180, .16));
  font-size: 30px;
}

.profile-photo-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.profile-editor-note {
  padding: 11px;
  border-radius: 10px;
  background: rgba(100, 130, 180, .08);
}

.profile-editor-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 3px;
}

.profile-save,
.profile-cancel {
  border: 1px solid var(--border, rgba(160, 180, 220, .24));
  border-radius: 10px;
  padding: 11px 14px;
}

.profile-cancel {
  color: inherit;
  background: transparent;
}

.profile-save {
  color: white;
  background: var(--accent, #2563eb);
  border-color: transparent;
}

.profile-save:disabled,
.profile-cancel:disabled,
.profile-editor-close:disabled {
  cursor: not-allowed;
  opacity: .6;
}

@media (max-width: 520px) {
  .profile-editor-overlay { padding: 10px; }
  .profile-editor { padding: 17px; border-radius: 16px; }
  .profile-edit-trigger { padding: 8px 9px; font-size: 12px; }
}


/* VexApp V6 — Public profile bio */
.person-bio,
.conversation-bio {
  display: block;
  max-width: 100%;
  color: var(--muted, #a5b1c7);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.person-bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.conversation-bio {
  margin-top: 3px;
}


/* VexApp V6 — Account Settings Center */
.settings-center-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 14px;
  background: rgba(4, 8, 18, .78);
  backdrop-filter: blur(9px);
}

.settings-center {
  width: min(100%, 490px);
  max-height: 92dvh;
  overflow-y: auto;
  padding: 22px;
  color: var(--text, #edf3ff);
  background: var(--panel, #111827);
  border: 1px solid var(--border, rgba(160, 180, 220, .24));
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

.settings-center-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.settings-center-heading h2 {
  margin: 0 0 6px;
  font-size: 21px;
}

.settings-center-heading p,
.settings-section > p {
  margin: 0;
  color: var(--muted, #a5b1c7);
  font-size: 12px;
  line-height: 1.55;
}

.settings-account-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border, rgba(160, 180, 220, .24));
  border-radius: 14px;
  margin-bottom: 19px;
}

.settings-account-details {
  display: grid;
  flex: 1;
  min-width: 110px;
  gap: 4px;
  overflow-wrap: anywhere;
}

.settings-account-details strong {
  font-size: 14px;
}

.settings-account-details > span {
  color: var(--muted, #a5b1c7);
  font-size: 11px;
}

.settings-secondary,
.settings-signout {
  border: 1px solid var(--border, rgba(160, 180, 220, .24));
  border-radius: 10px;
  padding: 9px 12px;
  color: inherit;
  background: var(--surface, rgba(100, 130, 180, .08));
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.settings-section {
  display: grid;
  gap: 11px;
  margin-top: 18px;
}

.settings-section h3 {
  margin: 0;
  font-size: 15px;
}

.settings-password-form {
  display: grid;
  gap: 12px;
}

.settings-password-form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
}

.settings-password-form input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--border, rgba(160, 180, 220, .24));
  border-radius: 10px;
  padding: 12px;
  color: inherit;
  background: var(--surface, rgba(100, 130, 180, .08));
  font: inherit;
  font-size: 14px;
}

.settings-upcoming {
  padding: 13px;
  border-radius: 12px;
  background: rgba(100, 130, 180, .08);
}

.settings-center-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}

.settings-center button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

@media (max-width: 520px) {
  .settings-center-overlay { padding: 9px; }
  .settings-center { padding: 16px; border-radius: 16px; }
  .settings-account-card { gap: 9px; }
}


/* VexApp V6 — Verified account badge */
.vex-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: #2585f5;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

/* PART 22 — unread message counters */
.unread-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: #20a6c8;
  color: #071113;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}


/* PART 25 PREMIUM SPLASH */
.vex-splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #f4f7ff;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(55, 76, 190, 0.20), transparent 42%),
    radial-gradient(ellipse at 15% 85%, rgba(0, 220, 255, 0.09), transparent 35%),
    #060812;
  font-family: inherit;
}

.vex-splash-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(120, 144, 255, 0.035) 50%,
    transparent 75%
  );
  background-size: 220% 100%;
  animation: vex-splash-shimmer 2.6s ease-in-out both;
}

.vex-splash-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(105, 230, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 230, 255, 0.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 5%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 5%, transparent 76%);
}

.vex-splash-orb {
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(58px);
  opacity: 0.24;
  animation: vex-splash-float 3.8s ease-in-out infinite alternate;
}

.vex-splash-orb-one {
  top: 15%;
  left: -95px;
  background: #536dfe;
}

.vex-splash-orb-two {
  right: -105px;
  bottom: 13%;
  background: #19bfe8;
  animation-delay: -1.8s;
}

.vex-splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  text-align: center;
  animation: vex-splash-enter 850ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.vex-splash-logo {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(178, 194, 255, 0.32);
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(48, 62, 115, 0.9), rgba(13, 17, 35, 0.96));
  box-shadow:
    0 0 0 7px rgba(94, 118, 255, 0.055),
    0 0 45px rgba(88, 112, 255, 0.23),
    inset 0 1px rgba(255, 255, 255, 0.12);
  color: #f8faff;
  font-size: 3.15rem;
  font-weight: 850;
  letter-spacing: -0.11em;
  animation: vex-splash-logo 1050ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.vex-splash-logo span {
  color: #69c9ff;
  text-shadow: 0 0 22px rgba(75, 190, 255, 0.8);
}

.vex-splash-wordmark {
  margin-top: 25px;
  font-size: clamp(2rem, 9vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 1.1;
  animation: vex-splash-enter 700ms 120ms ease-out both;
}

.vex-splash-tagline {
  margin-top: 12px;
  color: rgba(207, 217, 245, 0.67);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  animation: vex-splash-enter 700ms 220ms ease-out both;
}

.vex-splash-progress {
  position: relative;
  width: 166px;
  height: 3px;
  margin-top: 34px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(174, 190, 255, 0.14);
}

.vex-splash-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #168bff, #65eaff);
  box-shadow: 0 0 14px rgba(90, 180, 255, 0.65);
  animation: vex-splash-progress 2.1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.vex-splash-status {
  margin-top: 13px;
  color: rgba(183, 196, 230, 0.53);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  animation: vex-splash-enter 700ms 280ms ease-out both;
}

.vex-splash-footer {
  position: absolute;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  left: 16px;
  color: rgba(182, 194, 222, 0.46);
  font-size: 0.59rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-align: center;
}

.vex-splash-footer span {
  color: rgba(207, 221, 255, 0.8);
}

@keyframes vex-splash-enter {
  from {
    opacity: 0;
    transform: translateY(13px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vex-splash-logo {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: scale(0.76) rotate(-7deg);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes vex-splash-float {
  from { transform: translate3d(0, -10px, 0) scale(0.94); }
  to { transform: translate3d(15px, 15px, 0) scale(1.08); }
}

@keyframes vex-splash-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}

@keyframes vex-splash-progress {
  from { transform: translateX(-115%); }
  to { transform: translateX(245%); }
}

@media (max-width: 380px) {
  .vex-splash-logo {
    width: 78px;
    height: 78px;
    border-radius: 24px;
  }

  .vex-splash-tagline {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vex-splash-screen *,
  .vex-splash-screen::before {
    animation: none !important;
    transition: none !important;
  }

  .vex-splash-progress span {
    width: 100%;
    transform: none;
  }
}


/* VexApp: halaman Profil terintegrasi */
.messenger-shell.profile-tab-active {
  display: block;
  min-width: 0;
}

.messenger-shell.profile-tab-active .list-pane {
  display: block;
  width: 100%;
  max-width: 920px;
  min-width: 0;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  border-right: 0;
  overflow-y: auto;
}

.messenger-shell.profile-tab-active .conversation-pane {
  display: none;
}

.profile-tab-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 8px 0 20px;
  box-sizing: border-box;
}

.profile-tab-heading {
  display: grid;
  gap: 7px;
}

.profile-tab-heading h1 {
  margin: 0;
  color: #edf5f7;
  font-size: 24px;
  line-height: 1.25;
}

.profile-tab-heading > p:last-child {
  margin: 0;
  color: #9eafb6;
  line-height: 1.5;
}

.profile-tab-eyebrow {
  margin: 0;
  color: #70c4d9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.profile-tab-page .settings-account-card,
.profile-tab-page .settings-section {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.profile-tab-page .settings-account-card {
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.profile-tab-page .settings-account-details {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-tab-page .settings-password-form {
  width: 100%;
}

.profile-tab-page .settings-password-form input {
  box-sizing: border-box;
  max-width: 100%;
}

.profile-tab-signout {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 680px) {
  .profile-tab-page {
    gap: 13px;
    padding-top: 4px;
  }

  .profile-tab-heading h1 {
    font-size: 21px;
  }

  .profile-tab-page .settings-account-card {
    gap: 12px;
  }
}



/* VexApp: glass pill navigation with release-to-select */
.bottom-nav {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 0;
  width: 100%;
  max-width: 850px;
  margin: 8px auto 0;
  padding: 5px;
  border: 1px solid rgba(183, 216, 224, 0.22);
  border-radius: 999px;
  background: rgba(12, 21, 26, 0.48);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  backdrop-filter: blur(22px) saturate(175%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.nav-pill-indicator {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 5);
  box-sizing: border-box;
  border: 1px solid rgba(191, 242, 255, 0.30);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(64, 149, 170, 0.72),
    rgba(20, 70, 83, 0.65)
  );
  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.21),
    inset 0 -1px 0 rgba(0, 0, 0, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  pointer-events: none;
  will-change: transform;
  transition:
    transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background 220ms ease,
    box-shadow 220ms ease;
}

.bottom-nav.nav-dragging .nav-pill-indicator {
  transition: none;
  background: linear-gradient(
    135deg,
    rgba(77, 171, 195, 0.80),
    rgba(29, 90, 105, 0.72)
  );
  box-shadow:
    0 7px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 9px 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a0b0b7;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease, opacity 180ms ease;
}

.nav-item.nav-active {
  background: transparent;
  color: #e0f9ff;
}

.nav-item:focus-visible {
  outline: 2px solid rgba(191, 242, 255, 0.90);
  outline-offset: -3px;
}

.nav-item > span {
  pointer-events: none;
}

.nav-icon {
  display: block;
  font-size: 19px;
  line-height: 1.1;
}

@media (max-width: 680px) {
  .bottom-nav {
    gap: 0;
    padding: 4px;
  }

  .nav-pill-indicator {
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 5);
  }

  .nav-item {
    gap: 4px;
    padding: 9px 1px;
    font-size: 9px;
  }

  .nav-icon {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-pill-indicator,
  .nav-item {
    transition-duration: 0.01ms;
  }
}


/* VexApp: user About dialog */
.conversation-profile-avatar,
.profile-about-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.conversation-profile-avatar {
  border-radius: 50%;
}

.conversation-profile-clickable {
  cursor: pointer;
  border-radius: 10px;
}

.conversation-profile-clickable:focus-visible,
.conversation-profile-avatar:focus-visible,
.profile-about-avatar:focus-visible {
  outline: 2px solid rgba(112, 196, 217, 0.9);
  outline-offset: 3px;
}

.profile-own-actions,
.user-about-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.profile-own-actions button,
.user-about-actions button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 72px;
  padding: 12px 6px;
  border: 1px solid rgba(90, 225, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  color: #e7faff;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.profile-own-actions button:active,
.user-about-actions button:active {
  transform: scale(0.97);
}

.profile-own-actions button span:first-child,
.user-about-actions button span:first-child {
  font-size: 22px;
  line-height: 1;
}

.user-about-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  overflow-y: auto;
  background: rgba(3, 8, 11, 0.73);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: user-about-fade-in 180ms ease-out both;
}

.user-about-dialog {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 540px;
  max-height: min(88dvh, 900px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid rgba(90, 225, 255, 0.20);
  border-radius: 24px;
  background: rgba(15, 25, 30, 0.94);
  color: #edf5f7;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
  animation: user-about-pop-in 260ms cubic-bezier(0.22, 0.85, 0.26, 1) both;
}

.user-about-header,
.user-about-identity,
.user-about-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.user-about-header h2,
.user-about-name h3,
.user-about-bio h3,
.user-about-history h3 {
  margin: 0;
}

.user-about-header h2 {
  font-size: 21px;
}

.user-about-eyebrow {
  margin: 0 0 6px;
  color: #70c4d9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.user-about-identity {
  justify-content: flex-start;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(90, 225, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
}

.user-about-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.user-about-name h3 {
  font-size: 19px;
}

.user-about-name p {
  margin: 5px 0 0;
  color: #9eb0b8;
  overflow-wrap: anywhere;
}

.user-about-bio,
.user-about-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-about-bio h3,
.user-about-history h3 {
  font-size: 14px;
}

.user-about-bio > p {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: #dce6e9;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.user-about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.user-about-facts > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  padding: 13px;
  border: 1px solid rgba(90, 225, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.user-about-facts span,
.user-about-history-entry > div > span {
  color: #93a6af;
  font-size: 11px;
}

.user-about-facts strong {
  color: #e5f0f3;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.user-about-history-heading span {
  color: #93a6af;
  font-size: 11px;
}

.user-about-muted {
  margin: 0;
  color: #a7b5bb;
  font-size: 12px;
  line-height: 1.5;
}

.user-about-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-about-history-entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(90, 225, 255, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.user-about-history-entry time {
  color: #70c4d9;
  font-size: 11px;
  line-height: 1.5;
}

.user-about-history-entry > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.user-about-history-entry p {
  margin: 0;
  color: #e1eaec;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.user-about-footnote {
  margin: -5px 0 0;
  color: #8498a1;
  font-size: 10px;
  line-height: 1.5;
}

@keyframes user-about-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes user-about-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .user-about-overlay {
    align-items: flex-end;
    padding: 8px;
  }

  .user-about-dialog {
    max-height: 90dvh;
    padding: 17px;
    gap: 15px;
    border-radius: 22px;
  }

  .user-about-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-own-actions,
  .user-about-actions {
    gap: 7px;
  }

  .profile-own-actions button,
  .user-about-actions button {
    min-height: 68px;
    padding: 10px 3px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-about-overlay,
  .user-about-dialog,
  .profile-own-actions button,
  .user-about-actions button {
    animation: none;
    transition: none;
  }
}



/* VexApp: profile screenshot-inspired redesign */
.profile-redesign {
  --profile-bg: #0b1115;
  --profile-panel: #121b20;
  --profile-muted: #9caeb5;
  --profile-accent: #00dffc;
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 0 28px;
}

.profile-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 390px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid rgba(115, 235, 255, 0.14);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 82% 12%, rgba(0, 130, 220, 0.33), transparent 48%),
    linear-gradient(145deg, #102a44, #111c21 64%, #0a1115);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.23);
}

.profile-hero-backdrop {
  position: absolute;
  z-index: -2;
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  object-fit: cover;
  object-position: center 35%;
  filter: blur(12px) saturate(1.18) brightness(0.67);
  transform: scale(1.035);
}

.profile-hero-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 11, 14, 0.11) 0%, rgba(4, 11, 14, 0.20) 30%, rgba(4, 11, 14, 0.76) 68%, rgba(8, 16, 20, 0.97) 100%),
    linear-gradient(110deg, rgba(4, 30, 55, 0.27), transparent 68%);
  pointer-events: none;
}

.profile-hero-topline {
  position: absolute;
  inset: 16px 16px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-hero-brand,
.profile-hero-account-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: rgba(8, 16, 18, 0.29);
  color: #f0fcff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.profile-hero-brand-mark {
  color: var(--profile-accent);
  font-size: 15px;
  letter-spacing: -1px;
}

.profile-hero-account-tag {
  color: #b7f7ff;
  font-size: 8px;
  letter-spacing: 0.6px;
}

.profile-hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  margin-top: 60px;
}

.profile-hero-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: 9px;
  padding: 0;
  border: 3px solid rgba(190, 248, 255, 0.84);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.32),
    0 0 0 5px rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.profile-hero-avatar .avatar {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  font-size: 32px;
}

.profile-hero-avatar-hint {
  position: absolute;
  right: -7px;
  bottom: -4px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(9, 18, 20, 0.85);
  color: #e6faff;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

.profile-hero-overline {
  margin: 0;
  color: #b8dee7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.profile-hero-main h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 6vw, 36px);
  font-weight: 850;
  letter-spacing: -0.9px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.profile-hero-username {
  margin: 0;
  color: #c9f7ff;
  font-size: 14px;
  font-weight: 550;
  overflow-wrap: anywhere;
}

.profile-hero-bio {
  max-width: 590px;
  margin: 4px 0 0;
  color: rgba(244, 253, 255, 0.88);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.profile-hero-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
}

.profile-hero-actions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 79px;
  padding: 10px 4px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 17px;
  background: rgba(8, 16, 18, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: #f4fdff;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.profile-hero-actions button:first-child {
  background: rgba(55, 113, 127, 0.48);
}

.profile-hero-actions button:hover {
  border-color: rgba(183, 241, 255, 0.39);
  background: rgba(48, 97, 109, 0.57);
}

.profile-hero-actions button:active {
  transform: scale(0.96);
}

.profile-hero-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.profile-action-icon {
  font-size: 24px;
  line-height: 1;
}

.profile-detail-switch {
  display: flex;
  align-self: center;
  width: min(100%, 390px);
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(180, 208, 215, 0.11);
  border-radius: 999px;
  background: rgba(18, 27, 32, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.profile-detail-tab {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #91a3ab;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition:
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

.profile-detail-tab.active {
  background: linear-gradient(130deg, rgba(0, 130, 220, 0.35), rgba(8, 60, 100, 0.48));
  box-shadow: inset 0 0 0 1px rgba(161, 222, 237, 0.11);
  color: #d6f7ff;
}

.profile-info-card,
.profile-security-card {
  min-width: 0;
  padding: 21px;
  border: 1px solid rgba(181, 207, 214, 0.10);
  border-radius: 23px;
  background:
    linear-gradient(155deg, rgba(24, 34, 39, 0.96), rgba(13, 20, 24, 0.98));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  box-sizing: border-box;
}

.profile-info-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.profile-info-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #80c6d8;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.6px;
}

.profile-info-card-heading h2 {
  margin: 0;
  color: #eff8fa;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.profile-info-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(161, 222, 237, 0.15);
  border-radius: 13px;
  background: rgba(71, 135, 151, 0.13);
  color: #9ddae9;
  font-size: 22px;
}

.profile-info-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(190, 215, 221, 0.085);
}

.profile-info-row:last-of-type {
  border-bottom: 0;
}

.profile-info-label {
  color: #94a6ae;
  font-size: 11px;
  font-weight: 650;
}

.profile-info-row strong {
  color: #eff5f6;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.profile-info-footer,
.profile-security-description,
.profile-privacy-card > p {
  margin: 12px 0 0;
  color: #899da5;
  font-size: 11px;
  line-height: 1.55;
}

.profile-history-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border: 1px solid rgba(161, 222, 237, 0.15);
  border-radius: 13px;
  background: rgba(71, 135, 151, 0.13);
  color: #a1dae8;
  font-size: 22px;
  cursor: pointer;
}

.profile-history-refresh:disabled {
  opacity: 0.5;
}

.profile-history-intro {
  margin: 0 0 15px;
  color: #94a6ae;
  font-size: 12px;
  line-height: 1.5;
}

.profile-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 12px;
  border: 1px dashed rgba(175, 209, 217, 0.15);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.018);
  text-align: center;
}

.profile-history-empty > span {
  color: #8dcfdf;
  font-size: 27px;
}

.profile-history-empty strong {
  color: #e7f2f5;
  font-size: 13px;
}

.profile-history-empty p {
  max-width: 330px;
  margin: 0;
  color: #8fa3ab;
  font-size: 11px;
  line-height: 1.5;
}

.profile-history-list {
  display: flex;
  flex-direction: column;
}

.profile-history-entry {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 11px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(190, 215, 221, 0.08);
}

.profile-history-entry:last-child {
  border-bottom: 0;
}

.profile-history-timeline {
  position: relative;
  display: flex;
  justify-content: center;
}

.profile-history-timeline::after {
  position: absolute;
  top: 12px;
  bottom: -18px;
  width: 1px;
  background: rgba(112, 196, 217, 0.24);
  content: "";
}

.profile-history-entry:last-child .profile-history-timeline::after {
  display: none;
}

.profile-history-timeline > span {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 50%;
  background: #73c3d7;
  box-shadow: 0 0 0 4px rgba(112, 196, 217, 0.10);
}

.profile-history-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 13px;
}

.profile-history-content time {
  color: #7fc9db;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.profile-history-value {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-history-value > span {
  color: #8fa2aa;
  font-size: 10px;
  font-weight: 750;
}

.profile-history-value p {
  margin: 0;
  color: #e5edef;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.profile-redesign .settings-password-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 17px;
}

.profile-redesign .settings-password-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #c3d1d4;
  font-size: 12px;
  font-weight: 700;
}

.profile-redesign .settings-password-form input {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  box-sizing: border-box;
  border: 1px solid rgba(181, 207, 214, 0.16);
  border-radius: 13px;
  background: rgba(4, 11, 14, 0.38);
  color: #f1f8fa;
}

.profile-redesign .profile-save {
  min-height: 45px;
  border-radius: 13px;
}

.profile-tab-signout {
  min-height: 45px;
  border-radius: 14px;
}

@media (max-width: 680px) {
  .profile-redesign {
    gap: 13px;
    padding-bottom: 18px;
  }

  .profile-hero {
    min-height: 365px;
    gap: 17px;
    padding: 14px;
    border-radius: 23px;
  }

  .profile-hero-topline {
    inset: 12px 12px auto;
    gap: 6px;
  }

  .profile-hero-brand {
    padding: 7px 9px;
    font-size: 8px;
  }

  .profile-hero-account-tag {
    padding: 7px 8px;
    font-size: 7px;
  }

  .profile-hero-main {
    margin-top: 56px;
  }

  .profile-hero-avatar {
    width: 82px;
    height: 82px;
  }

  .profile-hero-actions {
    gap: 7px;
  }

  .profile-hero-actions button {
    min-height: 72px;
    gap: 7px;
    padding: 9px 2px;
    border-radius: 14px;
    font-size: 10px;
  }

  .profile-action-icon {
    font-size: 22px;
  }

  .profile-info-card,
  .profile-security-card {
    padding: 17px;
    border-radius: 20px;
  }

  .profile-info-card-heading h2 {
    font-size: 18px;
  }

  .profile-info-row strong {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-hero-actions button,
  .profile-detail-tab {
    transition: none;
  }
}

/* VexApp: fully transparent pill navigation */

/* VexApp: fully transparent pill navigation */
.bottom-nav {
  background: transparent !important;
  border-color: rgba(190, 226, 235, 0.16);
  box-shadow: none;
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  backdrop-filter: blur(24px) saturate(175%);
}

.bottom-nav .nav-pill-indicator {
  background: linear-gradient(
    135deg,
    rgba(89, 171, 192, 0.48),
    rgba(30, 93, 109, 0.38)
  );
  border-color: rgba(195, 243, 255, 0.28);
  box-shadow:
    0 3px 18px rgba(22, 76, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.17);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  backdrop-filter: blur(18px) saturate(190%);
}

.bottom-nav.nav-dragging .nav-pill-indicator {
  background: linear-gradient(
    135deg,
    rgba(108, 197, 219, 0.57),
    rgba(39, 115, 134, 0.46)
  );
}

.bottom-nav .nav-item {
  background: transparent;
}

.bottom-nav .nav-item.nav-active {
  color: #e2f9ff;
}

/* VexApp: realtime presence and typing polish */

/* VexApp: realtime presence and typing polish */
.peer-presence-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  color: #92a4ac;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.peer-presence-label.peer-online {
  color: #7ecce0;
}

.peer-presence-label.peer-is-typing {
  color: #a4ddeb;
}

.presence-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #45bbd9;
  box-shadow: 0 0 0 3px rgba(69, 187, 217, 0.12);
  animation: vex-online-pulse 2s ease-in-out infinite;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 15px;
}

.typing-dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8bd4e6;
  animation: vex-typing-bounce 0.9s ease-in-out infinite;
}

.typing-dots i:nth-child(2) {
  animation-delay: 0.14s;
}

.typing-dots i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes vex-typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.48;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes vex-online-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(69, 187, 217, 0.10); }
  50% { box-shadow: 0 0 0 5px rgba(69, 187, 217, 0.04); }
}

/* Dasar Pill benar-benar transparan; kaca tetap pada indikator aktif. */
.bottom-nav {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.bottom-nav .nav-item,
.bottom-nav .nav-item.nav-active {
  background: transparent !important;
}

.bottom-nav .nav-pill-indicator {
  background: linear-gradient(
    135deg,
    rgba(89, 171, 192, 0.43),
    rgba(30, 93, 109, 0.32)
  ) !important;
  border-color: rgba(195, 243, 255, 0.25);
  box-shadow:
    0 3px 15px rgba(22, 76, 90, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(18px) saturate(185%);
  backdrop-filter: blur(18px) saturate(185%);
}

@media (prefers-reduced-motion: reduce) {
  .presence-status-dot,
  .typing-dots i {
    animation: none;
  }
}

/* VexApp: iOS transparent spring pill */

/* VexApp: iOS transparent spring pill */

/* Area navigasi tidak memiliki panel hitam. */
.bottom-nav {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Tombol tetap transparan; kaca hanya pada pill yang aktif. */
.bottom-nav .nav-item,
.bottom-nav .nav-item.nav-active {
  background: transparent !important;
  box-shadow: none !important;
}

/* Lapisan kaca aktif: transparan, blur, dan pegas. */
.bottom-nav .nav-pill-indicator {
  background: linear-gradient(
    135deg,
    rgba(118, 213, 237, 0.28),
    rgba(45, 127, 147, 0.17)
  ) !important;

  border: 1px solid rgba(207, 245, 255, 0.36) !important;
  border-radius: 999px;

  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);

  box-shadow:
    0 4px 18px rgba(58, 154, 178, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;

  scale: 1 1;

  transition:
    transform 540ms cubic-bezier(0.22, 1.65, 0.35, 1),
    scale 320ms cubic-bezier(0.2, 1.7, 0.3, 1),
    background 180ms ease,
    box-shadow 180ms ease;

  transform-origin: center;
  will-change: transform, scale;
}

/* Saat ditahan: pill membesar, sedangkan posisinya tetap mengikuti jari. */
.bottom-nav.nav-dragging .nav-pill-indicator {
  scale: 1.055 1.13;

  transition:
    transform 0ms linear,
    scale 220ms cubic-bezier(0.2, 1.5, 0.35, 1),
    background 180ms ease;

  background: linear-gradient(
    135deg,
    rgba(139, 226, 248, 0.38),
    rgba(57, 148, 171, 0.25)
  ) !important;

  box-shadow:
    0 6px 23px rgba(58, 154, 178, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* Setelah jari dilepas: kembali ke ukuran normal dan memantul ke tujuan. */
.bottom-nav:not(.nav-dragging) .nav-pill-indicator {
  scale: 1 1;
  transition:
    transform 540ms cubic-bezier(0.22, 1.65, 0.35, 1),
    scale 360ms cubic-bezier(0.2, 1.7, 0.3, 1),
    background 220ms ease,
    box-shadow 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav .nav-pill-indicator,
  .bottom-nav.nav-dragging .nav-pill-indicator,
  .bottom-nav:not(.nav-dragging) .nav-pill-indicator {
    transition-duration: 0.01ms;
  }
}

/* VexApp: final #48dff5 glass navigation override */

/* Tidak ada bidang hitam yang dilukis oleh container navigasi. */
.bottom-nav {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  box-sizing: border-box;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 1px solid transparent !important;
  box-shadow: none !important;

  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;

  -webkit-tap-highlight-color: transparent;
}

/* Tombol tidak boleh menggambar latar sendiri. */
.bottom-nav .nav-item,
.bottom-nav .nav-item.nav-active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Kaca ungu transparan untuk pill yang aktif. */
.bottom-nav .nav-pill-indicator {
  box-sizing: border-box;

  background: linear-gradient(
    135deg,
    rgba(132, 228, 252, 0.27),
    rgba(58, 201, 237, 0.17) 55%,
    rgba(33, 152, 182, 0.13)
  ) !important;

  background-color: rgba(0, 220, 255, 0.16) !important;

  border: 1px solid rgba(194, 243, 255, 0.43) !important;
  border-radius: 999px;

  -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
  backdrop-filter: blur(26px) saturate(180%) !important;

  box-shadow:
    0 0 16px rgba(0, 220, 255, 0.14),
    0 5px 22px rgba(29, 125, 149, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.31),
    inset 0 -1px 0 rgba(194, 243, 255, 0.12) !important;

  transform-origin: center;
  will-change: transform, scale;

  transition:
    transform 560ms cubic-bezier(0.22, 1.65, 0.32, 1),
    scale 360ms cubic-bezier(0.2, 1.65, 0.3, 1),
    background-color 200ms ease,
    box-shadow 220ms ease;
}

/* Saat jari menahan pill: efek membesar dan cahaya ungu meningkat. */
.bottom-nav.nav-dragging .nav-pill-indicator {
  scale: 1.065 1.16;

  background: linear-gradient(
    135deg,
    rgba(180, 239, 254, 0.40),
    rgba(0, 220, 255, 0.28),
    rgba(40, 182, 217, 0.22)
  ) !important;

  background-color: rgba(0, 220, 255, 0.25) !important;

  border-color: rgba(213, 247, 255, 0.62) !important;

  box-shadow:
    0 0 22px rgba(85, 215, 247, 0.23),
    0 7px 25px rgba(29, 125, 149, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;

  transition:
    transform 0ms linear,
    scale 200ms cubic-bezier(0.2, 1.65, 0.3, 1),
    background-color 180ms ease,
    box-shadow 180ms ease;
}

/* Setelah jari dilepas, scale kembali dan posisi memantul ke tujuan. */
.bottom-nav:not(.nav-dragging) .nav-pill-indicator {
  scale: 1 1;

  transition:
    transform 560ms cubic-bezier(0.22, 1.65, 0.32, 1),
    scale 380ms cubic-bezier(0.2, 1.7, 0.3, 1),
    background-color 220ms ease,
    box-shadow 220ms ease;
}

/* Aksen teks dan fokus memakai ungu, bukan hijau. */
.bottom-nav .nav-item {
  color: #bdf8ff !important;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav .nav-item.nav-active {
  color: #d9fbff !important;
}

.bottom-nav .nav-item:focus-visible {
  outline: 2px solid rgba(120, 240, 255, 0.90) !important;
  outline-offset: -3px;
}

/* Responsif untuk lima tab pada layar telepon. */
@media (max-width: 680px) {
  .bottom-nav {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
  }

  .bottom-nav .nav-pill-indicator {
    border-radius: 999px;
  }

  .bottom-nav .nav-item,
  .bottom-nav .nav-item.nav-active {
    background: transparent !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav .nav-pill-indicator,
  .bottom-nav.nav-dragging .nav-pill-indicator,
  .bottom-nav:not(.nav-dragging) .nav-pill-indicator {
    transition-duration: 0.01ms !important;
  }
}

/* VexApp: #48dff5 accent + subtle glass */

/* 1. Palet aksen utama */
:root {
  --vex-#48dff5: #00dffc;
  --vex-#48dff5-bright: #65eaff;
  --vex-#48dff5-soft: #bdf8ff;
  --vex-#48dff5-deep: #0878e8;
  --vex-#48dff5-rgb: 139, 92, 246;
  --accent-color: #00dffc;
  --accent: #00dffc;
  --primary-color: #00dffc;
  --focus-color: #65eaff;
}

/* 2. Tombol utama dan aksi */
button.primary,
.primary-button,
.button-primary,
.btn-primary,
button[type="submit"],
.auth-submit,
.login-button,
.register-button,
.send-button,
.composer-send-button,
.profile-save-button {
  color: #fff !important;
  background: linear-gradient(
    135deg,
    #72e3ff 0%,
    #3ac9ed 100%
  ) !important;
  border-color: rgba(120, 240, 255, 0.35) !important;
  box-shadow:
    0 4px 16px rgba(58, 201, 237, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

button.primary:hover,
.primary-button:hover,
.button-primary:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.auth-submit:hover,
.login-button:hover,
.register-button:hover,
.send-button:hover,
.composer-send-button:hover,
.profile-save-button:hover {
  background: linear-gradient(
    135deg,
    #65eaff 0%,
    #00dffc 100%
  ) !important;
  box-shadow: 0 6px 22px rgba(0, 220, 255, 0.28);
}

/* 3. Tautan, tab aktif, dan elemen terpilih */
a:not(.danger-link) {
  color: #bdf8ff;
}

[aria-selected="true"],
[aria-current="page"],
[data-active="true"] {
  border-color: rgba(139, 228, 250, 0.48);
}

.tab.active,
.tab-button.active,
.nav-item.active,
.app-nav .active,
.profile-tabs button.active,
.profile-tab.active,
.segmented-control button.active,
.bottom-nav button.active,
.bottom-nav .nav-item.active,
.bottom-nav [aria-current="page"] {
  color: #ccf5ff !important;
  border-color: rgba(139, 228, 250, 0.4) !important;
}

/* 4. Navigasi bawah: kaca tipis dengan pill ungu */
.bottom-nav {
  background: rgba(12, 28, 32, 0.48) !important;
  border: 1px solid rgba(120, 240, 255, 0.16) !important;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
  backdrop-filter: blur(14px) saturate(145%) !important;
}

.bottom-nav .nav-pill-indicator {
  background: linear-gradient(
    135deg,
    rgba(139, 228, 250, 0.31),
    rgba(40, 182, 217, 0.26)
  ) !important;
  border: 1px solid rgba(120, 240, 255, 0.38) !important;
  box-shadow:
    0 0 18px rgba(0, 220, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  -webkit-backdrop-filter: blur(10px) saturate(145%) !important;
  backdrop-filter: blur(10px) saturate(145%) !important;
}

.bottom-nav button.active,
.bottom-nav .nav-item.active,
.bottom-nav [aria-current="page"] {
  color: #dcf8ff !important;
}

/* 5. Fokus kolom input */
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(139, 228, 250, 0.8) !important;
  box-shadow: 0 0 0 3px rgba(0, 220, 255, 0.13) !important;
  outline-color: #65eaff !important;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: #00dffc;
}

/* 6. Border kaca tipis pada panel dan dialog */
.main-header,
.app-header,
.chat-header,
.conversation-header,
.app-sidebar,
.chat-sidebar,
.chat-list,
.profile-card,
.settings-panel,
.user-about-dialog,
.modal-content,
.dialog-content,
.profile-dialog,
.settings-dialog,
.glass-card {
  border-color: rgba(120, 240, 255, 0.13);
}

.user-about-dialog,
.modal-content,
.dialog-content,
.profile-dialog,
.settings-dialog,
.glass-card {
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}

/* 7. Pesan keluar menggunakan aksen #48dff5 */
.message-bubble.own,
.message-bubble.outgoing,
.message.own .message-bubble,
.message.outgoing .message-bubble,
.own-message .message-content,
.outgoing-message .message-content {
  background: linear-gradient(
    135deg,
    rgba(0, 220, 255, 0.92),
    rgba(40, 182, 217, 0.94)
  );
  border-color: rgba(120, 240, 255, 0.18);
}

/* 8. Scrollbar dan seleksi teks */
::selection {
  color: #fff;
  background: rgba(0, 220, 255, 0.48);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 220, 255, 0.48);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 228, 250, 0.72);
}

/* 9. Kurangi gerakan jika pengguna memilih reduced motion */
@media (prefers-reduced-motion: reduce) {
  button.primary,
  .primary-button,
  .button-primary,
  .btn-primary {
    transition: none;
  }
}


/* VexApp: user report form */
.user-report-section {
  display: grid;
  gap: 10px;
  margin-top: 17px;
}
.user-report-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(139, 228, 250, .28);
  border-radius: 13px;
  background: rgba(0, 220, 255,.09);
  color: #bdf8ff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.user-report-toggle:hover { background: rgba(0, 220, 255,.16); }
.user-report-form {
  display: grid;
  gap: 13px;
  padding: 15px;
  border: 1px solid rgba(139, 228, 250, .25);
  border-radius: 15px;
  background: rgba(16, 38, 43, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.user-report-form h3 {
  margin: 0 0 5px;
  color: #ddf8ff;
  font-size: 15px;
}
.user-report-form p,
.user-report-form small {
  margin: 0;
  color: var(--text-muted,#a1b3b8);
  font-size: 12px;
  line-height: 1.55;
}
.user-report-form label {
  display: grid;
  gap: 7px;
  color: var(--text-primary,#e8f6fa);
  font-size: 12px;
  font-weight: 700;
}
.user-report-form select,
.user-report-form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgba(120, 240, 255,.2);
  border-radius: 10px;
  background: rgba(9, 19, 22, .8);
  color: #f0fcff;
  padding: 11px 12px;
  font: inherit;
  font-weight: 400;
}
.user-report-form textarea { min-height: 90px; resize: vertical; }
.user-report-form select:focus,
.user-report-form textarea:focus {
  outline: none;
  border-color: #65eaff;
  box-shadow: 0 0 0 3px rgba(0, 220, 255,.13);
}
.user-report-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}
.user-report-form-actions button {
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 10px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.user-report-cancel {
  border: 1px solid rgba(120, 240, 255,.2);
  background: transparent;
  color: #c9e6ed;
}
.user-report-submit {
  border: 1px solid rgba(120, 240, 255,.35);
  background: linear-gradient(135deg,#72e3ff,#0878e8);
  color: white;
}
.user-report-form-actions button:disabled { opacity: .6; cursor: not-allowed; }
.user-report-success,
.user-report-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
}
.user-report-success {
  border: 1px solid rgba(74, 192, 222, .18);
  background: rgba(34, 164, 197, .07);
  color: #86daef;
}
.user-report-error {
  border: 1px solid rgba(248,113,113,.2);
  background: rgba(239,68,68,.07);
  color: #fca5a5;
}

/* VexApp: universal about profile polish */

/* Dialog profil: #48dff5 glass, dipakai untuk profil sendiri maupun orang lain */
.user-about-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 5, 14, 0.72);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  backdrop-filter: blur(9px) saturate(120%);
}

.user-about-dialog {
  box-sizing: border-box;
  width: min(100%, 650px);
  max-height: min(88dvh, 900px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 3vw, 27px);
  border: 1px solid rgba(120, 240, 255, 0.2);
  border-radius: 25px;
  background:
    radial-gradient(
      ellipse at 10% 0%,
      rgba(58, 201, 237, 0.19),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(18, 38, 43, 0.98),
      rgba(12, 14, 25, 0.98) 72%
    );
  color: #f1fcff;
  box-shadow:
    0 24px 90px rgba(0, 0, 0, 0.45),
    0 0 35px rgba(58, 201, 237, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  animation: vex-about-enter 220ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.user-about-dialog::-webkit-scrollbar {
  width: 5px;
}

.user-about-dialog::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(139, 228, 250, 0.38);
}

.user-about-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.user-about-header > div {
  min-width: 0;
}

.user-about-eyebrow {
  margin: 0 0 5px;
  color: #a1ecff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 2px;
}

.user-about-header h2 {
  margin: 0;
  color: #f1fcff;
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.user-about-dialog .profile-editor-close {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(120, 240, 255, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  color: #d2f6ff;
  font-size: 25px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.user-about-dialog .profile-editor-close:hover {
  border-color: rgba(120, 240, 255, 0.4);
  background: rgba(0, 220, 255, 0.16);
  transform: rotate(4deg);
}

/* Identitas pengguna menjadi hero profil */
.user-about-identity {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
  padding: clamp(15px, 3vw, 21px);
  border: 1px solid rgba(120, 240, 255, 0.15);
  border-radius: 21px;
  background:
    linear-gradient(
      120deg,
      rgba(0, 220, 255, 0.13),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.user-about-identity > :first-child {
  flex-shrink: 0;
}

.user-about-identity img {
  border-color: rgba(120, 240, 255, 0.6);
}

.user-about-name {
  flex: 1;
  min-width: 0;
}

.user-about-name h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: #f7fdff;
  font-size: clamp(17px, 3vw, 22px);
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.user-about-name p {
  margin: 0;
  color: #a7d9e6;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Bio */
.user-about-bio,
.user-about-facts,
.user-about-history {
  min-width: 0;
  margin-top: 15px;
  padding: clamp(14px, 2.5vw, 19px);
  border: 1px solid rgba(120, 240, 255, 0.11);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.027);
}

.user-about-bio h3,
.user-about-facts h3,
.user-about-history h3 {
  margin: 0;
  color: #d2f6ff;
  font-size: 13px;
  font-weight: 800;
}

.user-about-bio p {
  margin: 10px 0 0;
  color: #dbe7ea;
  font-size: 13px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Informasi akun dalam grid responsif */
.user-about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.user-about-facts > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(120, 240, 255, 0.09);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.user-about-facts > div > span {
  color: #9ab8bf;
  font-size: 11px;
}

.user-about-facts > div > strong {
  color: #e7faff;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Riwayat bio lebih mudah dibaca */
.user-about-history-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.user-about-history-heading > span {
  padding: 5px 9px;
  border: 1px solid rgba(139, 228, 250, 0.17);
  border-radius: 99px;
  background: rgba(0, 220, 255, 0.09);
  color: #bdf8ff;
  font-size: 10px;
  font-weight: 700;
}

.user-about-history-list {
  display: grid;
  gap: 11px;
}

.user-about-history-entry {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(120, 240, 255, 0.1);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.12);
}

.user-about-history-entry time {
  color: #a1ecff;
  font-size: 11px;
  line-height: 1.6;
}

.user-about-history-entry > div {
  min-width: 0;
}

.user-about-history-entry > div > span {
  display: block;
  margin-bottom: 5px;
  color: #92b0b7;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.user-about-history-entry > div > p {
  margin: 0;
  color: #dde9ec;
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.user-about-muted {
  margin: 0;
  color: #9eb4b9;
  font-size: 12px;
  line-height: 1.7;
}

.user-about-dialog .notice.error {
  overflow-wrap: anywhere;
}

/* Action profil sendiri dan aksi profil orang lain konsisten */
.user-about-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.user-about-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 43px;
  padding: 9px;
  border: 1px solid rgba(139, 228, 250, 0.2);
  border-radius: 12px;
  background: rgba(0, 220, 255, 0.075);
  color: #d1f6ff;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  overflow-wrap: anywhere;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.user-about-actions button:hover {
  border-color: rgba(120, 240, 255, 0.42);
  background: rgba(0, 220, 255, 0.16);
  transform: translateY(-1px);
}

.user-about-footnote {
  margin: 15px 2px 0;
  color: #849a9f;
  font-size: 10px;
  line-height: 1.65;
}

/* Form laporkan pengguna, jika fitur laporan sudah dipasang */
.user-about-dialog .user-report-section {
  margin-top: 15px;
}

.user-about-dialog .user-report-form {
  border-color: rgba(139, 228, 250, 0.2);
  background: rgba(0, 220, 255, 0.055);
}

/* Animasi ringan */
@keyframes vex-about-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Layout ponsel */
@media (max-width: 560px) {
  .user-about-overlay {
    align-items: flex-end;
    padding: 8px;
  }

  .user-about-dialog {
    width: 100%;
    max-height: 92dvh;
    padding: 17px 15px calc(17px + env(safe-area-inset-bottom, 0px));
    border-radius: 23px 23px 17px 17px;
  }

  .user-about-header {
    margin-bottom: 15px;
  }

  .user-about-identity {
    gap: 13px;
    padding: 15px;
    border-radius: 17px;
  }

  .user-about-facts {
    gap: 8px;
    padding: 11px;
  }

  .user-about-facts > div {
    padding: 10px;
  }

  .user-about-history-entry {
    padding: 12px;
  }

  .user-about-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .user-about-actions button {
    flex-direction: column;
    min-height: 53px;
    padding: 8px 4px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-about-dialog {
    animation: none;
  }

  .user-about-dialog .profile-editor-close,
  .user-about-actions button {
    transition: none;
  }
}




/* VexApp: #48dff5 glass premium final v2 */

:root {
  --vex-#48dff5: #00dffc;
  --vex-#48dff5-bright: #65eaff;
  --vex-#48dff5-soft: #bdf8ff;
  --vex-#48dff5-deep: #0878e8;
  --vex-#48dff5-rgb: 139, 92, 246;
  --accent: #00dffc;
  --accent-color: #00dffc;
  --primary: #00dffc;
  --primary-color: #00dffc;
  --brand: #00dffc;
  --brand-color: #00dffc;
  --focus-color: #65eaff;
  --success: #00dffc;
  --success-color: #00dffc;
  --online-color: #65eaff;
  color-scheme: dark;
}

/* Latar #48dff5 sangat gelap; tidak memakai hitam pekat sebagai aksen. */
body {
  background:
    radial-gradient(ellipse at 8% 2%, rgba(40, 182, 217, .14), transparent 37%),
    linear-gradient(150deg, #0a191d 0%, #091518 56%, #0b1e23 100%);
  accent-color: #00dffc;
}

/* Kartu profil utama: gradient mengganti nuansa emerald sebelumnya. */
.profile-tab-page.profile-redesign {
  background:
    radial-gradient(ellipse at 10% 5%, rgba(58, 201, 237, .12), transparent 39%),
    radial-gradient(ellipse at 92% 28%, rgba(139, 228, 250, .055), transparent 34%);
}

.profile-hero-card,
.profile-hero,
.profile-redesign .profile-hero-card,
.profile-tab-page.profile-redesign .profile-hero-card {
  background:
    radial-gradient(ellipse at 88% 5%, rgba(139, 228, 250, .19), transparent 42%),
    radial-gradient(ellipse at 5% 30%, rgba(40, 182, 217, .22), transparent 54%),
    linear-gradient(145deg, rgba(24, 59, 68, .96), rgba(14, 30, 34, .97) 58%, rgba(10, 21, 24, .98)) !important;
  border-color: rgba(120, 240, 255, .22) !important;
  box-shadow:
    0 12px 30px rgba(18, 68, 80, .15),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.profile-tab-page.profile-redesign .profile-hero-overline,
.profile-hero-overline,
.profile-hero-card .profile-hero-overline {
  color: #bdf8ff !important;
}

/* Dua action button saja: Ubah Info dan Pengaturan. */
.profile-hero-actions,
.profile-redesign .profile-hero-actions,
.profile-actions,
.profile-main-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.profile-hero-actions button,
.profile-redesign .profile-hero-actions button,
.profile-actions button,
.profile-main-actions button {
  background:
    linear-gradient(140deg, rgba(0, 220, 255, .20), rgba(40, 182, 217, .10)) !important;
  border-color: rgba(120, 240, 255, .22) !important;
  color: #e7faff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  transition: background .16s ease, border-color .16s ease !important;
}

.profile-hero-actions button:hover,
.profile-redesign .profile-hero-actions button:hover,
.profile-actions button:hover,
.profile-main-actions button:hover {
  background: linear-gradient(135deg, rgba(0, 220, 255, .32), rgba(40, 182, 217, .20)) !important;
  border-color: rgba(120, 240, 255, .42) !important;
}

/* Tab Informasi / Riwayat Bio */
.profile-redesign .profile-tabs button.active,
.profile-redesign .profile-detail-tabs button.active,
.profile-redesign .profile-info-tabs button.active,
.profile-redesign .profile-tab-button.active,
.profile-redesign [role="tab"][aria-selected="true"] {
  background: linear-gradient(135deg, rgba(0, 220, 255, .32), rgba(40, 182, 217, .22)) !important;
  color: #ddf8ff !important;
  border-color: rgba(120, 240, 255, .30) !important;
}

/* Dialog Tentang Pengguna dibuat serasi dengan hero profil. */
.user-about-overlay {
  background: rgba(8, 26, 30, .43) !important;
  -webkit-backdrop-filter: blur(9px) saturate(120%) !important;
  backdrop-filter: blur(9px) saturate(120%) !important;
}

.user-about-dialog {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(58, 201, 237, .22), transparent 45%),
    radial-gradient(ellipse at 95% 22%, rgba(139, 228, 250, .08), transparent 38%),
    linear-gradient(145deg, rgba(20, 44, 50, .97), rgba(11, 23, 26, .98) 76%) !important;
  border-color: rgba(120, 240, 255, .22) !important;
  box-shadow:
    0 22px 60px rgba(2, 10, 12, .24),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
}

.user-about-identity,
.user-about-bio,
.user-about-facts,
.user-about-history,
.user-about-history-entry {
  background:
    linear-gradient(135deg, rgba(0, 220, 255, .11), rgba(40, 182, 217, .045)) !important;
  border-color: rgba(120, 240, 255, .15) !important;
}

.user-about-name p,
.user-about-eyebrow,
.user-about-history-entry time,
.user-about-history-heading > span {
  color: #bdf8ff !important;
}

.user-about-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.user-about-actions button {
  background: linear-gradient(135deg, rgba(0, 220, 255, .18), rgba(40, 182, 217, .09)) !important;
  color: #dcf8ff !important;
  border-color: rgba(120, 240, 255, .22) !important;
}

/* Chat: background, header, composer, dan bubble keluar ungu. */
.main-header,
.app-header,
.chat-header,
.conversation-header,
.conversation-profile-header {
  background:
    linear-gradient(135deg, rgba(21, 47, 54, .72), rgba(12, 26, 30, .58)) !important;
  border-color: rgba(120, 240, 255, .15) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
}

.chat-page,
.chat-layout,
.conversation-view,
.conversation-panel,
.chat-main {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(40, 182, 217, .08), transparent 38%),
    linear-gradient(160deg, #0b191d, #091417 66%, #0b1d21) !important;
}

.message-composer {
  background: rgba(48, 112, 128, .075) !important;
  border-color: rgba(120, 240, 255, .15) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
}

.message-composer textarea {
  background: rgba(0, 220, 255, .055) !important;
  border-color: rgba(120, 240, 255, .16) !important;
  color: #effcff !important;
}

.message-composer button,
.composer-send-button,
.send-button {
  background: linear-gradient(135deg, #65eaff, #3ac9ed) !important;
  color: #fff !important;
  border-color: rgba(120, 240, 255, .25) !important;
  box-shadow: 0 4px 14px rgba(40, 182, 217, .18) !important;
}

.message-bubble.own,
.message-bubble.outgoing,
.message.own .message-bubble,
.message.outgoing .message-bubble,
.own-message .message-content,
.outgoing-message .message-content {
  background: linear-gradient(135deg, #00dffc, #0878e8) !important;
  border-color: rgba(120, 240, 255, .20) !important;
  color: #fff !important;
}

.message-bubble:not(.own):not(.outgoing),
.message.incoming .message-bubble,
.incoming-message .message-content {
  background: linear-gradient(135deg, rgba(0, 220, 255, .13), rgba(40, 182, 217, .075)) !important;
  border-color: rgba(120, 240, 255, .13) !important;
}

/* Semua badge status aksen hijau yang tersisa menjadi #48dff5. */
.status-active,
.status-online,
.online-indicator,
.online-dot,
.presence-dot,
.profile-status-dot,
.status-dot,
.e2ee-status,
.e2ee-badge,
.encryption-status,
.verified-badge,
.profile-verified-badge {
  color: #d9f7ff !important;
  border-color: rgba(120, 240, 255, .27) !important;
}

.e2ee-status,
.e2ee-badge,
.encryption-status {
  background: rgba(0, 220, 255, .12) !important;
}

/* Navbar tetap floating. Background bar nyaris transparan;
   active pill terpisah memakai #48dff5 glass. */
.bottom-nav {
  background: rgba(0, 220, 255, .035) !important;
  border: 1px solid rgba(120, 240, 255, .18) !important;
  box-shadow:
    0 7px 22px rgba(32, 90, 105, .07),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
}

.bottom-nav .nav-pill-indicator {
  background:
    linear-gradient(135deg, rgba(139, 228, 250, .29), rgba(40, 182, 217, .22)) !important;
  border: 1px solid rgba(120, 240, 255, .36) !important;
  box-shadow:
    0 3px 12px rgba(40, 182, 217, .09),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
}

.bottom-nav button.active,
.bottom-nav .nav-item.active,
.bottom-nav [aria-current="page"] {
  color: #ddf8ff !important;
}

/* Fokus, tombol utama, dan scrollbar */
button.primary,
.primary-button,
.button-primary,
.btn-primary,
.auth-submit,
.login-button,
.register-button,
.user-report-submit {
  background: linear-gradient(135deg, #72e3ff, #0878e8) !important;
  border-color: rgba(120, 240, 255, .28) !important;
  color: #fff !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #65eaff !important;
  box-shadow: 0 0 0 3px rgba(0, 220, 255, .13) !important;
  outline-color: #65eaff !important;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: #00dffc !important;
}

::selection {
  background: rgba(0, 220, 255, .38);
  color: #fff;
}

@media (max-width: 560px) {
  .profile-hero-actions,
  .profile-redesign .profile-hero-actions,
  .profile-actions,
  .profile-main-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-about-dialog,
  .bottom-nav,
  .bottom-nav .nav-pill-indicator {
    animation: none !important;
    transition: none !important;
  }
}


/* VexApp: adaptive header + report diagnostics v1 */

/* Header tidak menggambar kotak atau garis terpisah. */
.main-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Menu utama memakai latar #48dff5 yang sama dengan area halaman. */
body {
  background-color: #0a191d;
}

/* Composer tetap glass tipis dan selaras dengan #48dff5. */
.message-composer {
  background: rgba(43, 94, 107, 0.055) !important;
  border-color: rgba(120, 240, 255, 0.13) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

/* Reduced blur pada ponsel untuk menjaga performa. */
@media (max-width: 600px) {
  .message-composer {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-header,
  .message-composer {
    transition: none !important;
  }
}

/* VexApp: lightweight iOS spring pill v1 */

/* Container navbar transparan; glass tipis, bukan bidang hitam solid. */
.bottom-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(7px) saturate(125%) !important;
  backdrop-filter: blur(7px) saturate(125%) !important;
  isolation: isolate;
}

/* Posisi pill tetap dikendalikan oleh translateX dari React.
   Properti scale terpisah agar tidak mengganggu posisi indikator. */
.bottom-nav .nav-pill-indicator {
  scale: 1 1;
  transform-origin: center;
  transition:
    scale 460ms cubic-bezier(.22, 1.55, .36, 1),
    background 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease !important;
  will-change: scale;
}

/* Ketika jari menahan atau menyeret pill, pill membesar. */
.bottom-nav.nav-dragging .nav-pill-indicator,
.bottom-nav:has(.nav-item:active) .nav-pill-indicator {
  scale: 1.12 1.18;
  background:
    linear-gradient(
      135deg,
      rgba(180, 239, 254, .34),
      rgba(0, 220, 255, .27) 56%,
      rgba(40, 182, 217, .20)
    ) !important;
  border-color: rgba(194, 243, 255, .46) !important;
  box-shadow:
    0 0 15px rgba(0, 220, 255, .13),
    inset 0 1px 0 rgba(255, 255, 255, .09) !important;
  transition-duration: 130ms !important;
  transition-timing-function: ease-out !important;
}

/* Saat dilepas: mengecil, sedikit overshoot, lalu stabil. */
@keyframes vex-pill-spring-return {
  0%   { scale: 1.12 1.18; }
  48%  { scale: .94 .91; }
  70%  { scale: 1.045 1.055; }
  86%  { scale: .985 .985; }
  100% { scale: 1 1; }
}

.bottom-nav:not(.nav-dragging):not(:has(.nav-item:active))
  .nav-pill-indicator {
  animation: vex-pill-spring-return 440ms both;
}

/* Icon mengikuti interaksi dengan efek yang lebih halus. */
.bottom-nav .nav-item {
  transition:
    color 160ms ease,
    opacity 160ms ease !important;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav .nav-item.nav-active {
  color: #d9fbff !important;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav .nav-pill-indicator,
  .bottom-nav:not(.nav-dragging):not(:has(.nav-item:active))
    .nav-pill-indicator {
    animation: none !important;
    transition: none !important;
    scale: 1 1 !important;
  }
}

/* VexApp: Liquid Glass Spring v2 */

/* Navbar mengambang, tanpa panel gelap solid. */
.bottom-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(5px) saturate(145%) !important;
  backdrop-filter: blur(5px) saturate(145%) !important;
}

/* Material kaca pada pill aktif.
   Transform tetap dipakai React untuk posisi; transition ditambahkan
   agar perpindahan transform tidak terasa patah-patah. */
.bottom-nav .nav-pill-indicator {
  border-radius: 999px !important;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at 22% 0%,
      rgba(255,255,255,.31),
      transparent 57%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.17),
      rgba(180, 239, 254, .14) 38%,
      rgba(0, 220, 255,.19) 72%,
      rgba(255,255,255,.07)
    ) !important;

  border: 1px solid rgba(255,255,255,.27) !important;

  -webkit-backdrop-filter:
    blur(18px) saturate(185%) contrast(1.07) !important;
  backdrop-filter:
    blur(18px) saturate(185%) contrast(1.07) !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.37),
    inset 0 -1px 1px rgba(80, 176, 200, .13),
    0 5px 17px rgba(15, 55, 65, .18),
    0 0 11px rgba(132, 228, 252, .09) !important;

  transform-origin: center;
  scale: 1 1;

  transition:
    transform 560ms cubic-bezier(.20,.82,.25,1.15),
    scale 460ms cubic-bezier(.22,1.45,.36,1),
    background 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease !important;

  will-change: transform, scale;
}

/* Pantulan permukaan kaca. */
.bottom-nav .nav-pill-indicator::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 20% -15%,
      rgba(255,255,255,.38),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.16),
      transparent 43%,
      rgba(130, 230, 255, .045)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32);
  opacity: .9;
}

/* Garis kilau yang bergerak melintasi kaca. */
.bottom-nav .nav-pill-indicator::after {
  content: "";
  position: absolute;
  top: -55%;
  left: -80%;
  width: 54%;
  height: 210%;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,.04) 23%,
    rgba(255,255,255,.48) 47%,
    rgba(205, 245, 255, .20) 57%,
    transparent 80%
  );

  opacity: 0;
  transform: translateX(-120%) rotate(12deg);
}

/* Ditekan atau diseret: kaca bereaksi seperti material elastis. */
.bottom-nav.nav-dragging .nav-pill-indicator,
.bottom-nav:has(.nav-item:active) .nav-pill-indicator {
  scale: 1.09 1.15;

  background:
    radial-gradient(
      ellipse at 24% 0%,
      rgba(255,255,255,.43),
      transparent 57%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.23),
      rgba(180, 239, 254, .27) 42%,
      rgba(0, 220, 255,.29) 76%,
      rgba(255,255,255,.12)
    ) !important;

  border-color: rgba(255,255,255,.43) !important;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.46),
    inset 0 -1px 2px rgba(100, 212, 240, .18),
    0 7px 23px rgba(20, 68, 80, .22),
    0 0 18px rgba(132, 228, 252, .20) !important;

  transition:
    transform 300ms cubic-bezier(.18,.78,.25,1.08),
    scale 125ms cubic-bezier(.2,.8,.25,1),
    background 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease !important;
}

.bottom-nav.nav-dragging .nav-pill-indicator::after,
.bottom-nav:has(.nav-item:active) .nav-pill-indicator::after {
  animation: vex-liquid-glass-sheen 680ms ease-out both;
}

@keyframes vex-liquid-glass-sheen {
  0% {
    opacity: 0;
    transform: translateX(-120%) rotate(12deg);
  }
  20% { opacity: .8; }
  72% { opacity: .5; }
  100% {
    opacity: 0;
    transform: translateX(350%) rotate(12deg);
  }
}

/* Pantulan spring ketika jari dilepas. */
@keyframes vex-liquid-spring-release {
  0%   { scale: 1.09 1.15; }
  36%  { scale: .965 .94; }
  62%  { scale: 1.035 1.045; }
  82%  { scale: .99 .99; }
  100% { scale: 1 1; }
}

.bottom-nav:not(.nav-dragging):not(:has(.nav-item:active))
.nav-pill-indicator {
  animation: vex-liquid-spring-release 520ms both !important;
}

.bottom-nav .nav-item {
  -webkit-tap-highlight-color: transparent;
  transition:
    color 190ms ease,
    opacity 190ms ease !important;
}

.bottom-nav .nav-item.nav-active {
  color: #eafbff !important;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav .nav-pill-indicator,
  .bottom-nav:not(.nav-dragging):not(:has(.nav-item:active))
  .nav-pill-indicator {
    animation: none !important;
    transition: none !important;
    scale: 1 1 !important;
  }

  .bottom-nav .nav-pill-indicator::after {
    animation: none !important;
  }
}

/* VexApp: Status Liquid Glass polish v1 */
.status-feature {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.status-feature .status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(180, 239, 254, .14);
  border-radius: 24px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.055),
    rgba(0, 220, 255,.075)
  );
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.status-feature .status-heading h2 {
  margin: 5px 0;
  letter-spacing: -.035em;
}

.status-feature .status-heading p {
  margin: 0;
  line-height: 1.55;
  opacity: .72;
}

.status-feature .status-refresh {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  color: inherit;
  background: rgba(255,255,255,.055);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              background 180ms ease;
}

.status-feature .status-refresh:active {
  transform: scale(.91) rotate(-24deg);
  background: rgba(132, 228, 252, .17);
}

.status-feature .status-publish {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(180, 239, 254, .15);
  border-radius: 23px;
  background: linear-gradient(
    150deg,
    rgba(255,255,255,.045),
    rgba(0, 220, 255,.065)
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.status-feature .status-own-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: #eafbff;
  font-weight: 750;
  background: linear-gradient(
    145deg,
    rgba(180, 239, 254, .27),
    rgba(40, 182, 217, .25)
  );
  border: 1px solid rgba(255,255,255,.19);
}

.status-feature .status-publish-content {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.status-feature .status-publish-content strong {
  font-size: .96rem;
  letter-spacing: -.015em;
}

.status-feature .status-publish-content small {
  opacity: .68;
}

.status-feature .status-file-label {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(180, 239, 254, .17);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  transition: background 180ms ease, border-color 180ms ease;
}

.status-feature .status-file-label:focus-within {
  border-color: rgba(180, 239, 254, .5);
  background: rgba(0, 220, 255,.09);
}

.status-feature button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.status-feature :is(input, select, textarea) {
  max-width: 100%;
}

.status-feature :is(button, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 420px) {
  .status-feature .status-heading,
  .status-feature .status-publish {
    padding: 13px;
    border-radius: 20px;
  }
}


/* VexApp: chat inline error glass v1 */
.message-inline-error {
  margin: 0 12px 8px;
  padding: 11px 14px;
  border: 1px solid rgba(248, 113, 113, .28);
  border-radius: 15px;
  color: #fecaca;
  background: rgba(127, 29, 29, .20);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: .88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  animation: vex-message-error-in 200ms ease-out both;
}

.message-composer .send-button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

@keyframes vex-message-error-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .message-inline-error {
    animation: none;
  }
}


/* VexApp UI-2.3C: WhatsApp-style chat selection */
.messenger .list-pane .pane-heading {
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid #26343b;
  background: #111b21;
}

.messenger .list-pane .pane-heading h1 {
  color: #e9edef;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.messenger .list-pane .search-box {
  margin: 12px 10px;
  border: 0;
  border-radius: 10px;
  background: #202c33;
}

.messenger .list-pane .search-box input {
  color: #e9edef;
}

.messenger .list-pane .search-box input::placeholder {
  color: #8696a0;
}

.messenger .list-pane .person-row {
  position: relative;
  min-height: 73px;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #202c33;
  border-radius: 0;
  background: #111b21;
  color: #e9edef;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.messenger .list-pane .person-row:hover,
.messenger .list-pane .person-row.row-selected {
  border-color: #26343b;
  background: #202c33;
}

.messenger .list-pane .person-row.row-selected {
  box-shadow: inset 3px 0 #00a884;
}

.messenger .list-pane .avatar {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border: 0;
  background: #254b43;
  color: #d1f4e9;
}

.messenger .list-pane .row-text {
  gap: 5px;
}

.messenger .list-pane .row-text strong {
  font-size: 14px;
  font-weight: 600;
  color: #e9edef;
}

.messenger .list-pane .row-text small {
  color: #aebac1;
  font-size: 12px;
}

.vex-chat-filters {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 10px 10px;
  scrollbar-width: none;
}

.vex-chat-filters::-webkit-scrollbar {
  display: none;
}

.vex-filter-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #37454d;
  border-radius: 18px;
  background: #202c33;
  color: #c4cdd2;
  font-size: 12px;
  cursor: pointer;
}

.vex-filter-chip.active {
  border-color: #005c4b;
  background: #005c4b;
  color: #e9edef;
}

.vex-selection-toolbar {
  position: relative;
  z-index: 20;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 8px 8px;
  border-bottom: 1px solid #26343b;
  background: #202c33;
  color: #e9edef;
}

.vex-selection-toolbar > strong {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.vex-selection-button {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #d1d7db;
  font-size: 21px;
  cursor: pointer;
}

.vex-selection-button:hover {
  background: #37454d;
}

.vex-selection-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 8px;
  z-index: 50;
  width: min(250px, calc(100vw - 36px));
  padding: 6px;
  border: 1px solid #37454d;
  border-radius: 12px;
  background: #233039;
  box-shadow: 0 12px 30px rgb(0 0 0 / 35%);
}

.vex-selection-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e9edef;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.vex-selection-menu button:hover {
  background: #37454d;
}

.vex-selection-menu button span {
  width: 20px;
  color: #aebac1;
  text-align: center;
}

.vex-row-state {
  flex: 0 0 auto;
  color: #aebac1;
  font-size: 13px;
}

.vex-row-blocked {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 8px;
  background: #3b2828;
  color: #ffb4ab;
  font-size: 10px;
}

@media (max-width: 600px) {
  .vex-selection-toolbar {
    gap: 2px;
    padding-inline: 4px;
  }

  .vex-selection-button {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
}


/* VexApp UI-2.4: refined selection mode */
.messenger .list-pane .vex-selection-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid rgba(139, 228, 250, .25);
  border-radius: 14px;
  background: linear-gradient(130deg,rgba(30,35,56,.98),rgba(18,27,39,.98));
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.messenger .list-pane .vex-selection-toolbar > strong {
  flex: 1;
  min-width: 0;
  color: #effcff;
  font-size: 14px;
}

.messenger .list-pane .vex-selection-toolbar .vex-selection-button {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(120, 240, 255,.13);
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  color: #e8faff;
  transition: background .15s ease,transform .15s ease;
}

.messenger .list-pane .vex-selection-toolbar .vex-selection-button:hover,
.messenger .list-pane .vex-selection-toolbar .vex-selection-button:focus-visible {
  background: rgba(0, 220, 255,.22);
  outline: 2px solid rgba(139, 228, 250, .4);
  outline-offset: 1px;
}

.messenger .list-pane .vex-selection-toolbar .vex-selection-button:active {
  transform: scale(.94);
}

.messenger .list-pane .person-row.row-selected {
  border-color: rgba(139, 228, 250, .38);
  background: linear-gradient(100deg,rgba(86, 193, 220, .2),rgba(32,44,51,.97));
  box-shadow: inset 3px 0 #65eaff;
}

.messenger .list-pane .vex-selection-menu {
  border: 1px solid rgba(139, 228, 250, .25);
  border-radius: 14px;
  background: rgba(25,30,47,.98);
  box-shadow: 0 18px 42px rgba(0,0,0,.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.messenger .list-pane .vex-selection-menu button {
  border-radius: 9px;
  color: #eafbff;
}

.messenger .list-pane .vex-selection-menu button:hover,
.messenger .list-pane .vex-selection-menu button:focus-visible {
  background: rgba(0, 220, 255,.18);
  outline: none;
}

@media (max-width: 420px) {
  .messenger .list-pane .vex-selection-toolbar {
    gap: 4px;
    padding: 8px 5px;
  }
  .messenger .list-pane .vex-selection-toolbar .vex-selection-button {
    flex-basis: 31px;
    width: 31px;
    height: 33px;
    border-radius: 9px;
  }
}

/* VexApp Status Updates WA-style v1 */
.status-updates-wa { width:100%; min-width:0; gap:18px; }
.status-updates-wa .status-updates-heading { display:flex; align-items:center; justify-content:space-between; padding:2px 4px 6px; border:0; background:transparent; }
.status-updates-wa .status-updates-heading h2 { margin:0; font-size:clamp(26px,5vw,34px); font-weight:750; letter-spacing:-.7px; }
.status-updates-wa .status-refresh { display:grid; place-items:center; width:39px; height:39px; border:1px solid var(--border-color,rgba(255,255,255,.1)); border-radius:50%; background:var(--surface-2,rgba(255,255,255,.04)); color:inherit; font-size:24px; }
.status-section-title { display:flex; align-items:center; justify-content:space-between; padding:0 4px; }
.status-section-title h3 { margin:0; font-size:16px; font-weight:700; }
.status-stories-strip { display:flex; align-items:flex-start; gap:13px; width:100%; padding:4px 2px 12px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.status-stories-strip > * { position:relative; flex:0 0 132px; width:132px; min-width:0; }
.status-story,.status-own-story { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:9px; height:210px; min-height:210px; padding:0; border:0; border-radius:17px; background:transparent; color:inherit; text-align:left; overflow:hidden; }
.status-story-cover { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:linear-gradient(145deg,#283449,#101722); }
.status-story-cover::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 32%,rgba(0,0,0,.7)); pointer-events:none; }
.status-story-cover img { width:100%; height:100%; object-fit:cover; }
.status-story-label { position:absolute; right:9px; bottom:10px; left:9px; z-index:2; display:-webkit-box; overflow:hidden; color:white; font-size:12px; font-weight:700; line-height:1.3; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; text-shadow:0 1px 5px rgba(0,0,0,.6); }
.status-story-text-preview { display:-webkit-box; max-width:100%; padding:16px 12px 35px; overflow:hidden; color:#fff; font-size:15px; font-weight:650; line-height:1.4; text-align:center; overflow-wrap:anywhere; -webkit-line-clamp:7; -webkit-box-orient:vertical; }
.status-story-placeholder { z-index:1; display:grid; place-items:center; width:100%; height:100%; color:#f0fcff; font-size:14px; font-weight:700; background:linear-gradient(145deg,#316b7a,#121b30); }
.status-story-avatar-ring { position:absolute; z-index:2; top:9px; left:9px; display:grid; place-items:center; width:39px; height:39px; padding:3px; border:2px solid #00dffc; border-radius:50%; background:#121722; }
.status-story-avatar-ring.viewed { border-color:#7a8498; }
.status-story-avatar,.status-own-avatar { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:linear-gradient(140deg,#00dffc,#2865bc); color:white; font-size:15px; font-weight:800; }
.status-own-story { overflow:visible; }
.status-own-story .status-story { width:100%; height:100%; }
.status-story-own .status-story-cover { background:linear-gradient(145deg,#283a55,#111826); }
.status-story-own .status-own-avatar { width:58px; height:58px; font-size:24px; }
.status-add-bubble { position:absolute; z-index:4; top:32px; left:31px; display:grid; place-items:center; width:27px; height:27px; border:3px solid var(--app-bg,#101722); border-radius:50%; background:#00dffc; color:#092311; font-size:22px; font-weight:800; line-height:1; }
.status-empty-wa { padding:24px 18px; border:1px dashed rgba(151,165,190,.28); border-radius:18px; text-align:center; }
.status-empty-wa strong { font-size:16px; }
.status-empty-wa p { margin:7px 0 0; color:var(--text-muted,#98a2b3); font-size:13px; }
.status-composer-backdrop { position:fixed; z-index:2000; inset:0; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.72); backdrop-filter:blur(9px); }
.status-composer-modal { display:flex; flex-direction:column; gap:16px; width:min(100%,480px); max-height:min(86dvh,760px); padding:20px; overflow:auto; border:1px solid rgba(139, 228, 250, .24); border-radius:23px; background:#151b28; color:#f0fcff; box-shadow:0 24px 80px rgba(0,0,0,.5); }
.status-composer-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.status-composer-header h3 { margin:4px 0 0; font-size:22px; }
.status-composer-close,.status-viewer-close { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:inherit; font-size:25px; }
.status-mode-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:5px; border-radius:13px; background:#0d1320; }
.status-mode-tabs button { padding:10px; border:0; border-radius:9px; background:transparent; color:#b9c0d0; font:inherit; font-size:13px; font-weight:700; }
.status-mode-tabs button.active { background:#0878e8; color:#fff; }
.status-file-picker { display:flex; align-items:center; gap:12px; padding:14px; border:1px dashed rgba(146, 217, 235, .45); border-radius:15px; background:rgba(92, 196, 222, .08); }
.status-file-picker-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:rgba(0, 220, 255,.2); font-size:22px; }
.status-file-picker > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:4px; overflow:hidden; }
.status-file-picker strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.status-file-picker small,.status-composer-footer small { color:#a5aec0; font-size:11px; }
.status-file-picker input { width:92px; max-width:35%; font-size:11px; }

/* VexApp Updates: fullscreen viewer */
.status-updates-wa { color:#e9edef; }
.status-stories-strip { scrollbar-width:none; }
.status-stories-strip::-webkit-scrollbar { display:none; }
.status-story-avatar-ring { border-color:#00dffc; }
.status-mode-tabs button.active { background:#0878e8; color:#fff; }
.status-composer-backdrop { z-index:3000; }
.status-viewer-backdrop {
  position:fixed; inset:0; z-index:3100; display:grid; place-items:center;
  background:#000; color:#fff; overscroll-behavior:contain;
}
.status-viewer {
  position:relative; display:flex; flex-direction:column; width:100%;
  height:100dvh; max-height:100dvh; overflow:hidden;
  background:#0b141a; color:#f5f5f5;
}
.status-viewer-header {
  position:relative; z-index:3; display:flex; flex-direction:column;
  gap:10px; padding:12px;
  background:linear-gradient(#000a,transparent);
}
.status-viewer-header > div { display:flex; align-items:center; gap:10px; }
.status-viewer-header img,.status-viewer-header .status-author-avatar {
  width:38px; height:38px; flex:0 0 38px; border-radius:50%; object-fit:cover;
}
.status-viewer-header strong { font-size:14px; }
.status-viewer-header small { display:block; margin-top:3px; color:#bac5ca; font-size:11px; }
.status-viewer-close {
  margin-left:auto; width:38px; height:38px; border:0;
  border-radius:50%; background:#ffffff1c; color:#fff; font-size:24px;
}
.status-viewer-progress,.status-viewer-progress-bars,
[class*="status-viewer-progress"] { display:flex; gap:4px; width:100%; }
.status-viewer-progress > *, .status-viewer-progress-bars > *,
[class*="status-viewer-progress"] > * {
  flex:1; min-width:0; height:3px; border-radius:9px;
  background:#ffffff55; overflow:hidden;
}
.status-viewer-progress .done,.status-viewer-progress .active,
.status-viewer-progress-bars .done,.status-viewer-progress-bars .active { background:#fff; }
.status-viewer-content {
  position:relative; flex:1; min-height:0; display:flex;
  align-items:center; justify-content:center; overflow:hidden;
}
.status-viewer-content img,.status-viewer-content video {
  display:block; width:100%; height:100%; max-height:100%;
  object-fit:contain; background:#000;
}
.status-viewer-text-mode .status-viewer-content {
  padding:35px 24px;
  background:radial-gradient(ellipse at top,#164e42,#102c2a 45%,#0b141a);
}
.status-viewer-text {
  max-width:600px; max-height:100%; overflow:auto; margin:0;
  color:#fff; font-size:clamp(25px,6vw,36px); font-weight:650;
  line-height:1.35; text-align:center; white-space:pre-wrap; overflow-wrap:anywhere;
}
.status-viewer-caption {
  position:absolute; right:12px; bottom:20px; left:12px; margin:0;
  padding:12px 14px; border-radius:13px; background:#0008;
  color:#fff; font-size:14px; line-height:1.45;
}
.status-viewer-nav {
  position:absolute; z-index:4; top:20%; bottom:20%; width:23%;
  border:0; background:transparent; color:transparent;
}
.status-viewer-nav.previous { left:0; }
.status-viewer-nav.next { right:0; }
.status-viewer-nav:disabled { pointer-events:none; }
.status-viewer-footer {
  position:relative; z-index:3; display:flex; justify-content:space-between;
  gap:12px; padding:12px 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,#0008); color:#d6e0e4; font-size:12px;
}
.status-viewer-text-mode .status-viewer-footer { background:transparent; }
.status-story-cover { background:#15252b; }
.status-story-placeholder { background:linear-gradient(145deg,#0878e8,#101a20); }
.status-story-avatar,.status-own-avatar { background:linear-gradient(145deg,#00dffc,#0878e8); }
.status-add-bubble { background:#00dffc; color:#062d19; }
.status-feature .status-refresh:focus-visible,
.status-feature button:focus-visible { outline:2px solid #00dffc; outline-offset:3px; }
.status-composer-modal { background:#101a20; border-color:#ffffff1c; }
.status-file-picker { background:#132820; border-color:#236748; }
@media (min-width:600px) {
  .status-viewer-backdrop { padding:18px; }
  .status-viewer {
    width:min(100%,480px); height:min(94dvh,900px);
    border:1px solid #ffffff24; border-radius:18px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .status-viewer *, .status-composer-modal * { animation:none !important; transition:none !important; }
}

/* VexApp Updates Liquid Glass v1 */
.status-feature .status-refresh,
.status-feature .status-composer-close,
.status-feature .status-viewer-back,
.status-feature .status-viewer-close,
.status-feature .status-viewer-delete,
.status-feature .status-delete,
.status-feature .status-viewer-nav,
.status-feature .status-mode-tabs button,
.status-feature .status-file-picker,
.status-feature .status-composer-modal button {
  -webkit-tap-highlight-color: transparent;
}

.status-feature .status-refresh,
.status-feature .status-composer-close,
.status-feature .status-viewer-back,
.status-feature .status-viewer-close,
.status-feature .status-viewer-delete,
.status-feature .status-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.035)),
    rgba(30,35,48,.30);
  color: var(--text-primary, #f5f5f7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 5px 16px rgba(0,0,0,.13);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  transition:
    transform .16s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.status-feature .status-refresh {
  width: 43px;
  min-width: 43px;
  min-height: 43px;
  padding: 0;
  border-radius: 50%;
  font-size: 23px;
}

.status-feature .status-composer-close,
.status-feature .status-viewer-close,
.status-feature .status-viewer-back {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
}

.status-feature .status-viewer-delete,
.status-feature .status-delete {
  border-color: rgba(255,110,125,.24);
  background: rgba(255,85,105,.10);
}

.status-feature .status-refresh:hover,
.status-feature .status-composer-close:hover,
.status-feature .status-viewer-back:hover,
.status-feature .status-viewer-close:hover,
.status-feature .status-viewer-delete:hover,
.status-feature .status-delete:hover {
  border-color: rgba(255,255,255,.28);
  background-color: rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 7px 22px rgba(0,0,0,.20);
}

.status-feature .status-refresh:active,
.status-feature .status-composer-close:active,
.status-feature .status-viewer-back:active,
.status-feature .status-viewer-close:active,
.status-feature .status-viewer-delete:active,
.status-feature .status-delete:active,
.status-feature .status-mode-tabs button:active {
  transform: scale(.96);
}

.status-feature .status-mode-tabs {
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(12,18,28,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.status-feature .status-mode-tabs button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(245,247,255,.70);
  transition: background .2s ease, color .2s ease, transform .16s ease;
}

.status-feature .status-mode-tabs button.active {
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(140deg, rgba(255,255,255,.20), rgba(255,255,255,.05)),
    rgba(26,126,93,.52);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    0 4px 12px rgba(0,0,0,.13);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.status-feature .status-composer-modal {
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(
    145deg,
    rgba(30,38,52,.94),
    rgba(12,19,29,.96)
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 25px 80px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
}

.status-feature .status-file-picker {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.status-feature .status-composer-text,
.status-feature .status-publish-content textarea {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: rgba(0,0,0,.19);
  color: #f7f8fc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.status-feature .status-composer-text:focus,
.status-feature .status-publish-content textarea:focus {
  border-color: rgba(111,219,178,.65);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(70,192,145,.12),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.status-feature .status-viewer-backdrop {
  background: rgba(0,0,0,.94);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.status-feature .status-viewer {
  background: #0b141a;
}

.status-feature .status-viewer-header {
  padding-top: max(12px, env(safe-area-inset-top));
}

.status-feature .status-viewer-footer {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.status-feature button:disabled {
  cursor: not-allowed;
  opacity: .48;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .status-feature button {
    transition: none !important;
  }
}

@supports not ((backdrop-filter: blur(1px))) {
  .status-feature .status-refresh,
  .status-feature .status-composer-close,
  .status-feature .status-viewer-back,
  .status-feature .status-viewer-close,
  .status-feature .status-viewer-delete,
  .status-feature .status-delete {
    background: rgba(36,43,57,.96);
  }
}


/* VexApp True Fullscreen Viewer v3 */
.status-viewer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05080c !important;
  box-sizing: border-box !important;
  isolation: isolate;
}
.status-viewer-backdrop,
.status-viewer-backdrop * {
  box-sizing: border-box;
}
.status-viewer-backdrop > .status-viewer {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05080c !important;
}
.status-viewer-backdrop .status-viewer-progress {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: max(7px,env(safe-area-inset-top)) 10px 7px;
}
.status-viewer-backdrop .status-viewer-progress-segment {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,.25);
}
.status-viewer-backdrop .status-viewer-progress-segment.done,
.status-viewer-backdrop .status-viewer-progress-segment.active {
  background: rgba(255,255,255,.95);
}
.status-viewer-backdrop .status-viewer-header {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(15,21,29,.82);
  color: #fff;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
.status-viewer-backdrop .status-viewer-avatar {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 50%;
  background: linear-gradient(145deg,#28ce87,#0878e8);
  color: white;
  font-size: 16px;
  font-weight: 750;
}
.status-viewer-backdrop .status-viewer-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.status-viewer-backdrop .status-viewer-author {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}
.status-viewer-backdrop .status-viewer-author strong {
  overflow: hidden;
  color: white;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-viewer-backdrop .status-viewer-author small,
.status-viewer-backdrop .status-viewer-author time {
  display: block;
  overflow: hidden;
  color: rgba(237,243,248,.66);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-viewer-backdrop .status-viewer-back,
.status-viewer-backdrop .status-viewer-close,
.status-viewer-backdrop .status-viewer-delete {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  background: linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.045));
  color: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}
.status-viewer-backdrop .status-viewer-close {
  width: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
}
.status-viewer-backdrop .status-viewer-content {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: black;
}
.status-viewer-backdrop .status-viewer-content img,
.status-viewer-backdrop .status-viewer-content video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.status-viewer-backdrop .status-viewer-text-mode .status-viewer-content {
  padding: 28px 24px;
  background: radial-gradient(ellipse at top,#17483d,#0b141a 78%);
}
.status-viewer-backdrop .status-viewer-text {
  width: 100%;
  color: #fff;
  font-size: clamp(26px,6vw,38px);
  line-height: 1.4;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.status-viewer-backdrop .status-viewer-nav {
  position: absolute;
  z-index: 4;
  top: 80px;
  bottom: 70px;
  width: 23%;
  border: 0;
  background: transparent;
}
.status-viewer-backdrop .status-viewer-nav.previous { left: 0; }
.status-viewer-backdrop .status-viewer-nav.next { right: 0; }
.status-viewer-backdrop .status-viewer-footer {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px max(14px,env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(9,13,19,.86);
  color: rgba(245,248,250,.78);
  font-size: 12px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* VexApp WhatsApp Fullscreen Glass v4 */

/* Seluruh viewer mengisi viewport, tanpa padding kartu desktop. */
.status-viewer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  place-items: unset !important;
  background: #000 !important;
  color: #fff !important;
  overscroll-behavior: none !important;
  isolation: isolate;
}

.status-viewer-backdrop > .status-viewer {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  color: #fff !important;
}

/* Media menjadi dasar layar; elemen lain ditumpuk di atasnya. */
.status-viewer-backdrop .status-viewer-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  flex: none !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #000 !important;
}

/* Status foto/video mengisi layar sepenuhnya. Cover dapat memotong
   sebagian tepi gambar, tetapi tidak mengecilkan media menjadi kartu. */
.status-viewer-backdrop .status-viewer-content > img,
.status-viewer-backdrop .status-viewer-content > video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  background: #000 !important;
}

/* Progress bar mengambang di atas media. */
.status-viewer-backdrop .status-viewer-progress {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  width: 100% !important;
  padding:
    max(8px, env(safe-area-inset-top))
    10px 8px !important;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.44),
    rgba(0,0,0,.08),
    transparent
  ) !important;
}

/* HEADER: horizontal seperti WhatsApp, glass transparan dan blur.
   Status tetap terlihat samar di belakang informasi profil. */
.status-viewer-backdrop .status-viewer-header {
  position: absolute !important;
  top: calc(env(safe-area-inset-top) + 23px) !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 31 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 0 !important;
  background: rgba(13,18,25,.34) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  box-shadow: 0 5px 24px rgba(0,0,0,.07) !important;
  color: #fff !important;
}

.status-viewer-backdrop .status-viewer-avatar {
  display: grid !important;
  flex: 0 0 42px !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

.status-viewer-backdrop .status-viewer-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.status-viewer-backdrop .status-viewer-author {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.status-viewer-backdrop .status-viewer-author strong {
  overflow: hidden !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.status-viewer-backdrop .status-viewer-author small,
.status-viewer-backdrop .status-viewer-author time {
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Tombol tetap bisa ditekan di atas efek glass. */
.status-viewer-backdrop .status-viewer-header button {
  position: relative !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
  color: #fff !important;
}

/* Caption dan footer mengambang di bagian bawah. */
.status-viewer-backdrop .status-viewer-caption {
  position: absolute !important;
  right: 12px !important;
  bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  left: 12px !important;
  z-index: 20 !important;
  max-height: 25vh !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 14px !important;
  background: rgba(8,12,17,.38) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  color: #fff !important;
  overflow-wrap: anywhere !important;
}

.status-viewer-backdrop .status-viewer-footer {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 25 !important;
  display: flex !important;
  width: 100% !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0,0,0,.38)
  ) !important;
  color: rgba(255,255,255,.88) !important;
}

/* Status teks tetap memakai latar penuh layar. */
.status-viewer-backdrop .status-viewer-text-mode .status-viewer-content {
  padding: 100px 24px 76px !important;
  background:
    radial-gradient(ellipse at 25% 15%, #286957 0%, transparent 55%),
    linear-gradient(145deg, #16483e, #102c2a 55%, #081713) !important;
}

.status-viewer-backdrop .status-viewer-text {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 600px !important;
  max-height: 100% !important;
  margin: 0 !important;
  color: #fff !important;
  text-align: center !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

/* Area sentuh navigasi tetap berfungsi di atas media. */
.status-viewer-backdrop .status-viewer-nav {
  z-index: 15 !important;
}

@media (prefers-reduced-motion: reduce) {
  .status-viewer-backdrop,
  .status-viewer-backdrop * {
    scroll-behavior: auto !important;
  }
}

/* VexApp User About Liquid Glass v2 */

.user-about-overlay {
  z-index: 1300;
  padding: max(14px, env(safe-area-inset-top))
           14px max(14px, env(safe-area-inset-bottom));
  background: rgba(3, 6, 12, .66);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}

.user-about-dialog {
  position: relative;
  isolation: isolate;
  gap: 16px;
  width: min(100%, 780px);
  max-width: 780px;
  max-height: min(92dvh, 900px);
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(211, 246, 255, .19);
  border-radius: 28px;
  background:
    radial-gradient(
      ellipse at 92% 0%,
      rgba(94, 183, 205, .20),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(25, 39, 42, .97),
      rgba(13, 21, 27, .97) 58%,
      rgba(9, 15, 21, .98)
    );
  box-shadow:
    0 32px 100px rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
  animation: user-about-glass-enter-v2 280ms cubic-bezier(.2,.75,.25,1) both;
}

.user-about-dialog::before {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .48),
    rgba(166, 237, 255, .55),
    transparent
  );
  content: "";
  pointer-events: none;
}

.user-about-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.user-about-header > div {
  min-width: 0;
}

.user-about-header .user-about-eyebrow {
  margin: 0 0 5px;
  color: #afe9f7;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 2px;
}

.user-about-header h2 {
  margin: 0;
  color: #f8feff;
  font-size: clamp(20px, 4vw, 25px);
  font-weight: 820;
  letter-spacing: -.55px;
}

.user-about-header .profile-editor-close {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
  background: rgba(255, 255, 255, .075);
  color: #fff;
  font-size: 25px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11);
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.user-about-header .profile-editor-close:hover {
  transform: rotate(5deg);
  border-color: rgba(190, 242, 255, .48);
  background: rgba(0, 220, 255, .21);
}

.user-about-identity {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 260px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  padding: 23px;
  overflow: hidden;
  border: 1px solid rgba(212, 246, 255, .17);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(129, 217, 239, .32),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 5% 110%,
      rgba(57, 139, 126, .25),
      transparent 55%
    ),
    linear-gradient(145deg, #102a44, #172129 62%, #0b1319);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 12px 34px rgba(0, 0, 0, .17);
}

.user-about-identity::before {
  position: absolute;
  z-index: -1;
  top: -70px;
  right: -45px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  box-shadow:
    0 0 0 20px rgba(255, 255, 255, .025),
    0 0 0 42px rgba(255, 255, 255, .018);
  content: "";
}

.user-about-identity > .avatar,
.user-about-identity .avatar {
  display: inline-flex;
  flex: 0 0 88px;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-bottom: 2px;
  overflow: hidden;
  border: 3px solid rgba(239, 252, 255, .82);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, .30),
    0 0 0 5px rgba(255, 255, 255, .07);
}

.user-about-identity .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-about-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.user-about-name h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(25px, 5.5vw, 35px);
  font-weight: 850;
  letter-spacing: -.8px;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.user-about-name p {
  margin: 0;
  color: #cce3e9;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.user-about-bio {
  padding: 17px 18px;
  border: 1px solid rgba(205, 240, 249, .13);
  border-radius: 19px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.user-about-bio h3 {
  margin: 0 0 9px;
  color: #b4eaf7;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.user-about-bio p {
  margin: 0;
  color: #e7faff;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.user-about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.user-about-facts > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 17px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, .065),
    rgba(255, 255, 255, .025)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.user-about-facts > div > span {
  color: #a9c2c8;
  font-size: 11px;
  font-weight: 650;
}

.user-about-facts > div > strong {
  color: #f3fafc;
  font-size: 13px;
  font-weight: 740;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.user-about-actions {
  gap: 10px;
}

.user-about-actions button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 239, 249, .17);
  border-radius: 17px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, .09),
    rgba(255, 255, 255, .035)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.user-about-actions button:hover {
  transform: translateY(-2px);
  border-color: rgba(190, 242, 255, .38);
  background: linear-gradient(
    145deg,
    rgba(0, 220, 255, .19),
    rgba(255, 255, 255, .055)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 8px 24px rgba(0, 0, 0, .16);
}

.user-about-actions button:active {
  transform: scale(.97);
}

.user-about-footnote {
  margin: 0;
  color: rgba(214, 229, 233, .64);
  font-size: 11px;
  line-height: 1.6;
}

@keyframes user-about-glass-enter-v2 {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 540px) {
  .user-about-overlay {
    align-items: stretch;
    padding: 0;
  }

  .user-about-dialog {
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    min-height: 100dvh;
    padding:
      max(14px, env(safe-area-inset-top))
      13px
      max(16px, env(safe-area-inset-bottom));
    gap: 14px;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
  }

  .user-about-identity {
    min-height: 235px;
    padding: 19px;
    border-radius: 21px;
  }

  .user-about-identity > .avatar,
  .user-about-identity .avatar {
    flex-basis: 78px;
    width: 78px;
    height: 78px;
  }

  .user-about-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .user-about-facts > div {
    padding: 13px 14px;
  }

  .user-about-actions {
    gap: 8px;
  }

  .user-about-actions button {
    min-height: 66px;
    padding: 10px 5px;
    border-radius: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-about-dialog,
  .user-about-dialog *,
  .user-about-header .profile-editor-close,
  .user-about-actions button {
    animation: none !important;
    transition: none !important;
  }
}

/* VexApp & VexPanel Cyan Blue Theme v1 */
:root {
  color-scheme: dark;
  --vex-#48dff5: #00dffc;
  --vex-#48dff5-bright: #65eaff;
  --vex-#48dff5-soft: #bdf8ff;
  --vex-#48dff5-deep: #0878e8;
  --vex-#48dff5-rgb: 0, 220, 255;
  --accent-color: #00dffc;
  --accent: #00dffc;
  --primary: #168bff;
  --primary-color: #168bff;
  --focus-color: #65eaff;
  --brand: #00dffc;
  --brand-color: #00dffc;
  --accent-bg: rgba(0, 220, 255, .12);
  --accent-border: rgba(0, 220, 255, .38);
  --success: #34d399;
  --success-color: #34d399;
  --profile-accent: #00dffc;
}

.messenger-shell,
.profile-redesign,
.status-feature {
  --vex-#48dff5: #00dffc;
  --vex-#48dff5-bright: #65eaff;
  --vex-#48dff5-soft: #bdf8ff;
  --vex-#48dff5-deep: #0878e8;
  --vex-#48dff5-rgb: 0, 220, 255;
  --accent: #00dffc;
  --accent-color: #00dffc;
  --primary: #168bff;
  --primary-color: #168bff;
  --focus-color: #65eaff;
}

.profile-redesign {
  --profile-accent: #00dffc;
  --profile-bg: #071523;
  --profile-panel: #0c1d2d;
  --profile-muted: #9ab9cb;
}

.primary,
.profile-save,
.status-publish-button {
  border-color: rgba(0, 220, 255, .48) !important;
  background: linear-gradient(125deg, #00dffc, #168bff) !important;
  color: #03111d !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 5px 22px rgba(0,180,255,.18) !important;
}

.primary:hover:not(:disabled),
.profile-save:hover:not(:disabled),
.status-publish-button:hover:not(:disabled) {
  filter: brightness(1.09) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 8px 26px rgba(0,200,255,.27) !important;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline-color: #65eaff !important;
  outline-offset: 3px;
}

.profile-hero {
  border-color: rgba(0,220,255,.24);
  background:
    radial-gradient(ellipse at 85% 8%, rgba(0,220,255,.23), transparent 48%),
    radial-gradient(ellipse at 4% 100%, rgba(22,139,255,.16), transparent 55%),
    linear-gradient(145deg, #102a44, #0b1d2d 64%, #071523);
  box-shadow:
    0 18px 48px rgba(0,0,0,.26),
    0 0 0 1px rgba(0,220,255,.045),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.profile-hero-shade {
  background:
    linear-gradient(180deg,
      rgba(4,11,14,.10) 0%,
      rgba(4,11,14,.17) 30%,
      rgba(4,11,14,.72) 68%,
      rgba(5,14,23,.96) 100%),
    linear-gradient(110deg, rgba(0,130,220,.15), transparent 68%);
}

.profile-hero-brand,
.profile-hero-account-tag,
.profile-hero-avatar-hint {
  border-color: rgba(0,220,255,.24);
  background: rgba(5,25,40,.46);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}

.profile-hero-brand-mark,
.profile-hero-overline,
.profile-info-eyebrow,
.profile-info-heading-icon {
  color: #65eaff !important;
}

.profile-hero-account-tag,
.profile-hero-username {
  color: #bdf8ff !important;
}

.profile-hero-avatar {
  border-color: rgba(101,234,255,.88);
  box-shadow:
    0 8px 28px rgba(0,0,0,.32),
    0 0 0 5px rgba(0,220,255,.12),
    0 0 28px rgba(0,180,255,.12);
}

.profile-hero-actions button,
.profile-own-actions button,
.profile-detail-tab,
.user-about-actions button {
  border-color: rgba(0,220,255,.18);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.profile-hero-actions button:hover,
.profile-own-actions button:hover,
.user-about-actions button:hover {
  border-color: rgba(0,220,255,.42);
  background-color: rgba(0,180,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 24px rgba(0,150,255,.12);
}

.profile-detail-tab.active {
  border-color: rgba(0,220,255,.38);
  background: linear-gradient(120deg, rgba(0,220,255,.18), rgba(22,139,255,.14));
  color: #bdf8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
}

.profile-info-card,
.profile-info-row {
  border-color: rgba(0,220,255,.12);
}

.user-about-overlay {
  background: rgba(3,8,14,.70);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

.user-about-dialog {
  border-color: rgba(0,220,255,.2);
  box-shadow:
    0 32px 100px rgba(0,0,0,.48),
    0 0 34px rgba(0,150,255,.045),
    inset 0 1px 0 rgba(255,255,255,.11);
}

.user-about-identity {
  border-color: rgba(0,220,255,.23);
  background:
    radial-gradient(circle at 88% 14%, rgba(0,220,255,.27), transparent 45%),
    radial-gradient(ellipse at 5% 110%, rgba(22,139,255,.20), transparent 55%),
    linear-gradient(145deg,#102a44,#10202f 62%,#071523);
}

.user-about-bio,
.user-about-facts > div {
  border-color: rgba(0,220,255,.14);
}

.user-about-bio h3,
.user-about-header .user-about-eyebrow {
  color: #65eaff;
}

.user-about-header .profile-editor-close:hover {
  border-color: rgba(0,220,255,.42);
  background: rgba(0,180,255,.16);
}

.status-feature .status-mode-tabs button.active {
  background: linear-gradient(120deg, #00dffc, #168bff);
  color: #03111d;
}

.status-feature .status-add-bubble,
.status-feature .status-own-avatar {
  background: linear-gradient(145deg, #65eaff, #168bff);
  color: #03111d;
}

.status-feature .status-story-ring {
  border-color: #00dffc;
}

.status-feature .status-viewer-backdrop {
  accent-color: #00dffc;
}

.status-feature .status-file-picker {
  border-color: rgba(0,220,255,.34);
  background: rgba(0,160,255,.07);
}

@media (prefers-reduced-motion: no-preference) {
  .primary,
  .profile-save,
  .status-publish-button,
  .profile-hero-actions button,
  .user-about-actions button {
    transition:
      transform 180ms ease,
      filter 180ms ease,
      box-shadow 220ms ease,
      border-color 180ms ease;
  }
}


/* VexApp Message Selection Actions v1 */
.message-selection-toolbar {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid rgba(0,220,255,.20);
  border-radius: 16px;
  background: linear-gradient(130deg,rgba(8,28,45,.96),rgba(7,18,30,.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 25px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.message-selection-toolbar strong {
  flex: 0 0 auto;
  margin: 0 5px;
  color: #bdf8ff;
  font-size: 12px;
}

.message-selection-toolbar button {
  flex: 0 0 auto;
  min-height: 35px;
  padding: 7px 10px;
  border: 1px solid rgba(0,220,255,.18);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  color: #e8faff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.message-selection-toolbar button:active {
  transform: scale(.96);
}

.message-selection-toolbar button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.message-selection-toolbar .message-action-close {
  width: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
}

.message-selection-toolbar .message-action-danger {
  border-color: rgba(255,130,150,.3);
  color: #c3f3ff;
}

.message-line-selected {
  position: relative;
  z-index: 1;
}

.bubble-message.message-selectable {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.bubble-message.message-selected {
  outline: 2px solid rgba(0,220,255,.88);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0,220,255,.10), 0 0 24px rgba(0,180,255,.12);
}

.message-selection-check {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 5;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 2px solid #071523;
  border-radius: 50%;
  background: linear-gradient(135deg,#65eaff,#168bff);
  color: #03111d;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
}

.message-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.message-bubble-flags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  color: #65eaff;
  font-size: 11px;
}

.message-receipt-mark {
  color: inherit;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: -2px;
}

.message-receipt-mark.read {
  color: #00dffc;
}

.message-info-overlay {
  position: fixed;
  z-index: 15000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background: rgba(2,8,15,.72);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  animation: message-info-fade-in .18s ease-out both;
}

.message-info-dialog {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: min(100%,480px);
  max-height: 88dvh;
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(0,220,255,.23);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 100% 0%,rgba(0,220,255,.13),transparent 45%),
    linear-gradient(145deg,rgba(14,35,53,.97),rgba(6,17,29,.98));
  color: #e8faff;
  box-shadow: 0 26px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.11);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
}

.message-info-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,220,255,.14);
}

.message-info-dialog > header small {
  color: #65eaff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.message-info-dialog > header h2 {
  margin: 5px 0 0;
  color: #f4fcff;
  font-size: 23px;
}

.message-info-dialog > header button {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0,220,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: white;
  font-size: 24px;
}

.message-info-preview {
  padding: 15px;
  border: 1px solid rgba(0,220,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

.message-info-preview p {
  margin: 0 0 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-info-preview time {
  display: block;
  color: #8eb5c8;
  font-size: 11px;
  text-align: right;
}

.message-info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.message-info-row > span {
  flex: 0 0 auto;
  color: #8eb5c8;
  font-size: 12px;
}

.message-info-row > strong {
  max-width: 70%;
  color: #dbf9ff;
  font-size: 12px;
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
}

.message-info-note {
  margin: 0;
  color: #83a8bc;
  font-size: 11px;
  line-height: 1.6;
}

@keyframes message-info-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 560px) {
  .message-selection-toolbar {
    gap: 6px;
    padding: 8px;
    border-radius: 13px;
  }

  .message-selection-toolbar button {
    min-height: 34px;
    padding: 7px 9px;
  }

  .message-info-dialog {
    padding: 17px;
    border-radius: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-selection-toolbar *,
  .message-info-overlay,
  .message-info-dialog * {
    animation: none !important;
    transition: none !important;
  }
}


/* VexApp unified chats and group contact picker v1 */
.messenger .bottom-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.messenger .bottom-nav .nav-item {
  flex: 1 1 25% !important;
  width: 25% !important;
  min-width: 0;
}

.messenger .bottom-nav .nav-pill-indicator {
  width: 25% !important;
}

.messenger .bottom-nav .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.messenger .bottom-nav .nav-icon svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vex-fab-add-chat {
  position: fixed;
  z-index: 900;
  right: max(18px, calc((100vw - 520px) / 2 + 18px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 21px;
  display: grid;
  place-items: center;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.vex-fab-add-chat > span {
  font-size: 37px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}

.vex-fab-add-chat:active {
  transform: scale(.96);
}

.vex-contact-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 8, 18, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vex-contact-picker {
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  max-height: min(90dvh, 780px);
  overflow: hidden;
  color: #e5e7eb;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .45);
}

.vex-contact-picker-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .15);
}

.vex-contact-picker-header h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 750;
}

.vex-contact-picker-header p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 12px;
}

.vex-picker-back {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  border-radius: 13px;
  color: #dbeafe;
  background: rgba(59, 130, 246, .15);
  font-size: 25px;
  cursor: pointer;
}

.vex-picker-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
}

.vex-picker-search > span {
  color: #94a3b8;
  font-size: 23px;
}

.vex-picker-search input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 13px;
  outline: none;
  color: #f8fafc;
  background: rgba(30, 41, 59, .85);
}

.vex-picker-search input:focus {
  border-color: #3b82f6;
}

.vex-picker-search button,
.vex-contact-open-chat {
  border: 0;
  border-radius: 11px;
  padding: 10px 12px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, .17);
  font-weight: 700;
  cursor: pointer;
}

.vex-group-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 0 18px 18px;
}

.vex-group-create-form > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 650;
}

.vex-group-create-form > label input,
.vex-group-create-form > label textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  outline: none;
  color: #f8fafc;
  background: rgba(30, 41, 59, .85);
  font: inherit;
  font-weight: 400;
}

.vex-group-create-form > label input:focus,
.vex-group-create-form > label textarea:focus {
  border-color: #3b82f6;
}

.vex-picker-selected-heading,
.vex-picker-contact-heading,
.vex-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vex-picker-selected-heading,
.vex-picker-contact-heading {
  font-size: 12px;
}

.vex-picker-selected-heading > span,
.vex-picker-contact-heading > span,
.vex-picker-footer > span {
  color: #94a3b8;
  font-size: 11px;
}

.vex-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vex-picker-chip {
  border: 1px solid rgba(59, 130, 246, .35);
  border-radius: 999px;
  padding: 7px 10px;
  color: #dbeafe;
  background: rgba(37, 99, 235, .15);
  font-size: 11px;
  cursor: pointer;
}

.vex-contact-picker-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 30dvh;
  min-height: 90px;
  overflow: auto;
  overscroll-behavior: contain;
}

.vex-contact-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.vex-contact-pick {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 14px;
  text-align: left;
  color: #e2e8f0;
  background: rgba(30, 41, 59, .48);
  cursor: pointer;
}

.vex-contact-pick.is-selected {
  border-color: rgba(59, 130, 246, .65);
  background: rgba(37, 99, 235, .16);
}

.vex-contact-pick-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.vex-contact-pick-text strong,
.vex-contact-pick-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vex-contact-pick-text strong {
  font-size: 13px;
}

.vex-contact-pick-text small {
  color: #94a3b8;
  font-size: 11px;
}

.vex-contact-check {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .4);
  border-radius: 50%;
  color: #94a3b8;
}

.vex-contact-pick.is-selected .vex-contact-check {
  border-color: #2563eb;
  color: #fff;
  background: #2563eb;
}

.vex-contact-open-chat {
  padding: 9px;
  font-size: 11px;
}

.vex-picker-message {
  padding: 10px 4px;
  text-align: center;
  font-size: 12px;
}

.vex-picker-error {
  margin: 0;
  color: #fca5a5;
  font-size: 12px;
}

.vex-picker-footer {
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .15);
  background: #0f172a;
}

.vex-create-group-submit {
  border: 0;
  border-radius: 13px;
  padding: 12px 17px;
  color: #fff;
  background: #2563eb;
  font-weight: 750;
  cursor: pointer;
}

.vex-create-group-submit:disabled,
.vex-picker-search button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

@media (max-width: 420px) {
  .vex-contact-picker-overlay {
    padding: 8px;
  }

  .vex-contact-picker {
    max-height: 92dvh;
    border-radius: 20px;
  }

  .vex-contact-picker-header,
  .vex-picker-search {
    padding-left: 13px;
    padding-right: 13px;
  }

  .vex-group-create-form {
    padding-left: 13px;
    padding-right: 13px;
  }
}

/* VexApp Group Info and Admin UI V1 */

/* VexApp Group Info and Admin UI V1 */
.vex-group-list-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  color: #dbeafe;
  background: linear-gradient(145deg, #1d4ed8, #0f172a);
  font-size: 23px;
}

.vex-group-header-avatar {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #dbeafe;
  background: linear-gradient(145deg, #2563eb, #172554);
  font-size: 25px;
  cursor: pointer;
}

.vex-group-info-overlay {
  position: fixed;
  z-index: 10010;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(2, 6, 23, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vex-group-info-dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 600px);
  max-height: 94dvh;
  overflow: hidden;
  color: #e2e8f0;
  background: #0b1222;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 25px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .5);
}

.vex-group-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 17px;
  border-bottom: 1px solid rgba(148, 163, 184, .15);
}

.vex-group-info-header h2 {
  margin: 0;
  font-size: 17px;
}

.vex-group-info-header-spacer {
  flex: 1;
}

.vex-group-info-hero {
  padding: 24px 18px 20px;
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(37, 99, 235, .2), transparent 75%);
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.vex-group-info-emoji {
  display: grid;
  place-items: center;
  width: 83px;
  height: 83px;
  margin: 0 auto 12px;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 27px;
  background: rgba(37, 99, 235, .14);
  font-size: 42px;
}

.vex-group-info-hero h3 {
  margin: 0;
  font-size: 21px;
}

.vex-group-info-hero p {
  margin: 7px auto 10px;
  max-width: 440px;
  color: #94a3b8;
  font-size: 13px;
  white-space: pre-wrap;
}

.vex-group-info-hero > span {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, .14);
  font-size: 11px;
}

.vex-group-info-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
}

.vex-group-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 17px;
  background: rgba(30, 41, 59, .36);
}

.vex-group-panel h3 {
  margin: 0;
  font-size: 14px;
}

.vex-group-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vex-group-panel-heading > span {
  color: #94a3b8;
  font-size: 12px;
}

.vex-group-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .09);
}

.vex-group-member-row:last-child {
  border-bottom: 0;
}

.vex-group-member-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vex-group-member-details strong,
.vex-group-member-details small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vex-group-member-details strong {
  font-size: 12px;
}

.vex-group-member-details small {
  color: #94a3b8;
  font-size: 10px;
}

.vex-admin-badge {
  padding: 5px 7px;
  border: 1px solid rgba(96, 165, 250, .25);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, .15);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.vex-group-member-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vex-group-member-actions button,
.vex-group-small-button {
  border: 1px solid rgba(96, 165, 250, .24);
  border-radius: 9px;
  padding: 6px 8px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, .12);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.vex-group-member-actions button.danger {
  border-color: rgba(248, 113, 113, .25);
  color: #fecaca;
  background: rgba(127, 29, 29, .2);
}

.vex-group-settings label,
.vex-group-report label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 650;
}

.vex-group-settings input:not([type="checkbox"]),
.vex-group-settings textarea,
.vex-group-settings select,
.vex-group-report select,
.vex-group-report textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 11px;
  outline: none;
  color: #f8fafc;
  background: #111c30;
  font: inherit;
  font-weight: 400;
}

.vex-group-settings input:focus,
.vex-group-settings textarea:focus,
.vex-group-settings select:focus,
.vex-group-report select:focus,
.vex-group-report textarea:focus {
  border-color: #3b82f6;
}

.vex-group-admin-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vex-group-admin-toggle > span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vex-group-admin-toggle strong {
  font-size: 12px;
}

.vex-group-admin-toggle small {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 400;
}

.vex-group-admin-toggle input {
  width: 19px;
  height: 19px;
  accent-color: #2563eb;
  flex: 0 0 auto;
}

.vex-group-primary {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  color: white;
  background: #2563eb;
  font-weight: 800;
  cursor: pointer;
}

.vex-group-primary:disabled,
.vex-group-member-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.vex-group-add-search {
  padding: 0;
}

.vex-group-add-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 230px;
  overflow-y: auto;
}

.vex-group-report-button {
  align-self: flex-start;
  border: 1px solid rgba(248, 113, 113, .3);
  border-radius: 11px;
  padding: 10px 13px;
  color: #fecaca;
  background: rgba(127, 29, 29, .18);
  font-weight: 700;
  cursor: pointer;
}

.vex-group-inline-error,
.vex-group-inline-notice {
  margin: 0 14px 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
}

.vex-group-inline-error {
  color: #fecaca;
  background: rgba(127, 29, 29, .3);
}

.vex-group-inline-notice {
  color: #bbf7d0;
  background: rgba(22, 101, 52, .22);
}

@media (max-width: 480px) {
  .vex-group-info-overlay {
    padding: 7px;
  }

  .vex-group-info-dialog {
    max-height: 96dvh;
    border-radius: 21px;
  }

  .vex-group-info-hero {
    padding: 18px 12px;
  }

  .vex-group-info-emoji {
    width: 70px;
    height: 70px;
    border-radius: 23px;
    font-size: 35px;
  }

  .vex-group-info-content {
    padding: 9px;
  }

  .vex-group-member-row {
    gap: 7px;
  }

  .vex-group-member-actions button {
    padding: 6px;
    font-size: 9px;
  }
}


/* VexApp Group Admin UI Polish V2 */
.vex-contact-picker,
.vex-group-info-dialog {
  color: #eaf1ff;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, .16), transparent 50%),
    #0b1222;
  border: 1px solid rgba(147, 180, 255, .2);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .5);
}

.vex-contact-picker-header,
.vex-group-info-header {
  min-height: 58px;
  background: rgba(15, 23, 42, .82);
  border-bottom-color: rgba(148, 163, 184, .15);
}

.vex-contact-picker-header h2,
.vex-group-info-header h2 {
  letter-spacing: -.35px;
  font-weight: 800;
}

.vex-picker-back {
  display: grid;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, .2);
  background: linear-gradient(145deg, rgba(37, 99, 235, .25), rgba(30, 41, 59, .7));
  transition: background .18s ease, transform .18s ease;
}

.vex-picker-back:active {
  transform: scale(.94);
}

.vex-picker-search {
  margin: 0;
  background: transparent;
}

.vex-picker-search input,
.vex-group-create-form > label input,
.vex-group-create-form > label textarea,
.vex-group-settings input:not([type="checkbox"]),
.vex-group-settings textarea,
.vex-group-settings select,
.vex-group-report select,
.vex-group-report textarea {
  border-color: rgba(148, 163, 184, .18);
  border-radius: 13px;
  background: rgba(17, 28, 48, .9);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.vex-picker-search input:focus,
.vex-group-create-form > label input:focus,
.vex-group-create-form > label textarea:focus,
.vex-group-settings input:focus,
.vex-group-settings textarea:focus,
.vex-group-settings select:focus,
.vex-group-report select:focus,
.vex-group-report textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.vex-group-create-form,
.vex-group-info-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, .45) transparent;
}

.vex-picker-selected-heading,
.vex-picker-contact-heading,
.vex-group-panel-heading {
  padding-bottom: 5px;
}

.vex-picker-chip {
  border-color: rgba(96, 165, 250, .35);
  background: linear-gradient(135deg, rgba(37, 99, 235, .25), rgba(30, 64, 175, .12));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.vex-contact-pick {
  min-height: 59px;
  border: 1px solid rgba(148, 163, 184, .07);
  border-radius: 15px;
  background: rgba(30, 41, 59, .45);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.vex-contact-pick:hover {
  border-color: rgba(96, 165, 250, .28);
  background: rgba(37, 99, 235, .1);
}

.vex-contact-pick:active {
  transform: scale(.99);
}

.vex-contact-pick.is-selected {
  border-color: rgba(59, 130, 246, .65);
  background: linear-gradient(110deg, rgba(37, 99, 235, .19), rgba(30, 41, 59, .5));
}

.vex-contact-check {
  transition: background .18s ease, border-color .18s ease;
}

.vex-picker-footer {
  padding-top: 14px;
  background: linear-gradient(0deg, #0b1222 80%, rgba(11, 18, 34, .9));
}

.vex-create-group-submit,
.vex-group-primary {
  min-height: 43px;
  border: 1px solid rgba(147, 197, 253, .18);
  border-radius: 13px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 7px 20px rgba(37, 99, 235, .17);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.vex-create-group-submit:hover:not(:disabled),
.vex-group-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 9px 23px rgba(37, 99, 235, .27);
}

.vex-create-group-submit:active:not(:disabled),
.vex-group-primary:active:not(:disabled) {
  transform: scale(.99);
}

.vex-group-info-hero {
  padding-top: 26px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, .24), transparent 65%),
    linear-gradient(180deg, rgba(15, 23, 42, .35), transparent);
}

.vex-group-info-emoji {
  border: 1px solid rgba(96, 165, 250, .28);
  background: linear-gradient(145deg, rgba(37, 99, 235, .27), rgba(15, 23, 42, .9));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .045);
}

.vex-group-info-hero h3 {
  font-weight: 850;
  letter-spacing: -.4px;
}

.vex-group-info-hero p {
  line-height: 1.55;
}

.vex-group-panel {
  gap: 13px;
  padding: 16px;
  border-color: rgba(148, 163, 184, .13);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .52), rgba(15, 23, 42, .55));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.vex-group-panel h3 {
  font-weight: 800;
  letter-spacing: -.2px;
}

.vex-group-member-row {
  min-height: 55px;
  gap: 11px;
}

.vex-admin-badge {
  border-color: rgba(96, 165, 250, .3);
  background: linear-gradient(135deg, rgba(37, 99, 235, .24), rgba(30, 64, 175, .12));
  font-weight: 800;
}

.vex-group-member-actions button,
.vex-group-small-button {
  min-height: 30px;
  border-color: rgba(96, 165, 250, .25);
  transition: background .16s ease;
}

.vex-group-member-actions button:hover,
.vex-group-small-button:hover {
  background: rgba(37, 99, 235, .25);
}

.vex-group-settings label,
.vex-group-report label {
  gap: 8px;
  line-height: 1.4;
}

.vex-group-admin-toggle {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 14px;
  background: rgba(15, 23, 42, .5);
}

.vex-group-report-button {
  min-height: 40px;
  border-radius: 12px;
  transition: background .18s ease;
}

.vex-group-report-button:hover {
  background: rgba(127, 29, 29, .3);
}

.vex-group-inline-error,
.vex-group-inline-notice {
  line-height: 1.5;
}

@media (max-width: 480px) {
  .vex-contact-picker-header,
  .vex-group-info-header {
    padding: 13px;
  }

  .vex-group-panel {
    padding: 13px;
  }

  .vex-picker-footer {
    gap: 8px;
  }

  .vex-create-group-submit {
    padding: 11px 13px;
  }
}

/* VEXAPP WHATSAPP-STYLE GROUP INFO FULLSCREEN V2 */
.vex-group-info-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10010 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background: #0b1014 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.vex-group-info-dialog {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #f1f3f5 !important;
  background: #0b1014 !important;
  scrollbar-width: none;
}

.vex-group-info-dialog::-webkit-scrollbar {
  display: none;
}

.vex-group-info-topbar {
  position: absolute;
  z-index: 5;
  top: max(12px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 42px;
  padding: 0 16px;
  color: #f4f5f6;
  background: transparent;
}

.vex-group-info-topbar-space {
  flex: 1;
}

.vex-group-info-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vex-group-info-topbar button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.vex-group-info-topbar button svg {
  width: 23px;
  height: 23px;
}

.vex-group-info-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: calc(env(safe-area-inset-top, 0px) + 48px) 18px 30px !important;
  text-align: center !important;
  background: #0b1014 !important;
}

.vex-group-info-emoji {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(130px, 33vw, 220px) !important;
  height: clamp(130px, 33vw, 220px) !important;
  flex: 0 0 auto;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #25d366 !important;
  background: #103b2d !important;
  box-shadow: none !important;
  font-size: clamp(56px, 12vw, 90px) !important;
}

.vex-group-info-emoji svg {
  width: 54%;
  height: 54%;
}

.vex-group-info-hero h3 {
  max-width: 100%;
  margin: 24px 0 9px !important;
  color: #f5f6f7 !important;
  font-size: clamp(22px, 5.3vw, 32px) !important;
  font-weight: 750 !important;
  line-height: 1.22;
  letter-spacing: -.45px !important;
  overflow-wrap: anywhere;
}

.vex-group-info-hero > p {
  margin: 0 !important;
  color: #8c949b !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.5;
}

.vex-group-info-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 5.5vw, 48px);
  width: min(100%, 300px);
  margin: 26px auto 2px;
}

.vex-group-info-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: #f2f4f5;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.vex-group-info-action-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 52px;
  border-radius: 28px;
  color: #f0f3f4;
  background: #20262a;
}

.vex-group-info-action-circle svg {
  width: 25px;
  height: 25px;
}

.vex-group-description-section {
  padding: 28px 18px 26px;
  border-top: 1px solid #242a2e;
  border-bottom: 1px solid #242a2e;
  background: #0b1014;
}

.vex-group-description-text {
  margin: 0 0 12px;
  color: #e3e7e9;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.vex-group-description-add {
  display: inline-block;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  color: #25d366;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.vex-group-created-by {
  margin: 0;
  color: #8b949b;
  font-size: 13px;
  line-height: 1.55;
}

.vex-group-info-tabs {
  position: sticky;
  z-index: 4;
  top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 58px;
  padding: 0 12px;
  border-bottom: 1px solid #242a2e;
  background: #0b1014;
}

.vex-group-info-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 6px;
  border: 0;
  color: #858e95;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.vex-group-info-tabs button.is-active {
  color: #f3f4f5;
}

.vex-group-info-tabs button.is-active::after {
  position: absolute;
  right: 17%;
  bottom: 0;
  left: 17%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #25d366;
  content: "";
}

.vex-group-info-content {
  display: block !important;
  min-height: 0;
  padding: 0 !important;
  overflow: visible !important;
  color: #f1f3f5;
  background: #0b1014 !important;
}

.vex-group-info-content .vex-group-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.vex-group-members-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 8px 18px;
  color: #8b949b;
  font-size: 13px;
  font-weight: 700;
}

.vex-group-member-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  color: #8b949b;
  background: transparent;
  cursor: pointer;
}

.vex-group-member-search-toggle svg {
  width: 26px;
  height: 26px;
}

.vex-group-member-search {
  padding: 0 18px 12px;
}

.vex-group-member-search input {
  box-sizing: border-box;
  width: 100%;
  min-height: 43px;
  padding: 0 13px;
  border: 1px solid #30383d;
  border-radius: 10px;
  outline: none;
  color: #f4f6f7;
  background: #20262a;
  font: inherit;
}

.vex-group-wa-member-action {
  padding: 6px 18px;
}

.vex-group-wa-member-action button {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  color: #f3f5f6;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.vex-group-wa-member-action strong {
  font-size: 15px;
  font-weight: 650;
}

.vex-group-wa-member-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #042514;
  background: #25d366;
}

.vex-group-wa-member-icon svg {
  width: 25px;
  height: 25px;
}

.vex-group-info-content .vex-group-member-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 11px 18px;
  border: 0;
  border-radius: 0;
  border-bottom: 0;
  background: transparent;
}

.vex-group-info-content .vex-group-member-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.vex-group-info-content .vex-group-member-details strong {
  color: #f3f5f6;
  font-size: 15px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.vex-group-info-content .vex-group-member-details small {
  color: #8b949b;
  font-size: 12px;
}

.vex-group-info-content .vex-admin-badge {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  color: #c5e8d3;
  background: #103b2d;
  font-size: 11px;
  font-weight: 700;
}

.vex-group-info-tab-settings .vex-group-panel {
  padding: 20px 18px;
  border-bottom: 1px solid #242a2e;
}

.vex-group-info-tab-settings .vex-group-panel h3 {
  margin: 0 0 16px;
  color: #f3f5f6;
  font-size: 17px;
}

.vex-group-info-tab-settings .vex-group-settings label {
  color: #c5cbd0;
}

.vex-group-media-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 62px 24px;
  color: #8b949b;
  text-align: center;
}

.vex-group-media-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 5px;
  border-radius: 50%;
  color: #25d366;
  background: #103b2d;
  font-size: 29px;
}

.vex-group-media-empty strong {
  color: #e4e8eb;
  font-size: 15px;
}

.vex-group-media-empty span {
  max-width: 270px;
  font-size: 13px;
  line-height: 1.5;
}

.vex-group-inline-error,
.vex-group-inline-notice {
  margin: 12px 18px;
  overflow-wrap: anywhere;
}

@media (max-width: 380px) {
  .vex-group-info-hero {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .vex-group-info-actions {
    gap: 10px;
    width: 100%;
  }

  .vex-group-info-action-circle {
    width: 61px;
  }

  .vex-group-info-action {
    font-size: 11px;
  }

  .vex-group-wa-member-action {
    padding-right: 14px;
    padding-left: 14px;
  }
}


/* VEXAPP_AUTH_REGISTER_V1 */
.auth-password-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.auth-card .auth-password-wrap input {
  box-sizing: border-box;
  padding-right: 52px;
}

.auth-card .auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #91aabd;
  cursor: pointer;
}

.auth-card .auth-password-toggle:hover {
  background: rgba(100, 170, 220, .12);
  color: #e5f4ff;
}

.auth-card .auth-password-toggle svg {
  display: block;
}

.auth-card .auth-field-help {
  margin-top: -3px;
  color: #8497a5;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
}


/* VEXAPP_SECURITY_KEY_UI_V1 */
.security-key-card {
  width: min(100%, 460px);
}

.security-key-display {
  display: grid;
  gap: 12px;
  margin: 22px 0 14px;
  padding: 23px 16px;
  border: 1px solid rgba(75, 170, 245, .35);
  border-radius: 18px;
  background: linear-gradient(145deg, #102b40, #101b29);
  text-align: center;
}

.security-key-display > span {
  color: #8dcfff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

.security-key-display strong {
  color: #ffffff;
  font-size: clamp(30px, 9vw, 42px);
  font-weight: 850;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

.security-key-display small {
  color: #9aafbd;
  font-size: 11px;
}

.security-key-ack {
  display: flex !important;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px !important;
  margin: 14px 0;
  color: #cbd9e3 !important;
  font-size: 12px !important;
  line-height: 1.5;
}

.security-key-ack input {
  width: 17px !important;
  height: 17px;
  margin: 0;
  accent-color: #36a9ed;
}

.security-key-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: #a9c3d3;
  font-size: 13px;
}

.security-key-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #34546a;
  border-top-color: #60c7ff;
  border-radius: 50%;
  animation: vex-security-spin .8s linear infinite;
}

@keyframes vex-security-spin {
  to { transform: rotate(360deg); }
}



/* VEXAPP_RECOVERY_METHODS_V1 */
.auth-recovery-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 3px 0;
}

.auth-recovery-methods button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 11px 8px;
  font-size: 11px;
}

.auth-owner-recovery-note {
  padding: 13px 14px;
  border: 1px solid #304252;
  border-radius: 12px;
  background: #14212a;
}

.auth-owner-recovery-note strong {
  color: #dceeff;
  font-size: 12px;
}

.auth-owner-recovery-note p {
  margin: 7px 0 0;
  color: #9fb1bd;
  font-size: 11px;
  line-height: 1.6;
}

/* VEXAPP_ACTIVATION_SIGNUP_V1 */
.auth-card .activation-input-card {
  display: grid;
  gap: 14px;
  margin: 8px 0 4px;
  padding: 16px;
  border: 1px solid rgba(113, 157, 199, .24);
  border-radius: 16px;
  background: rgba(26, 50, 75, .28);
}

.activation-input-heading {
  display: grid;
  gap: 6px;
}

.activation-input-heading > strong {
  color: #e7f2ff;
  font-size: 15px;
}

.activation-input-heading > p {
  margin: 0;
  color: #91a8bd;
  font-size: 12px;
  line-height: 1.6;
}

.auth-card .activation-input-card input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}


/* VEXAPP_QUICK_ACTIONS_MENU_V1 */
.messenger .vex-quick-actions-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.messenger .vex-quick-actions {
  position: fixed;
  z-index: 81;
  right: 21px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 174px);
  display: grid;
  gap: 6px;
  width: min(275px, calc(100vw - 42px));
  box-sizing: border-box;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(195, 220, 255, .19);
  border-radius: 20px;
  background: rgba(20, 29, 47, .91);
  color: #f4f8ff;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
  transform-origin: bottom right;
  animation: vex-quick-actions-enter .23s cubic-bezier(.2, .8, .2, 1) both;
}

.messenger .vex-quick-action-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 65px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.messenger .vex-quick-action-item:active {
  transform: scale(.975);
  background: rgba(255, 255, 255, .09);
}

.messenger .vex-quick-action-icon {
  display: grid;
  flex: 0 0 41px;
  width: 41px;
  height: 41px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 13px;
  background: rgba(106, 150, 255, .15);
  font-size: 21px;
}

.messenger .vex-quick-action-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.messenger .vex-quick-action-copy strong {
  color: #f6f9ff;
  font-size: 14px;
  font-weight: 700;
}

.messenger .vex-quick-action-copy small {
  color: rgba(218, 229, 247, .67);
  font-size: 11px;
  line-height: 1.35;
}

.messenger .vex-quick-action-arrow {
  color: rgba(220, 233, 255, .60);
  font-size: 23px;
  line-height: 1;
}

.messenger .vex-fab-add-chat > span {
  transition: transform .23s cubic-bezier(.2, .8, .2, 1);
}

.messenger .vex-fab-add-chat.is-open > span {
  transform: rotate(45deg);
}

@keyframes vex-quick-actions-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 11px, 0) scale(.94);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .messenger .vex-quick-actions {
    animation: none;
  }

  .messenger .vex-fab-add-chat > span,
  .messenger .vex-quick-action-item {
    transition: none;
  }
}


/* VEXAPP_CONTACTS_FULLSCREEN_V1 */
.messenger .saved-contacts-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  box-sizing: border-box;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  max-height: none !important;

  margin: 0 !important;
  padding:
    max(20px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    calc(24px + env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));

  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    radial-gradient(
      ellipse at top right,
      rgba(23, 82, 117, .28),
      transparent 48%
    ),
    linear-gradient(155deg, #071421, #0b1c2b 55%, #08131f);

  color: #eafaff;
  box-shadow: none !important;

  animation: vex-contacts-page-enter .23s ease-out both;
}

.messenger .saved-contacts-panel .saved-contacts-heading {
  flex-shrink: 0;
  padding-bottom: 15px;
}

.messenger .saved-contacts-panel .saved-contact-search {
  flex-shrink: 0;
  min-height: 46px;
}

.messenger .saved-contacts-panel .saved-contact-list {
  padding-bottom: 20px;
}

@keyframes vex-contacts-page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .messenger .saved-contacts-panel {
    animation: none;
  }
}

/* VEXAPP_BLACK_GLASS_UI_V2 */


/* VEXAPP_BLACK_GLASS_UI_V2 */

/* ---------------------------------------------------------
   CONTACT DIRECTORY
--------------------------------------------------------- */
.messenger .saved-contacts-panel {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(60, 86, 112, .10), transparent 42%),
    #07090c !important;
  color: #f3f6fa !important;
}

.messenger .saved-contacts-panel .saved-contacts-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  align-items: center;
  margin: 0 -18px 15px;
  padding: 12px 18px 15px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(145deg, rgba(24,28,35,.94), rgba(11,14,19,.91));
  -webkit-backdrop-filter: blur(25px) saturate(155%);
  backdrop-filter: blur(25px) saturate(155%);
  box-shadow: 0 8px 25px rgba(0,0,0,.18);
}

.messenger .saved-contacts-heading h2 {
  color: #f7f9fc;
  font-size: 23px;
  letter-spacing: -.035em;
}

.messenger .saved-contacts-heading p {
  color: #929ba7;
}

.messenger .saved-contacts-panel .saved-contact-search {
  min-height: 47px;
  margin-bottom: 15px;
  border: 1px solid rgba(180,198,220,.13);
  border-radius: 15px;
  background: #10141b;
  color: #f4f7fb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.messenger .saved-contacts-panel .saved-contact-search:focus {
  border-color: rgba(130,167,220,.55);
  outline: none;
  box-shadow: 0 0 0 3px rgba(96,135,195,.12);
}

.messenger .saved-contact-list {
  display: grid;
  gap: 9px;
}

.messenger .saved-contact-card {
  min-height: 72px;
  padding: 10px 11px;
  border: 1px solid rgba(180,198,220,.085);
  border-radius: 17px;
  background: linear-gradient(145deg, #11161e, #0b0f15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.messenger .saved-contact-card:active {
  transform: scale(.99);
  border-color: rgba(150,180,220,.22);
}

.messenger .saved-contact-main {
  gap: 12px;
  min-height: 48px;
}

.messenger .saved-contact-main .row-text {
  gap: 4px;
}

.messenger .saved-contact-main .row-text strong {
  color: #f2f5fa;
  font-size: 14px;
}

.messenger .saved-contact-main .row-text small {
  color: #8893a1;
  font-size: 11px;
}

.messenger .saved-contact-edit-button {
  flex: 0 0 auto;
  min-width: 57px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(160,185,220,.15);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  color: #dce8fa;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}

.messenger .saved-contact-edit-button:active {
  transform: scale(.95);
  background: rgba(255,255,255,.12);
}

.messenger .saved-contact-edit-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.messenger .saved-contacts-empty {
  margin-top: 12px;
  padding: 25px 18px;
  border: 1px solid rgba(180,198,220,.09);
  border-radius: 18px;
  background: #0e1218;
  color: #eef2f7;
}

.messenger .saved-contacts-empty p {
  color: #929ba7;
  line-height: 1.55;
}

.messenger .saved-contacts-panel .discovery-close {
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(255,255,255,.065);
  color: #edf2f8;
  font-size: 22px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------------------------------------------------------
   FULLSCREEN CONTACT EDITOR
--------------------------------------------------------- */
.messenger .saved-contact-editor-overlay {
  position: fixed;
  z-index: 20020;
  inset: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(67,91,125,.12), transparent 43%),
    #07090c;
  color: #f4f7fb;
  animation: vex-contact-editor-enter .22s ease-out both;
}

.messenger .saved-contact-editor-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.messenger .saved-contact-editor-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  padding:
    max(14px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    15px
    max(18px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(135deg, rgba(30,35,44,.96), rgba(12,15,21,.94));
  -webkit-backdrop-filter: blur(27px) saturate(165%);
  backdrop-filter: blur(27px) saturate(165%);
  box-shadow: 0 9px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07);
}

.messenger .saved-contact-editor-header > button {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #f4f7fb;
  font-size: 23px;
  cursor: pointer;
}

.messenger .saved-contact-editor-header > div {
  min-width: 0;
}

.messenger .saved-contact-editor-header small {
  color: #8e9baa;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}

.messenger .saved-contact-editor-header h2 {
  margin: 3px 0;
  color: #f6f8fc;
  font-size: 21px;
  font-weight: 780;
  letter-spacing: -.03em;
}

.messenger .saved-contact-editor-header p {
  margin: 0;
  color: #8e99a7;
  font-size: 11px;
}

.messenger .saved-contact-editor-body {
  display: grid;
  align-content: start;
  gap: 25px;
  width: min(100%, 620px);
  min-height: 0;
  flex: 1 1 auto;
  margin: 0 auto;
  padding: 25px 19px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.messenger .saved-contact-editor-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 1px solid rgba(180,198,220,.10);
  border-radius: 18px;
  background: linear-gradient(145deg, #121821, #0c1118);
}

.messenger .saved-contact-editor-identity > .avatar {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
}

.messenger .saved-contact-editor-identity > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.messenger .saved-contact-editor-identity strong {
  color: #f1f5fa;
  font-size: 15px;
}

.messenger .saved-contact-editor-identity small {
  color: #8e9aaa;
  font-size: 12px;
}

.messenger .saved-contact-editor-label {
  display: grid;
  gap: 9px;
  color: #e9eef6;
  font-size: 13px;
  font-weight: 700;
}

.messenger .saved-contact-editor-label input {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(180,198,220,.15);
  border-radius: 14px;
  outline: none;
  background: #111720;
  color: #f5f7fb;
  font: inherit;
  font-size: 14px;
  font-weight: 450;
}

.messenger .saved-contact-editor-label input:focus {
  border-color: rgba(130,167,220,.62);
  box-shadow: 0 0 0 3px rgba(96,135,195,.13);
}

.messenger .saved-contact-editor-label > small {
  color: #8793a1;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
}

.messenger .saved-contact-editor-note {
  padding: 15px;
  border: 1px solid rgba(180,198,220,.085);
  border-radius: 15px;
  background: #0d1219;
}

.messenger .saved-contact-editor-note strong {
  color: #eaf0f8;
  font-size: 12px;
}

.messenger .saved-contact-editor-note p {
  margin: 7px 0 0;
  color: #8e99a7;
  font-size: 11px;
  line-height: 1.6;
}

.messenger .saved-contact-editor-error,
.messenger .saved-contact-editor-notice {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.messenger .saved-contact-editor-error {
  color: #ff9999;
}

.messenger .saved-contact-editor-notice {
  color: #9be2bc;
}

.messenger .saved-contact-editor-footer {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
  gap: 10px;
  width: min(100%, 620px);
  box-sizing: border-box;
  margin: 0 auto;
  padding:
    13px
    max(18px, env(safe-area-inset-right, 0px))
    calc(14px + env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(10,13,18,.96);
}

.messenger .saved-contact-delete-button,
.messenger .saved-contact-save-button {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.messenger .saved-contact-delete-button {
  border: 1px solid rgba(255,110,110,.24);
  background: rgba(120,35,42,.16);
  color: #ffaaaa;
}

.messenger .saved-contact-save-button {
  border: 1px solid rgba(160,195,255,.19);
  background: linear-gradient(135deg, #3869b9, #24477f);
  color: #fff;
  box-shadow: 0 6px 18px rgba(28,76,145,.2);
}

.messenger .saved-contact-delete-button:disabled,
.messenger .saved-contact-save-button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

@keyframes vex-contact-editor-enter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   FULLSCREEN GROUP CREATION
--------------------------------------------------------- */
.messenger .vex-contact-picker-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  display: block !important;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
  background: #07090c !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.messenger .vex-contact-picker {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(67,91,125,.11), transparent 42%),
    #080a0e !important;
  color: #f3f6fa !important;
  box-shadow: none !important;
}

.messenger .vex-contact-picker-header {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  padding:
    max(15px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    15px
    max(18px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(135deg, rgba(30,35,44,.96), rgba(12,15,21,.94));
  -webkit-backdrop-filter: blur(27px) saturate(165%);
  backdrop-filter: blur(27px) saturate(165%);
  box-shadow: 0 8px 25px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.07);
}

.messenger .vex-contact-picker-header h2 {
  color: #f6f8fc;
  font-size: 21px;
  letter-spacing: -.03em;
}

.messenger .vex-contact-picker-header p {
  color: #929daa;
}

.messenger .vex-picker-back {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #f4f7fb;
}

.messenger .vex-picker-search {
  flex: 0 0 auto;
  padding:
    13px
    max(18px, env(safe-area-inset-right, 0px))
    13px
    max(18px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid rgba(255,255,255,.065);
  background: #090c11;
}

.messenger .vex-picker-search input {
  min-height: 45px;
  border: 1px solid rgba(180,198,220,.13);
  border-radius: 13px;
  background: #111720;
  color: #f4f7fb;
}

.messenger .vex-picker-search button {
  min-height: 43px;
  border: 1px solid rgba(145,178,230,.18);
  border-radius: 12px;
  background: rgba(67,105,165,.20);
  color: #dce9ff;
}

.messenger .vex-group-create-form {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding:
    17px
    max(18px, env(safe-area-inset-right, 0px))
    calc(22px + env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
  scrollbar-width: thin;
  scrollbar-color: rgba(150,175,210,.3) transparent;
}

.messenger .vex-group-create-form > label {
  color: #dce3ed;
}

.messenger .vex-group-create-form > label input,
.messenger .vex-group-create-form > label textarea {
  min-height: 46px;
  border: 1px solid rgba(180,198,220,.13);
  border-radius: 14px;
  background: #111720;
  color: #f3f6fa;
}

.messenger .vex-contact-picker-list {
  flex: 1 1 auto;
  max-height: none !important;
  min-height: 160px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 0 12px;
}

.messenger .vex-contact-option {
  border-color: rgba(180,198,220,.075);
  border-radius: 15px;
  background: #10151c;
}

.messenger .vex-contact-pick {
  background: transparent;
  color: #eef2f8;
}

.messenger .vex-picker-footer {
  position: sticky;
  z-index: 3;
  bottom: 0;
  flex: 0 0 auto;
  margin: 7px -18px calc(-22px - env(safe-area-inset-bottom, 0px));
  padding:
    14px
    max(18px, env(safe-area-inset-right, 0px))
    calc(14px + env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
  border-top: 1px solid rgba(255,255,255,.09);
  background: rgba(10,13,18,.97);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

/* ---------------------------------------------------------
   SETTINGS BLACK GLASS
--------------------------------------------------------- */
.messenger .vps-settings-page {
  min-height: 100%;
  background: #07090c !important;
  color: #f0f3f8 !important;
}

.messenger .vps-detail-header,
.messenger[data-vex-theme="light"] .vps-detail-header {
  border: 1px solid rgba(220,235,255,.15) !important;
  border-radius: 21px !important;
  background:
    linear-gradient(
      135deg,
      rgba(36,42,52,.95),
      rgba(17,21,28,.93) 54%,
      rgba(24,31,41,.94)
    ) !important;
  background-color: rgba(17,21,28,.93) !important;
  -webkit-backdrop-filter: blur(27px) saturate(165%) !important;
  backdrop-filter: blur(27px) saturate(165%) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;
}

.messenger .vps-detail-header::before {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255,255,255,.16), transparent 48%),
    linear-gradient(115deg, rgba(255,255,255,.045), transparent 45%, rgba(120,160,210,.065)) !important;
}

.messenger .vps-detail-header .vps-detail-title h1,
.messenger[data-vex-theme="light"] .vps-detail-header .vps-detail-title h1 {
  color: #f5f7fb !important;
}

.messenger .vps-detail-header .vps-detail-title p,
.messenger[data-vex-theme="light"] .vps-detail-header .vps-detail-title p {
  color: #a3adbb !important;
}

.messenger .vps-detail-header .vps-back-button,
.messenger[data-vex-theme="light"] .vps-detail-header .vps-back-button {
  border-color: rgba(220,235,255,.15) !important;
  background: rgba(255,255,255,.075) !important;
  color: #f5f8fc !important;
}

.messenger .vps-settings-page .vps-info-card,
.messenger .vps-settings-page .vps-warning-card {
  border: 1px solid rgba(180,198,220,.10) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #121720, #0d1118) !important;
  color: #edf2f8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.messenger .vps-settings-page .vps-info-card h3,
.messenger[data-vex-theme="light"] .vps-settings-page .vps-info-card h3 {
  color: #f1f5fa !important;
}

.messenger .vps-settings-page .vps-info-card p,
.messenger .vps-settings-page .vps-row-copy p,
.messenger[data-vex-theme="light"] .vps-settings-page .vps-info-card p {
  color: #9aa5b3 !important;
}

@media (max-width: 600px) {
  .messenger .saved-contact-editor-body {
    padding: 20px 16px;
  }

  .messenger .saved-contact-editor-footer {
    padding-left: 15px;
    padding-right: 15px;
  }

  .messenger .vex-contact-picker-header {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .messenger .saved-contact-editor-overlay {
    animation: none;
  }
}

/* VEXAPP_UNIFIED_BLACK_BLUE_CYAN_V3 */


/* VEXAPP_UNIFIED_BLACK_BLUE_CYAN_V3 */

/* Satu palet global untuk semua halaman dan menu. */
.messenger {
  --vex-unified-bg:
    radial-gradient(ellipse at 92% 5%, rgba(0, 195, 230, .17), transparent 37%),
    radial-gradient(ellipse at 5% 78%, rgba(27, 91, 190, .17), transparent 43%),
    linear-gradient(145deg, #05070c 0%, #091321 52%, #07171e 100%);

  --vex-unified-surface:
    linear-gradient(145deg, rgba(19, 30, 44, .97), rgba(9, 15, 24, .98) 60%, rgba(7, 24, 31, .97));

  --vex-unified-glass:
    linear-gradient(135deg, rgba(39, 55, 72, .91), rgba(15, 24, 36, .88) 55%, rgba(11, 40, 50, .88));

  --vex-unified-border: rgba(135, 190, 220, .16);
}

/* Jangan biarkan kotak hitam Pengaturan terpisah dari halaman. */
.messenger:has(.messenger-shell.profile-tab-active) {
  background: var(--vex-unified-bg) !important;
  background-color: #070b12 !important;
}

.messenger:has(.messenger-shell.profile-tab-active) .messenger-shell,
.messenger:has(.messenger-shell.profile-tab-active) .list-pane {
  background: transparent !important;
  background-color: transparent !important;
}

.messenger:has(.messenger-shell.profile-tab-active) .list-pane {
  padding: 0 !important;
}

/* Hilangkan heading duplikat dari layout luar. */
.messenger:has(.messenger-shell.profile-tab-active) .pane-heading {
  display: none !important;
}

/* Halaman Pengaturan menyatu dengan gradient utama. */
.messenger:has(.messenger-shell.profile-tab-active) .vps-settings-page {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 16px 32px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #f3f7fc !important;
}

.messenger .vps-home-view,
.messenger .vps-detail-view,
.messenger .vps-detail-content {
  background: transparent !important;
}

/* Header utama Pengaturan: frosted liquid glass. */
.messenger .vps-home-header {
  position: sticky;
  top: 0;
  z-index: 25;
  margin: 0 -16px 13px;
  padding:
    max(19px, env(safe-area-inset-top, 0px))
    17px 17px;

  border: 1px solid rgba(185, 220, 245, .13);
  border-top: 0;
  border-radius: 0 0 21px 21px;

  background: var(--vex-unified-glass) !important;
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  backdrop-filter: blur(28px) saturate(175%);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .23),
    inset 0 1px 0 rgba(255, 255, 255, .11);
}

.messenger .vps-home-header h1 {
  color: #f7fbff !important;
}

.messenger .vps-eyebrow {
  color: #8bdff1 !important;
}

/* Header submenu Akun, Privasi, dan seterusnya. */
.messenger .vps-detail-header {
  background: var(--vex-unified-glass) !important;
  background-color: rgba(16, 26, 39, .88) !important;
  border: 1px solid var(--vex-unified-border) !important;

  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(35, 190, 225, .055) !important;
}

.messenger .vps-detail-header::before {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255,255,255,.17), transparent 48%),
    linear-gradient(115deg, rgba(255,255,255,.05), transparent 45%, rgba(0,200,235,.075)) !important;
}

.messenger .vps-detail-title h1 {
  color: #f7fbff !important;
}

.messenger .vps-detail-title p {
  color: #a6b8ca !important;
}

.messenger .vps-detail-title > span {
  color: #a4d9e8 !important;
  background: rgba(24, 110, 140, .17) !important;
  border-color: rgba(80, 190, 220, .17) !important;
}

/* Semua kartu pengaturan memakai permukaan yang sama. */
.messenger .vps-info-card,
.messenger .vps-warning-card {
  background: var(--vex-unified-surface) !important;
  border: 1px solid var(--vex-unified-border) !important;
  border-radius: 17px !important;
  color: #edf5fc !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.messenger .vps-info-card h3,
.messenger .vps-row-copy strong {
  color: #eff8ff !important;
}

.messenger .vps-info-card p,
.messenger .vps-row-copy p {
  color: #9caebe !important;
}

/* Daftar kontak dan editor kontak. */
.messenger .saved-contacts-panel,
.messenger .saved-contact-editor-overlay {
  background: var(--vex-unified-bg) !important;
  color: #f3f7fc !important;
}

.messenger .saved-contacts-panel .saved-contact-card,
.messenger .saved-contact-editor-identity,
.messenger .saved-contact-editor-note {
  background: var(--vex-unified-surface) !important;
  border-color: var(--vex-unified-border) !important;
}

/* Buat Grup full-screen dengan dasar gradient yang sama. */
.messenger .vex-contact-picker-overlay {
  background: var(--vex-unified-bg) !important;
}

.messenger .vex-contact-picker {
  background: var(--vex-unified-bg) !important;
  color: #f3f7fc !important;
}

.messenger .vex-contact-picker-header,
.messenger .vex-picker-footer {
  background: var(--vex-unified-glass) !important;
  border-color: var(--vex-unified-border) !important;
}

/* Info grup dan menu floating. */
.messenger .vex-group-info-overlay {
  background: var(--vex-unified-bg) !important;
}

.messenger .vex-group-info-dialog,
.messenger .vex-quick-actions,
.messenger .conversation-overflow-menu {
  background: var(--vex-unified-surface) !important;
  border-color: var(--vex-unified-border) !important;
  color: #f3f7fc !important;
}

/* Samakan backdrop composer Status tanpa mengubah media viewer. */
.messenger .status-composer-backdrop {
  background: var(--vex-unified-bg) !important;
}

@media (max-width: 680px) {
  .messenger .vps-detail-header {
    background: var(--vex-unified-glass) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .messenger .vps-home-header,
  .messenger .vps-detail-header {
    scroll-behavior: auto;
  }
}



/* VEXAPP_GLOBAL_BLACK_BLUE_CYAN_V4 */

.messenger {
  --vex-global-background:
    radial-gradient(ellipse at 92% 5%, rgba(0, 195, 230, .16), transparent 38%),
    radial-gradient(ellipse at 5% 76%, rgba(28, 91, 190, .18), transparent 44%),
    linear-gradient(145deg, #05070c 0%, #091321 52%, #071a23 100%);

  --vex-global-surface:
    linear-gradient(145deg, rgba(20, 33, 49, .97), rgba(9, 16, 27, .98) 65%, rgba(7, 27, 36, .97));

  --vex-global-glass:
    linear-gradient(135deg, rgba(37, 57, 77, .91), rgba(13, 24, 38, .92) 55%, rgba(9, 43, 54, .90));
}

/* SATU BACKGROUND UNTUK SEMUA TAB */
.messenger.messenger {
  background: var(--vex-global-background) !important;
  background-color: #070b12 !important;
  background-attachment: fixed !important;
}

.messenger.messenger .messenger-shell,
.messenger.messenger .list-pane,
.messenger.messenger .conversation-pane {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(105, 163, 197, .12);
}

/* Header halaman dan header percakapan. */
.messenger .main-header,
.messenger .conversation-header {
  background: var(--vex-global-glass) !important;
  border-color: rgba(125, 190, 218, .16) !important;
  -webkit-backdrop-filter: blur(25px) saturate(175%);
  backdrop-filter: blur(25px) saturate(175%);
  box-shadow:
    0 8px 26px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.09);
}

/* UPDATES */
.messenger.messenger .status-feature,
.messenger.messenger .status-updates-wa {
  background: transparent !important;
  color: #f1f7fc;
}

.messenger .status-section-title,
.messenger .status-updates-heading {
  background: var(--vex-global-glass);
  border-color: rgba(125,190,218,.13);
}

/* TELEPON / CALL CENTER */
.messenger.messenger .vex-call-center,
.messenger.messenger .vex-call-center-page,
.messenger.messenger .vex-call-home {
  background: transparent !important;
  color: #f1f7fc;
}

/* Permukaan panel pada seluruh menu. */
.messenger .vex-call-card,
.messenger .vex-call-contact-list,
.messenger .vex-call-history,
.messenger .vex-call-empty {
  background: var(--vex-global-surface);
  border-color: rgba(125,190,218,.14);
}

/* NAVIGASI BAWAH: SEMUA TAB MENGGUNAKAN PILL YANG SAMA. */
.messenger .bottom-nav {
  border: 1px solid rgba(91, 192, 225, .25) !important;
  background:
    linear-gradient(135deg, rgba(7, 35, 53, .96), rgba(5, 23, 37, .95) 58%, rgba(4, 39, 48, .96)) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(160,220,245,.14),
    inset 0 -1px 0 rgba(0,190,220,.08) !important;
  -webkit-backdrop-filter: blur(28px) saturate(175%) !important;
  backdrop-filter: blur(28px) saturate(175%) !important;
}

/* Active pill selalu biru-cyan, tidak tergantung tab. */
.messenger .bottom-nav .nav-pill-indicator {
  border: 1px solid rgba(95, 215, 239, .30) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(27, 111, 184, .76), rgba(0, 176, 207, .43)) !important;
  box-shadow:
    0 4px 19px rgba(0, 142, 213, .19),
    inset 0 1px 0 rgba(205, 244, 255, .20),
    inset 0 -1px 0 rgba(0, 221, 239, .13) !important;
}

.messenger .bottom-nav .nav-item {
  color: #a9bacb !important;
}

.messenger .bottom-nav .nav-item.active,
.messenger .bottom-nav .nav-item.is-active,
.messenger .bottom-nav .nav-item[aria-current="page"] {
  color: #ffffff !important;
}

/* SEARCH: MAKSIMAL EMPAT HASIL TERLIHAT, SISANYA SCROLL. */
.messenger .list-pane .result-section {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  max-height: none !important;
  overflow: visible !important;
}

.messenger .vex-discovery-results-scroll {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-height: min(336px, 45dvh);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(75, 184, 219, .45) transparent;
  padding: 2px 3px 8px 0;
  -webkit-overflow-scrolling: touch;
}

.messenger .vex-discovery-results-scroll .vex-discovery-person {
  flex: 0 0 auto;
  min-height: 76px;
  box-sizing: border-box;
  border: 1px solid rgba(125, 190, 218, .13);
  border-radius: 15px;
  background: var(--vex-global-surface);
}

.messenger .vex-discovery-results-scroll::-webkit-scrollbar {
  width: 4px;
}

.messenger .vex-discovery-results-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(67, 172, 210, .45);
}

/* Bersihkan indikator titik yang mungkin tersisa melalui CSS. */
.messenger .pane-heading > .online-dot {
  display: none !important;
}

/* Responsif untuk layar kecil. */
@media (max-width: 600px) {
  .messenger .vex-discovery-results-scroll {
    max-height: min(336px, 43dvh);
  }

  .messenger .bottom-nav .nav-pill-indicator {
    border-radius: 999px !important;
  }
}


/* VEXAPP_CONTACT_SELECTION_ICON_V5 */
.messenger .vex-contact-pick .vex-contact-check {
  display: grid;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(144,178,205,.25);
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    rgba(22,40,58,.85),
    rgba(10,20,32,.95)
  );
  color: #9bb3c8;
  font-size: 0;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.messenger .vex-contact-pick .vex-contact-check::before {
  content: '+';
  font-size: 19px;
  font-weight: 450;
  line-height: 1;
}

.messenger .vex-contact-pick.is-selected {
  border-color: rgba(47,198,225,.45) !important;
  background: linear-gradient(
    110deg,
    rgba(20,93,150,.28),
    rgba(0,126,150,.17)
  ) !important;
}

.messenger .vex-contact-pick.is-selected .vex-contact-check {
  border-color: rgba(116,234,250,.65);
  background: linear-gradient(135deg, #247edc, #00b9c9);
  color: white;
  transform: scale(1.04);
  box-shadow:
    0 0 0 3px rgba(0,190,220,.10),
    0 4px 14px rgba(0,170,220,.23),
    inset 0 1px 0 rgba(255,255,255,.23);
}

.messenger .vex-contact-pick.is-selected .vex-contact-check::before {
  content: '✓';
  font-size: 15px;
  font-weight: 850;
}

.messenger .vex-contact-pick:active .vex-contact-check {
  transform: scale(.90);
}

@media (prefers-reduced-motion: reduce) {
  .messenger .vex-contact-pick .vex-contact-check {
    transition: none;
  }
}


/* VEXAPP_CONTACT_SELECTION_ICON_V8 */

.messenger .vex-contact-pick .vex-contact-check {
  display: inline-grid !important;
  flex: 0 0 31px !important;
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  box-sizing: border-box !important;
  place-items: center !important;
  border: 1px solid rgba(130,190,220,.28) !important;
  border-radius: 50% !important;
  color: transparent !important;
  background: linear-gradient(
    145deg,
    rgba(23,49,75,.96),
    rgba(8,23,39,.98)
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 3px 10px rgba(0,0,0,.18) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s cubic-bezier(.2,.8,.2,1) !important;
}

.messenger .vex-contact-pick .vex-contact-check::before {
  content: '+' !important;
  display: block;
  color: #a9d9f4;
  font-size: 21px;
  font-weight: 450;
  line-height: 1;
  transform: translateY(-1px);
}

.messenger .vex-contact-pick.is-selected .vex-contact-check {
  border-color: rgba(110,235,255,.85) !important;
  background: linear-gradient(
    135deg,
    #267fe9,
    #087fd0 45%,
    #00bacb
  ) !important;
  box-shadow:
    0 0 0 3px rgba(0,194,230,.11),
    0 4px 16px rgba(0,181,225,.27),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
  animation: vex-contact-select-pop-v8 .22s ease-out;
}

.messenger .vex-contact-pick.is-selected .vex-contact-check::before {
  content: '✓' !important;
  color: #fff;
  font-size: 16px;
  font-weight: 850;
}

.messenger .vex-contact-pick:active .vex-contact-check {
  transform: scale(.88);
}

@keyframes vex-contact-select-pop-v8 {
  0% { transform: scale(.78); }
  65% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .messenger .vex-contact-pick .vex-contact-check {
    animation: none !important;
    transition: none !important;
  }
}


/* VEXAPP_NAV_ANIMATION_CSS_V1 */

/* Semua ikon memiliki titik transformasi yang konsisten. */
.messenger .bottom-nav .nav-icon svg {
  transform-box: fill-box;
  transform-origin: center;
}

/* CHATS: efek pop */
.messenger .bottom-nav
.nav-icon[data-nav-animation="chat"] svg {
  animation: vex-nav-chat-pop-v1 440ms cubic-bezier(.2,.8,.25,1) both;
}

@keyframes vex-nav-chat-pop-v1 {
  0% {
    transform: scale(1);
  }
  38% {
    transform: scale(.72);
  }
  72% {
    transform: scale(1.19);
  }
  100% {
    transform: scale(1);
  }
}

/* UPDATES: rotasi melingkar */
.messenger .bottom-nav
.nav-icon[data-nav-animation="status"] svg {
  animation: vex-nav-status-spin-v1 520ms cubic-bezier(.2,.7,.25,1) both;
}

@keyframes vex-nav-status-spin-v1 {
  0% {
    transform: rotate(0deg) scale(.88);
  }
  65% {
    transform: rotate(300deg) scale(1.12);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* TELEPON: efek berdering */
.messenger .bottom-nav
.nav-icon[data-nav-animation="phone"] svg {
  animation: vex-nav-phone-ring-v1 580ms ease-in-out both;
}

@keyframes vex-nav-phone-ring-v1 {
  0% {
    transform: rotate(0deg) scale(1);
  }
  15% {
    transform: rotate(-19deg) scale(1.08);
  }
  30% {
    transform: rotate(16deg) scale(1.08);
  }
  45% {
    transform: rotate(-13deg);
  }
  60% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-6deg);
  }
  90% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* PENGATURAN: gear berputar */
.messenger .bottom-nav
.nav-icon[data-nav-animation="settings"] svg {
  animation: vex-nav-settings-spin-v1 480ms cubic-bezier(.2,.7,.25,1) both;
}

@keyframes vex-nav-settings-spin-v1 {
  0% {
    transform: rotate(-70deg) scale(.86);
  }
  70% {
    transform: rotate(195deg) scale(1.08);
  }
  100% {
    transform: rotate(180deg) scale(1);
  }
}

/* Hormati pengaturan Reduce Motion perangkat. */
@media (prefers-reduced-motion: reduce) {
  .messenger .bottom-nav .nav-icon svg {
    animation: none !important;
  }
}


/* VEXAPP_MIC_BUTTON_CIRCLE_FIX_V1 */

/* Paksa tombol microphone/send tetap berbentuk lingkaran. */
#root .messenger .message-composer
.chat-composer-controls > .chat-mic-send-button {
  display: grid !important;
  flex: 0 0 54px !important;

  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  aspect-ratio: 1 / 1 !important;
  align-self: center !important;
  place-items: center !important;

  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

#root .messenger .message-composer
.chat-composer-controls > .chat-mic-send-button svg {
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
}

#root .messenger .message-composer .chat-composer-controls {
  align-items: center !important;
}

@media (max-width: 380px) {
  #root .messenger .message-composer
  .chat-composer-controls > .chat-mic-send-button {
    flex-basis: 49px !important;
    width: 49px !important;
    min-width: 49px !important;
    max-width: 49px !important;
    height: 49px !important;
    min-height: 49px !important;
    max-height: 49px !important;
  }
}


/* VEXAPP_GLOBAL_FROSTED_HEADERS_V10 */

/*
 * Universal dark liquid glass.
 * Hanya mengubah permukaan visual, tidak mengubah layout/ukuran/posisi.
 */
.messenger header,
.messenger [role="banner"],
.messenger [class*="-header"],
.messenger [class^="header"],
.messenger [class*=" header"],
.messenger [class*="__header"],
.messenger [class*="_header"],
.messenger [class*="Header"],
.messenger .vps-section-heading {
  background:
    linear-gradient(
      112deg,
      rgba(2, 8, 18, .54) 0%,
      rgba(3, 17, 33, .46) 56%,
      rgba(0, 157, 193, .20) 100%
    ) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.88) !important;
  backdrop-filter:
    blur(36px) saturate(185%) brightness(.88) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .075) !important;
}

/* Override tema terang agar efek kaca tetap konsisten. */
.messenger[data-vex-theme="light"] header,
.messenger[data-vex-theme="light"] [role="banner"],
.messenger[data-vex-theme="light"] [class*="-header"],
.messenger[data-vex-theme="light"] [class^="header"],
.messenger[data-vex-theme="light"] [class*=" header"],
.messenger[data-vex-theme="light"] [class*="__header"],
.messenger[data-vex-theme="light"] [class*="_header"],
.messenger[data-vex-theme="light"] [class*="Header"],
.messenger[data-vex-theme="light"] .vps-section-heading {
  background:
    linear-gradient(
      112deg,
      rgba(2, 8, 18, .54) 0%,
      rgba(3, 17, 33, .46) 56%,
      rgba(0, 157, 193, .20) 100%
    ) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.88) !important;
  backdrop-filter:
    blur(36px) saturate(185%) brightness(.88) !important;
}
.vexeco {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  min-width: 0;
  color: var(--text-primary, #f5f7fa);
}

.vexeco-balance-card,
.vexeco-subscription-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 23px;
  overflow: hidden;
  border: 1px solid rgba(92, 173, 255, .2);
  border-radius: 19px;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(41, 151, 255, .20), transparent 58%),
    linear-gradient(140deg, rgba(22, 44, 68, .95), rgba(15, 23, 34, .98));
}

.vexeco-balance-card > strong {
  font-size: clamp(27px, 7vw, 36px);
  font-weight: 850;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.vexeco-eyebrow {
  color: #8dc9ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}

.vexeco-muted,
.vexeco-footnote {
  color: #9ba9b7;
  font-size: 12px;
  line-height: 1.6;
}

.vexeco-status {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}

.vexeco-status.active {
  color: #9bd1ff;
  background: rgba(50, 153, 255, .14);
  border: 1px solid rgba(80, 175, 255, .28);
}

.vexeco-status.inactive {
  color: #c1c6ce;
  background: rgba(150, 160, 170, .10);
  border: 1px solid rgba(150, 160, 170, .16);
}

.vexeco-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 17px;
  background: rgba(255, 255, 255, .025);
}

.vexeco-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vexeco-section-heading h3,
.vexeco-card h4 {
  margin: 0;
  color: #f4f7fb;
  font-size: 15px;
  font-weight: 800;
}

.vexeco-section-heading > span {
  color: #a6b1be;
  font-size: 11px;
  text-align: right;
}

.vexeco-card p {
  margin: 0;
  color: #aeb8c3;
  font-size: 12px;
  line-height: 1.65;
}

.vexeco-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vexeco-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #c8d2dc;
  font-size: 12px;
  font-weight: 650;
}

.vexeco-form input {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  outline: none;
  color: #f5f7fa;
  background: rgba(0, 0, 0, .17);
  font: inherit;
}

.vexeco-form input:focus {
  border-color: rgba(87, 174, 255, .75);
}

.vexeco-primary,
.vexeco-secondary {
  min-height: 43px;
  padding: 10px 15px;
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.vexeco-primary {
  color: #fff;
  background: linear-gradient(110deg, #267edc, #398fe9);
}

.vexeco-secondary {
  color: #a9d7ff;
  background: rgba(58, 149, 231, .15);
  border: 1px solid rgba(80, 167, 244, .24);
}

.vexeco-primary:disabled,
.vexeco-secondary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.vexeco-refresh,
.vexeco-purchase-row button {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 8px;
  color: #a9d7ff;
  background: rgba(255, 255, 255, .04);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.vexeco-code-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(64, 172, 255, .25);
  border-radius: 12px;
  background: rgba(42, 137, 210, .08);
}

.vexeco-code-result > span {
  color: #93caff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.vexeco-code-result code,
.vexeco-purchase-row code {
  overflow-wrap: anywhere;
  color: #f1f7ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
}

.vexeco-purchase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.vexeco-purchase-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}

.vexeco-purchase-row small {
  grid-column: 1 / -1;
  color: #8997a6;
  font-size: 10px;
}

.vexeco-transactions {
  display: flex;
  flex-direction: column;
}

.vexeco-transaction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.vexeco-transaction:last-child {
  border-bottom: 0;
}

.vexeco-transaction > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.vexeco-transaction strong {
  color: #e8edf3;
  font-size: 12px;
}

.vexeco-transaction small {
  color: #8e9ba9;
  font-size: 10px;
}

.vexeco-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
}

.vexeco-amount.positive {
  color: #69dba7;
}

.vexeco-amount.negative {
  color: #ff9b9b;
}

.vexeco-empty,
.vexeco-message {
  padding: 15px;
  color: #a0adba;
  font-size: 12px;
  text-align: center;
}

.vexeco-alert {
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
}

.vexeco-error {
  color: #ffb5b5;
  border: 1px solid rgba(255, 100, 100, .2);
  background: rgba(160, 45, 45, .12);
}

.vexeco-success {
  color: #9ce7bd;
  border: 1px solid rgba(85, 210, 145, .2);
  background: rgba(45, 150, 95, .11);
}

.vexeco-subscription-card {
  align-items: flex-start;
  border-color: rgba(70, 157, 255, .25);
}

.vexeco-subscription-symbol {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(100, 184, 255, .35);
  border-radius: 17px;
  color: #a7d8ff;
  background: rgba(53, 145, 235, .17);
  font-size: 29px;
}

.vexeco-subscription-card h2 {
  margin: 0;
  color: #f5f8fc;
  font-size: 22px;
  font-weight: 850;
}

.vexeco-subscription-card > strong {
  color: #b5dcff;
  font-size: 26px;
}

.vexeco-subscription-card > strong small {
  color: #9ba9b7;
  font-size: 12px;
  font-weight: 500;
}

.vexeco-subscription-card p {
  margin: 0;
  color: #aab8c8;
  font-size: 12px;
  line-height: 1.65;
}

.vexeco-date {
  display: block;
  margin-top: 6px;
  color: #dcecff;
  font-size: 13px;
}

.vexeco-footnote {
  margin: 0;
  padding: 0 4px;
}

@media (max-width: 420px) {
  .vexeco-balance-card,
  .vexeco-subscription-card {
    padding: 18px;
  }

  .vexeco-card {
    padding: 14px;
  }

  .vexeco-transaction {
    align-items: flex-start;
  }
}


/* VEX_ECONOMY_GLASS_POLISH_V1 */
.vexeco {
  gap: 16px;
}

.vexeco-notice-area:empty {
  display: none;
}

.vexeco-balance-card,
.vexeco-subscription-card {
  border-color: rgba(100, 190, 245, .25);
  background:
    radial-gradient(ellipse at 92% 0%, rgba(58, 164, 255, .20), transparent 58%),
    linear-gradient(145deg, rgba(13, 39, 59, .76), rgba(10, 21, 34, .68));
  -webkit-backdrop-filter: blur(23px) saturate(145%);
  backdrop-filter: blur(23px) saturate(145%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255,255,255,.09);
}

.vexeco-card {
  border-color: rgba(140, 190, 220, .13);
  background: rgba(9, 23, 35, .42);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.vexeco-section-heading {
  flex-wrap: wrap;
}

.vexeco-form input {
  box-sizing: border-box;
  border-color: rgba(145, 190, 220, .20);
  background: rgba(3, 12, 22, .30);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.vexeco-form input:focus {
  border-color: rgba(83, 177, 255, .82);
  background: rgba(5, 20, 34, .56);
  box-shadow: 0 0 0 3px rgba(55, 145, 225, .13);
}

.vexeco-primary {
  box-shadow: 0 7px 18px rgba(34, 125, 220, .16), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.vexeco-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(34, 125, 220, .22), inset 0 1px 0 rgba(255,255,255,.18);
}

.vexeco-refresh:disabled,
.vexeco-primary:disabled {
  opacity: .52;
}

.vexeco-balance-hint {
  padding: 10px 12px;
  border: 1px solid rgba(255, 190, 95, .19);
  border-radius: 10px;
  color: #f0c98f !important;
  background: rgba(150, 95, 25, .10);
}

.vexeco-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 115px;
  color: #b8c9d8;
  font-size: 13px;
}

.vexeco-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #69c5ff;
  box-shadow: 0 0 14px rgba(75, 175, 255, .55);
  animation: vexeco-pulse 1.15s ease-in-out infinite alternate;
}

@keyframes vexeco-pulse {
  from { opacity: .45; transform: scale(.78); }
  to { opacity: 1; transform: scale(1.12); }
}

@media (max-width: 420px) {
  .vexeco-balance-card,
  .vexeco-subscription-card {
    padding: 17px;
    border-radius: 17px;
  }

  .vexeco-transaction {
    gap: 8px;
  }

  .vexeco-amount {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vexeco-loading-dot { animation: none; }
  .vexeco-primary { transition: none; }
}
.vex-subscription-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-inline-start: 5px;
  vertical-align: -2px;
  border: 1px solid rgba(90, 190, 255, .48);
  border-radius: 50%;
  color: #a9ddff;
  background: linear-gradient(145deg, rgba(40, 145, 235, .34), rgba(26, 92, 170, .22));
  box-shadow: 0 0 12px rgba(45, 155, 255, .16), inset 0 1px 0 rgba(255,255,255,.18);
}

.vex-subscription-badge svg {
  display: block;
}
/* VEXAPP_WHATSAPP_SETTINGS_PAGE_V1 */

.vps-settings-page,
.vps-settings-page * {
  box-sizing: border-box;
}

.vps-settings-page {
  display: block;
  width: 100%;
  max-width: 780px;
  min-width: 0;
  margin: 0 auto;
  padding: 4px 2px 35px;
  color: #f2f2f2;
}

.vps-home-header {
  padding: 18px 4px 13px;
}

.vps-eyebrow {
  color: #a2a2a2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.vps-home-header h1 {
  margin: 5px 0 0;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.035em;
}

.vps-profile-card {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-width: 0;
  margin: 5px 0 19px;
  padding: 15px 10px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  color: #fff;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.vps-profile-card:disabled {
  cursor: default;
  opacity: .8;
}

.vps-profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.vps-profile-avatar {
  display: grid;
  flex: 0 0 63px;
  width: 63px;
  height: 63px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: #fff;
  background: #292929;
  font-size: 25px;
  font-weight: 750;
}

.vps-profile-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vps-profile-copy strong {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vps-profile-copy small {
  overflow: hidden;
  color: #a1a1a1;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vps-profile-hint {
  color: #888;
  font-size: 11px;
}

.vps-verified {
  display: inline-grid;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2586ed;
  font-size: 12px;
}

.vps-profile-card > svg {
  flex: 0 0 18px;
  color: #777;
}

.vps-category-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.vps-category-row {
  display: flex;
  align-items: center;
  gap: 17px;
  width: 100%;
  min-width: 0;
  min-height: 77px;
  padding: 12px 9px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.075);
  border-radius: 0;
  color: #f4f4f4;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, transform .16s ease;
}

.vps-category-row:active {
  background: rgba(255,255,255,.055);
  transform: scale(.992);
}

.vps-category-icon {
  display: grid;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  place-items: center;
  color: #9ca3a8;
}

.vps-category-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.vps-category-copy strong {
  color: #f3f3f3;
  font-size: 15px;
  font-weight: 730;
  line-height: 1.3;
}

.vps-category-copy small {
  color: #94999d;
  font-size: 12px;
  line-height: 1.45;
}

.vps-category-row > svg {
  flex: 0 0 17px;
  color: #777e82;
}

.vps-home-sync {
  margin: 18px 5px 0;
  color: #858b90;
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.vps-detail-view {
  width: 100%;
  min-width: 0;
}

.vps-detail-header {
  position: sticky;
  top: -5px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 0 0 17px;
  padding: 16px 5px 15px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: #0b1013;
}

.vps-back-button {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #f4f4f4;
  background: transparent;
  cursor: pointer;
}

.vps-detail-title {
  flex: 1 1 auto;
  min-width: 0;
}

.vps-detail-title > span {
  color: #8e969a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.vps-detail-title h1 {
  margin: 4px 0 3px;
  color: #fff;
  font-size: 22px;
  font-weight: 780;
}

.vps-detail-title p {
  margin: 0;
  color: #92999e;
  font-size: 12px;
  line-height: 1.5;
}

.vps-detail-content {
  min-width: 0;
  padding: 0 5px 28px;
}

.vps-info-card,
.vps-warning-card {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: #14191d;
}

.vps-info-card h3,
.vps-warning-card strong {
  display: block;
  margin: 0 0 9px;
  color: #f4f4f4;
  font-size: 14px;
  font-weight: 750;
}

.vps-info-card p,
.vps-warning-card p {
  margin: 0 0 11px;
  color: #a4aaae;
  font-size: 12px;
  line-height: 1.65;
}

.vps-info-card p:last-child,
.vps-warning-card p:last-child {
  margin-bottom: 0;
}

.vps-warning-card {
  border-color: rgba(229,177,90,.30);
  background: rgba(94,68,28,.18);
}

.vps-warning-card strong {
  color: #f5cd8c;
}

.vps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  min-width: 0;
  padding: 16px 3px;
  border-bottom: 1px solid rgba(255,255,255,.085);
}

.vps-row-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.vps-row-copy strong {
  color: #eee;
  font-size: 13px;
  font-weight: 700;
}

.vps-row-copy p {
  margin: 5px 0 0;
  color: #92999d;
  font-size: 11px;
  line-height: 1.5;
}

.vps-row select,
.vps-form input {
  width: 155px;
  max-width: 45%;
  min-width: 0;
  min-height: 41px;
  padding: 9px 10px;
  border: 1px solid #41484c;
  border-radius: 10px;
  color: #f0f0f0;
  background: #20262a;
  font: inherit;
  font-size: 12px;
}

.vps-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.vps-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #d8dcde;
  font-size: 12px;
  font-weight: 650;
}

.vps-form input {
  width: 100%;
  max-width: 100%;
  min-height: 45px;
}

.vps-primary-button,
.vps-secondary-button,
.vps-danger-button,
.vps-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 41px;
  margin: 7px 7px 0 0;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}

.vps-primary-button {
  border-color: rgba(110,155,255,.38);
  color: #fff;
  background: #426de0;
}

.vps-secondary-button,
.vps-file-button {
  border-color: #454b50;
  color: #e5e8ea;
  background: #252b30;
}

.vps-danger-button {
  border-color: rgba(232,102,121,.34);
  color: #fff;
  background: #71313e;
}

.vps-primary-button:disabled,
.vps-danger-button:disabled {
  opacity: .55;
  cursor: default;
}

.vps-file-button {
  position: relative;
  overflow: hidden;
}

.vps-file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.vps-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}

.vps-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.vps-toggle-track {
  position: relative;
  width: 43px;
  height: 25px;
  border: 1px solid #535b60;
  border-radius: 99px;
  background: #333a3f;
  transition: background .18s ease;
}

.vps-toggle-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #e2e5e7;
  content: "";
  transition: transform .18s ease;
}

.vps-toggle input:checked + .vps-toggle-track {
  border-color: #698df5;
  background: #547af0;
}

.vps-toggle input:checked + .vps-toggle-track::after {
  transform: translateX(18px);
  background: #fff;
}

.vps-toggle input:focus-visible + .vps-toggle-track {
  outline: 2px solid #90aaff;
  outline-offset: 3px;
}

.vps-permission {
  margin: 12px 0;
  color: #a9c5ff !important;
}

.vps-storage-result,
.vps-notice {
  margin: 13px 0 0;
  padding: 11px;
  border-radius: 10px;
  color: #c9d8ff;
  background: rgba(82,117,210,.16);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.vps-settings-page button:focus-visible,
.vps-settings-page select:focus-visible,
.vps-settings-page input:focus-visible {
  outline: 2px solid #8ba7ff;
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .vps-settings-page {
    padding: 2px 1px 32px;
  }

  .vps-home-header {
    padding: 15px 6px 12px;
  }

  .vps-home-header h1 {
    font-size: 24px;
  }

  .vps-profile-card {
    gap: 13px;
    padding: 14px 7px;
  }

  .vps-profile-avatar {
    flex-basis: 61px;
    width: 61px;
    height: 61px;
  }

  .vps-category-row {
    min-height: 75px;
    gap: 14px;
    padding: 11px 5px;
  }

  .vps-category-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
  }

  .vps-category-copy strong {
    font-size: 14px;
  }

  .vps-category-copy small {
    font-size: 11px;
  }

  .vps-detail-header {
    padding: 13px 2px;
  }

  .vps-detail-content {
    padding-right: 2px;
    padding-left: 2px;
  }

  .vps-info-card,
  .vps-warning-card {
    padding: 14px;
  }

  .vps-row {
    gap: 9px;
  }

  .vps-row select {
    width: 132px;
    max-width: 43%;
    font-size: 11px;
  }

  .vps-form .vps-primary-button {
    width: 100%;
  }

  .vps-primary-button,
  .vps-secondary-button,
  .vps-danger-button,
  .vps-file-button {
    min-height: 42px;
  }
}

.messenger[data-vex-theme="light"] .vps-settings-page {
  color: #17212a;
}

.messenger[data-vex-theme="light"] .vps-home-header h1,
.messenger[data-vex-theme="light"] .vps-profile-copy strong,
.messenger[data-vex-theme="light"] .vps-category-copy strong,
.messenger[data-vex-theme="light"] .vps-detail-title h1 {
  color: #17212a;
}

.messenger[data-vex-theme="light"] .vps-profile-card,
.messenger[data-vex-theme="light"] .vps-category-row {
  color: #17212a;
  border-color: rgba(20,35,50,.12);
}

.messenger[data-vex-theme="light"] .vps-category-copy small,
.messenger[data-vex-theme="light"] .vps-profile-copy small,
.messenger[data-vex-theme="light"] .vps-profile-hint {
  color: #68737c;
}

.messenger[data-vex-theme="light"] .vps-detail-header {
  background: #f7f9fc;
}

.messenger[data-vex-theme="light"] .vps-info-card,
.messenger[data-vex-theme="light"] .vps-warning-card {
  background: #fff;
  border-color: #dce3e9;
}

.messenger[data-vex-theme="light"] .vps-info-card h3,
.messenger[data-vex-theme="light"] .vps-row-copy strong {
  color: #17212a;
}

.messenger[data-vex-theme="light"] .vps-info-card p,
.messenger[data-vex-theme="light"] .vps-row-copy p {
  color: #65717a;
}



/* ============================================================
   VEXAPP_SETTINGS_LIQUID_GLASS_HEADER_V1
   iOS-inspired frosted glass detail header
   ============================================================ */

.vps-detail-header {
  position: sticky !important;
  top: 7px !important;
  z-index: 30 !important;

  display: flex !important;
  align-items: center !important;
  gap: 14px !important;

  width: calc(100% - 4px) !important;
  min-width: 0 !important;
  margin: 7px auto 20px !important;
  padding: 13px 15px !important;

  overflow: hidden !important;
  isolation: isolate !important;

  border: 1px solid rgba(220, 242, 255, 0.17) !important;
  border-radius: 23px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.095),
      rgba(255, 255, 255, 0.025) 48%,
      rgba(110, 175, 210, 0.055)
    ) !important;

  background-color: rgba(13, 23, 31, 0.43) !important;

  -webkit-backdrop-filter:
    blur(30px) saturate(185%) brightness(1.08) !important;
  backdrop-filter:
    blur(30px) saturate(185%) brightness(1.08) !important;

  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(190, 225, 245, 0.07) !important;

  -webkit-tap-highlight-color: transparent;
}

/* Refleksi cahaya di permukaan kaca. */
.vps-detail-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;

  background:
    radial-gradient(
      ellipse at 12% 0%,
      rgba(255, 255, 255, 0.17),
      transparent 48%
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.045),
      transparent 42%,
      rgba(115, 194, 235, 0.055)
    );

  opacity: 0.95;
}

/* Tombol kembali menjadi glass button. */
.vps-detail-header .vps-back-button {
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  flex: 0 0 42px !important;

  width: 42px !important;
  height: 42px !important;

  place-items: center !important;
  padding: 0 !important;

  border: 1px solid rgba(220, 242, 255, 0.17) !important;
  border-radius: 15px !important;

  color: #f5fbff !important;

  background: rgba(255, 255, 255, 0.075) !important;
  background-color: rgba(255, 255, 255, 0.075) !important;

  -webkit-backdrop-filter: blur(16px) saturate(165%);
  backdrop-filter: blur(16px) saturate(165%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 12px rgba(0, 0, 0, 0.10) !important;

  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease !important;
}

.vps-detail-header .vps-back-button:active {
  transform: scale(0.92) !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Area judul tetap sejajar dan tidak terpotong. */
.vps-detail-header .vps-detail-title {
  position: relative;
  z-index: 2;

  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 1px 0 !important;
}

.vps-detail-header .vps-detail-title > span {
  display: inline-flex !important;
  align-items: center !important;

  width: fit-content !important;
  max-width: 100% !important;
  margin-bottom: 3px !important;
  padding: 4px 8px !important;

  border: 1px solid rgba(220, 242, 255, 0.12) !important;
  border-radius: 999px !important;

  color: rgba(214, 232, 244, 0.72) !important;
  background: rgba(255, 255, 255, 0.055) !important;

  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
}

.vps-detail-header .vps-detail-title h1 {
  margin: 2px 0 3px !important;

  color: #f8fbff !important;
  font-size: clamp(19px, 4.8vw, 23px) !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.035em !important;
}

.vps-detail-header .vps-detail-title p {
  margin: 0 !important;

  color: rgba(222, 232, 239, 0.66) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

/* Light theme */
.messenger[data-vex-theme="light"] .vps-detail-header {
  border-color: rgba(55, 85, 110, 0.16) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.76),
      rgba(255, 255, 255, 0.43)
    ) !important;

  background-color: rgba(245, 250, 255, 0.52) !important;

  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;

  box-shadow:
    0 12px 28px rgba(35, 65, 90, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.messenger[data-vex-theme="light"] .vps-detail-header .vps-back-button {
  color: #243747 !important;
  border-color: rgba(60, 90, 115, 0.14) !important;
  background: rgba(255, 255, 255, 0.46) !important;
}

.messenger[data-vex-theme="light"] .vps-detail-header .vps-detail-title > span {
  color: #668092 !important;
  border-color: rgba(70, 100, 125, 0.12) !important;
  background: rgba(255, 255, 255, 0.42) !important;
}

.messenger[data-vex-theme="light"] .vps-detail-header .vps-detail-title h1 {
  color: #172b3b !important;
}

.messenger[data-vex-theme="light"] .vps-detail-header .vps-detail-title p {
  color: #637987 !important;
}

/* Mobile tuning */
@media (max-width: 680px) {
  .vps-detail-header {
    top: 5px !important;
    width: calc(100% - 2px) !important;
    gap: 12px !important;
    margin: 5px auto 17px !important;
    padding: 12px 12px !important;

    border-radius: 21px !important;

    -webkit-backdrop-filter:
      blur(28px) saturate(185%) brightness(1.08) !important;
    backdrop-filter:
      blur(28px) saturate(185%) brightness(1.08) !important;
  }

  .vps-detail-header .vps-back-button {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  .vps-detail-header .vps-detail-title h1 {
    font-size: 20px !important;
  }

  .vps-detail-header .vps-detail-title p {
    font-size: 10px !important;
  }
}

/* Respect accessibility preferences. */
@media (prefers-reduced-motion: reduce) {
  .vps-detail-header .vps-back-button {
    transition: none !important;
  }
}

/* VEXAPP_SETTINGS_LIQUID_GLASS_HEADER_V1_END */



/* VEXAPP_HELP_CENTER_CSS_V1 */

.vps-help-center {
  display: grid;
  gap: 18px;
  padding-bottom: 28px;
}

.vph-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 19px;
  border: 1px solid rgba(63,184,255,.25);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0%,rgba(34,211,238,.2),transparent 38%),
    linear-gradient(125deg,#102c58,#071c34 65%,#062b39);
}

.vph-hero-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(103,232,249,.35);
  border-radius: 14px;
  background: linear-gradient(145deg,#2563eb,#0891b2);
  color: white;
  font-size: 22px;
}

.vph-hero > span,
.vph-section-title > div > span {
  color: #67e8f9;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.6px;
}

.vph-hero h2 {
  margin: 7px 0 8px;
  color: #f2fbff;
  font-size: clamp(23px,5vw,29px);
}

.vph-hero p {
  max-width: 420px;
  margin: 0;
  color: #b7d7ed;
  font-size: 12px;
  line-height: 1.7;
}

.vph-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 17px;
}

.vph-hero-pills span {
  padding: 6px 9px;
  border: 1px solid rgba(103,232,249,.2);
  border-radius: 20px;
  background: rgba(4,18,38,.35);
  color: #b8e8f4;
  font-size: 9px;
}

.vph-section {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(92,157,204,.15);
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(15,29,47,.94),rgba(8,18,30,.97));
}

.vph-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.vph-section-title h3 {
  margin: 5px 0 4px;
  color: #edf8ff;
  font-size: 15px;
}

.vph-section-title p {
  margin: 0;
  color: #8297aa;
  font-size: 10px;
  line-height: 1.6;
}

.vph-category-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}

.vph-category {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(92,157,204,.15);
  border-radius: 13px;
  background: linear-gradient(140deg,#10243b,#0a1a2b);
  color: #e9f7ff;
  text-align: left;
}

.vph-category-active,
.vph-category:hover {
  border-color: rgba(34,211,238,.48);
  background: linear-gradient(135deg,rgba(37,99,235,.24),rgba(6,182,212,.12));
}

.vph-category-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(103,232,249,.2);
  border-radius: 10px;
  background: rgba(37,99,235,.2);
  color: #67e8f9;
  font-size: 16px;
}

.vph-category strong { color: #e8f6ff; font-size: 11px; }
.vph-category small { color: #849cb4; font-size: 9px; line-height: 1.5; }

.vph-search {
  margin-bottom: 10px;
  border-color: rgba(103,170,216,.2) !important;
  background: #071626 !important;
}

.vph-faq-list { display: grid; gap: 8px; }

.vph-faq {
  padding: 12px;
  border: 1px solid rgba(92,157,204,.13);
  border-radius: 11px;
  background: rgba(6,19,33,.7);
}

.vph-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #deefff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.vph-faq summary::-webkit-details-marker { display: none; }
.vph-faq-arrow { color: #67e8f9; }

.vph-faq p {
  margin: 10px 0 0;
  color: #94abc0;
  font-size: 10px;
  line-height: 1.8;
}

.vph-form { display: grid; gap: 13px; }

.vph-form label {
  display: grid;
  gap: 7px;
  color: #bfd2e4;
  font-size: 11px;
  font-weight: 650;
}

.vph-form label > small {
  color: #6e8ba5;
  font-size: 9px;
  text-align: right;
}

.vph-form input,
.vph-form textarea,
.vph-form select,
.vph-reply-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(103,170,216,.2);
  border-radius: 10px;
  background: #071626;
  color: #eaf6ff;
  font: inherit;
  font-size: 11px;
  outline: none;
}

.vph-form textarea,
.vph-reply-form textarea {
  resize: vertical;
  line-height: 1.7;
}

.vph-form input:focus,
.vph-form textarea:focus,
.vph-form select:focus,
.vph-reply-form textarea:focus {
  border-color: rgba(34,211,238,.58);
  box-shadow: 0 0 0 3px rgba(34,211,238,.08);
}

.vph-submit {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(103,232,249,.28);
  border-radius: 11px;
  background: linear-gradient(110deg,#2563eb,#087fbd 58%,#0891b2);
  color: white;
  font-weight: 750;
}

.vph-info {
  padding: 12px;
  border: 1px solid rgba(34,211,238,.2);
  border-radius: 10px;
  background: rgba(8,145,178,.1);
  color: #a5eaf5;
  font-size: 10px;
  line-height: 1.7;
}

.vph-ticket-list { display: grid; gap: 8px; }

.vph-ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(92,157,204,.15);
  border-radius: 11px;
  background: #0a1a2b;
  color: #e9f6ff;
  text-align: left;
}

.vph-ticket-active {
  border-color: rgba(34,211,238,.48);
  background: linear-gradient(115deg,rgba(37,99,235,.2),rgba(6,182,212,.1));
}

.vph-ticket-main { display: grid; min-width: 0; gap: 6px; }
.vph-ticket-main strong { overflow-wrap: anywhere; font-size: 11px; }
.vph-ticket-main small { color: #7f9ab4; font-size: 9px; }

.vph-status {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid rgba(103,178,220,.2);
  border-radius: 7px;
  color: #9cc5e2;
  font-size: 8px;
  font-weight: 800;
}

.vph-status-new { color: #67e8f9; }
.vph-status-in_review { color: #93c5fd; }
.vph-status-waiting_user { color: #fcd34d; }
.vph-status-resolved { color: #6ee7b7; }
.vph-status-rejected { color: #fca5a5; }

.vph-empty {
  padding: 20px 10px;
  color: #8199b1;
  font-size: 10px;
  line-height: 1.7;
  text-align: center;
}

.vph-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding: 12px 0;
}

.vph-message {
  width: fit-content;
  max-width: 88%;
  padding: 11px;
  border: 1px solid rgba(103,170,216,.17);
  border-radius: 12px 12px 12px 4px;
  background: #10243a;
}

.vph-message-user {
  align-self: flex-end;
  border-color: rgba(34,211,238,.23);
  border-radius: 12px 12px 4px 12px;
  background: linear-gradient(135deg,rgba(37,99,235,.25),rgba(6,182,212,.15));
}

.vph-message > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 7px;
}

.vph-message strong { color: #9fe9f3; font-size: 9px; }
.vph-message time { color: #7893ad; font-size: 8px; }

.vph-message p {
  margin: 0;
  color: #e2f1fc;
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.vph-reply-form { display: grid; gap: 9px; }
.vph-reply-form button { justify-self: end; min-width: 130px; }

.vph-security-note {
  padding: 14px;
  border: 1px solid rgba(34,211,238,.17);
  border-radius: 12px;
  background: rgba(8,35,49,.65);
}

.vph-security-note strong { color: #8de9f4; font-size: 11px; }

.vph-security-note p {
  margin: 6px 0 0;
  color: #8da8bd;
  font-size: 10px;
  line-height: 1.7;
}

@media (max-width: 480px) {
  .vph-hero { padding: 19px 15px; }
  .vph-section { padding: 13px; }
  .vph-category-grid { gap: 7px; }
  .vph-category { padding: 10px; }
  .vph-ticket { align-items: flex-start; }
  .vph-status { white-space: nowrap; }
  .vph-message { max-width: 94%; }
}


/* VEXAPP_SETTINGS_GLASS_MOTION_V2 */

/* Header utama: dark glass dengan warna biru-cyan yang tetap terlihat */
.vps-header {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(
      112deg,
      rgba(2, 7, 15, .95) 0%,
      rgba(3, 16, 30, .92) 58%,
      rgba(0, 181, 217, .20) 100%
    ) !important;
  border-bottom: 1px solid rgba(89, 224, 255, .22) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .055);
}

/* Judul kategori seperti Privasi, Chat, dan Notifikasi */
.vps-section-heading {
  position: relative;
  isolation: isolate;
  padding: 12px 14px !important;
  border: 1px solid rgba(82, 216, 255, .16) !important;
  border-radius: 16px;
  background:
    linear-gradient(
      115deg,
      rgba(2, 8, 17, .94),
      rgba(4, 19, 34, .91) 62%,
      rgba(0, 190, 220, .17)
    ) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 9px 24px rgba(0, 0, 0, .23),
    inset 0 1px 0 rgba(255, 255, 255, .055);
}

.vps-section-heading h3 {
  color: #e6faff;
  text-shadow: 0 0 16px rgba(0, 207, 255, .12);
}

.vps-section-heading .vps-sync-status {
  color: rgba(191, 231, 244, .72);
}

/* Animasi pergantian panel Pengaturan */
.vps-content {
  transform-origin: top center;
  animation: vexSettingsPanelEnterV2 .42s cubic-bezier(.2, .8, .2, 1) both;
}

.vps-nav-item {
  transition:
    transform .22s cubic-bezier(.2, .8, .2, 1),
    border-color .24s ease,
    background .24s ease,
    box-shadow .26s ease;
  -webkit-tap-highlight-color: transparent;
}

.vps-nav-item:active {
  transform: scale(.965);
}

.vps-nav-item.is-active {
  animation: vexSettingsTabSelectV2 .40s cubic-bezier(.2, 1.35, .35, 1) both;
  border-color: rgba(64, 221, 255, .36) !important;
  box-shadow:
    0 0 20px rgba(0, 194, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.vps-nav-item.is-active .vps-initials {
  animation: vexSettingsInitialPopV2 .38s cubic-bezier(.2, 1.4, .35, 1) both;
}

@keyframes vexSettingsPanelEnterV2 {
  0% {
    opacity: 0;
    transform: translate3d(12px, 7px, 0) scale(.988);
    filter: blur(4px);
  }
  65% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes vexSettingsTabSelectV2 {
  0% { transform: scale(.96) translateX(-3px); }
  58% { transform: scale(1.025) translateX(1px); }
  100% { transform: scale(1) translateX(0); }
}

@keyframes vexSettingsInitialPopV2 {
  0% { transform: scale(.78) rotate(-9deg); }
  70% { transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .vps-content,
  .vps-nav-item.is-active,
  .vps-nav-item.is-active .vps-initials {
    animation: none !important;
    transition: none !important;
  }
}


/* VEXAPP_SETTINGS_DARK_GLASS_V3 */

/* Header modal Pengaturan */
.vps-dialog > .vps-header,
.vps-header {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  background:
    linear-gradient(
      112deg,
      rgba(2, 7, 16, .96) 0%,
      rgba(3, 18, 34, .94) 58%,
      rgba(0, 177, 215, .24) 100%
    ) !important;
  border-bottom: 1px solid rgba(73, 219, 255, .24) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

/* Header bagian Privasi, Chat, Akun, dan kategori lainnya */
.vps-content .vps-section-heading {
  position: relative;
  z-index: 2;
  isolation: isolate;
  padding: 13px 15px !important;
  margin-bottom: 17px;
  border: 1px solid rgba(70, 218, 255, .19) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(
      115deg,
      rgba(2, 7, 16, .96) 0%,
      rgba(3, 17, 32, .94) 62%,
      rgba(0, 184, 220, .20) 100%
    ) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
  backdrop-filter: blur(22px) saturate(155%) !important;
  box-shadow:
    0 9px 25px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.vps-section-heading h3 {
  color: #e6faff !important;
  text-shadow: 0 0 17px rgba(0, 207, 255, .15);
}

.vps-section-heading .vps-sync-status {
  color: rgba(194, 235, 247, .76) !important;
}


/* VEXAPP_SETTINGS_TAB_MOTION_V3 */

.vps-content {
  transform-origin: top center;
}

.vps-content--account {
  animation: vexSettingsAccountIn .42s cubic-bezier(.2,.8,.2,1) both;
}
.vps-content--privacy {
  animation: vexSettingsPrivacyIn .46s cubic-bezier(.2,.8,.2,1) both;
}
.vps-content--personalize {
  animation: vexSettingsPersonalizeIn .44s cubic-bezier(.2,.8,.2,1) both;
}
.vps-content--chat {
  animation: vexSettingsChatIn .42s cubic-bezier(.2,.8,.2,1) both;
}
.vps-content--notifications {
  animation: vexSettingsNotifyIn .44s cubic-bezier(.2,.8,.2,1) both;
}
.vps-content--data,
.vps-content--language,
.vps-content--about {
  animation: vexSettingsGeneralIn .42s cubic-bezier(.2,.8,.2,1) both;
}

.vps-nav-item {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}

.vps-nav-item:active {
  transform: scale(.95);
}

.vps-nav-item.is-active {
  animation: vexSettingsButtonPop .38s cubic-bezier(.2,1.4,.35,1) both;
  border-color: rgba(66, 221, 255, .4) !important;
  box-shadow:
    0 0 20px rgba(0, 194, 255, .14),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.vps-nav-item.is-active .vps-initials {
  animation: vexSettingsIconPop .4s cubic-bezier(.2,1.4,.35,1) both;
}

@keyframes vexSettingsAccountIn {
  from { opacity: 0; transform: translateX(-13px) scale(.985); filter: blur(4px); }
  to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes vexSettingsPrivacyIn {
  from { opacity: 0; transform: translateX(17px); clip-path: inset(0 0 0 18%); }
  to { opacity: 1; transform: translateX(0); clip-path: inset(0); }
}
@keyframes vexSettingsPersonalizeIn {
  from { opacity: 0; transform: translateY(13px) scale(.98); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes vexSettingsChatIn {
  from { opacity: 0; transform: scale(.965); filter: blur(5px); }
  70% { opacity: 1; transform: scale(1.008); filter: blur(0); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes vexSettingsNotifyIn {
  from { opacity: 0; transform: translateY(-10px); }
  65% { opacity: 1; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vexSettingsGeneralIn {
  from { opacity: 0; transform: translateY(9px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vexSettingsButtonPop {
  0% { transform: scale(.96); }
  65% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes vexSettingsIconPop {
  0% { transform: scale(.78) rotate(-10deg); }
  70% { transform: scale(1.13) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .vps-content,
  .vps-nav-item,
  .vps-nav-item.is-active,
  .vps-nav-item.is-active .vps-initials {
    animation: none !important;
    transition: none !important;
  }
}


/* VEXAPP_SETTINGS_REAL_DETAIL_GLASS_V6 */

/* Header yang benar-benar tampil saat membuka Privasi/Akun/Chat */
.vps-detail-view > .vps-detail-header,
.vps-detail-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  isolation: isolate;
  background:
    linear-gradient(
      112deg,
      rgba(2, 8, 17, .76) 0%,
      rgba(3, 18, 34, .72) 58%,
      rgba(0, 175, 215, .20) 100%
    ) !important;
  border-bottom: 1px solid rgba(79, 218, 255, .24) !important;
  -webkit-backdrop-filter: blur(30px) saturate(165%) brightness(.86) !important;
  backdrop-filter: blur(30px) saturate(165%) brightness(.86) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.vps-detail-header h1,
.vps-detail-header h2,
.vps-detail-header h3,
.vps-detail-header strong {
  color: #e9faff !important;
}

.vps-detail-header p,
.vps-detail-header small {
  color: rgba(191, 226, 241, .78) !important;
}

.vps-detail-header .vps-back-button {
  border-color: rgba(83, 215, 255, .22) !important;
  background: rgba(3, 19, 34, .54) !important;
  color: #c9f5ff !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Help Center: pintasan ringkas */
.vph-shortcut-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 4px;
}

.vph-shortcut-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid rgba(75, 211, 247, .20);
  border-radius: 14px;
  color: #e9faff;
  text-align: left;
  background:
    linear-gradient(
      135deg,
      rgba(3, 10, 21, .88),
      rgba(4, 27, 46, .82) 65%,
      rgba(0, 172, 215, .16)
    );
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
  box-shadow:
    0 7px 18px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}

.vph-shortcut-menu button:active {
  transform: scale(.97);
}

.vph-shortcut-menu button > span:nth-child(2) {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.vph-shortcut-menu strong {
  color: #e9faff;
  font-size: 12px;
}

.vph-shortcut-menu small {
  color: #9dbbca;
  font-size: 10px;
  line-height: 1.35;
}

.vph-shortcut-icon {
  display: grid;
  flex: 0 0 33px;
  width: 33px;
  height: 33px;
  place-items: center;
  border: 1px solid rgba(75, 217, 255, .25);
  border-radius: 10px;
  color: #91edff;
  background: rgba(0, 188, 229, .13);
  font-size: 18px;
  font-weight: 800;
}

.vph-shortcut-arrow {
  color: #75dff5;
  font-size: 21px;
}

/* Animasi ketika membuka kategori Pengaturan */
.vps-detail-view[data-category="account"] {
  animation: vexDetailAccountV6 .38s ease both;
}

.vps-detail-view[data-category="privacy"] {
  animation: vexDetailPrivacyV6 .42s cubic-bezier(.2,.8,.2,1) both;
}

.vps-detail-view[data-category="chat"] {
  animation: vexDetailChatV6 .4s cubic-bezier(.2,.8,.2,1) both;
}

.vps-detail-view[data-category="help-center"] {
  animation: vexDetailHelpV6 .44s cubic-bezier(.2,.8,.2,1) both;
}

.vps-detail-view[data-category="personalize"],
.vps-detail-view[data-category="notifications"],
.vps-detail-view[data-category="data"],
.vps-detail-view[data-category="accessibility"],
.vps-detail-view[data-category="language"],
.vps-detail-view[data-category="about"],
.vps-detail-view[data-category="invite"] {
  animation: vexDetailGeneralV6 .4s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes vexDetailAccountV6 {
  from { opacity: 0; transform: translateX(-12px); filter: blur(3px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes vexDetailPrivacyV6 {
  from { opacity: 0; transform: translateX(15px) scale(.985); }
  70% { opacity: 1; transform: translateX(-2px) scale(1.004); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes vexDetailChatV6 {
  from { opacity: 0; transform: scale(.97); filter: blur(3px); }
  70% { opacity: 1; transform: scale(1.008); filter: blur(0); }
  to { opacity: 1; transform: scale(1); }
}

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

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

/* Kolom kode aktivasi: huruf + angka */
.activation-input-card input[data-activation-code-input="true"] {
  input-mode: search;
  letter-spacing: 1.4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (max-width: 560px) {
  .vph-shortcut-menu {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vps-detail-view,
  .vph-shortcut-menu button {
    animation: none !important;
    transition: none !important;
  }
}


/* VEXAPP_UNIVERSAL_FROSTED_HEADERS_V7 */

/* Permukaan header dibuat transparan agar lapisan blur bekerja. */
.vps-settings-page .vps-detail-header,
.vps-settings-page .vps-home-header,
.vps-settings-page .vps-section-heading,
.vps-settings-page .vps-content .vps-section-heading,
.vps-dialog > .vps-header,
.vps-settings-page .vps-header {
  position: relative;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(112, 220, 255, .22) !important;
  border-radius: 22px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(65, 192, 255, .08) !important;
}

/* Header detail tetap sticky saat halaman digulir. */
.vps-settings-page .vps-detail-header {
  position: sticky !important;
  top: 5px !important;
  z-index: 60 !important;
  width: calc(100% - 4px) !important;
  margin: 7px auto 20px !important;
  padding: 13px 15px !important;
}

/* Header utama tetap menjadi panel kaca, bukan sekadar teks. */
.vps-settings-page .vps-home-header {
  padding: 17px 16px !important;
  margin: 5px 0 17px !important;
}

/* Lapisan kaca berada DI ATAS background header dan memburamkan
   seluruh area di belakang permukaannya. */
.vps-settings-page .vps-detail-header::before,
.vps-settings-page .vps-home-header::before,
.vps-settings-page .vps-section-heading::before,
.vps-settings-page .vps-content .vps-section-heading::before,
.vps-dialog > .vps-header::before,
.vps-settings-page .vps-header::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(
      112deg,
      rgba(2, 8, 18, .42) 0%,
      rgba(3, 17, 33, .37) 55%,
      rgba(0, 174, 218, .20) 100%
    ),
    radial-gradient(
      ellipse at 12% 0%,
      rgba(255, 255, 255, .16),
      transparent 60%
    ) !important;
  -webkit-backdrop-filter:
    blur(36px) saturate(190%) brightness(.82) !important;
  backdrop-filter:
    blur(36px) saturate(190%) brightness(.82) !important;
}

/* Semua isi header tampil di atas lapisan kaca. */
.vps-settings-page .vps-detail-header > *,
.vps-settings-page .vps-home-header > *,
.vps-settings-page .vps-section-heading > *,
.vps-settings-page .vps-content .vps-section-heading > *,
.vps-dialog > .vps-header > *,
.vps-settings-page .vps-header > * {
  position: relative;
  z-index: 1;
}

/* Pastikan judul tetap terbaca di atas dark glass. */
.vps-settings-page .vps-detail-header .vps-detail-title h1,
.vps-settings-page .vps-home-header h1,
.vps-settings-page .vps-section-heading h3 {
  color: #effaff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .24);
}

/* Override juga aturan khusus tema terang agar efek kaca konsisten. */
.messenger[data-vex-theme="light"] .vps-settings-page .vps-detail-header,
.messenger[data-vex-theme="light"] .vps-settings-page .vps-home-header,
.messenger[data-vex-theme="light"] .vps-settings-page .vps-section-heading {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(112, 220, 255, .22) !important;
}

.messenger[data-vex-theme="light"] .vps-settings-page .vps-detail-header::before,
.messenger[data-vex-theme="light"] .vps-settings-page .vps-home-header::before,
.messenger[data-vex-theme="light"] .vps-settings-page .vps-section-heading::before {
  background:
    linear-gradient(
      112deg,
      rgba(2, 8, 18, .42),
      rgba(3, 17, 33, .37) 55%,
      rgba(0, 174, 218, .20)
    ) !important;
  -webkit-backdrop-filter: blur(36px) saturate(190%) brightness(.82) !important;
  backdrop-filter: blur(36px) saturate(190%) brightness(.82) !important;
}

/* Fallback untuk browser yang tidak mendukung backdrop-filter. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .vps-settings-page .vps-detail-header,
  .vps-settings-page .vps-home-header,
  .vps-settings-page .vps-section-heading {
    background: rgba(5, 14, 27, .94) !important;
  }
}

@media (max-width: 680px) {
  .vps-settings-page .vps-detail-header {
    top: 5px !important;
    width: calc(100% - 2px) !important;
    margin: 5px auto 17px !important;
    padding: 13px 12px !important;
    border-radius: 22px !important;
  }

  .vps-settings-page .vps-home-header {
    border-radius: 20px !important;
  }
}


/* VEXAPP_LIQUID_GLASS_INTENSE_V8 */

/* Semua header Pengaturan */
.vps-settings-page .vps-detail-header,
.vps-settings-page .vps-home-header,
.vps-settings-page .vps-section-heading,
.vps-settings-page .vps-content .vps-section-heading,
.vps-dialog > .vps-header,
.vps-settings-page .vps-header {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: rgba(3, 9, 19, .16) !important;
  border: 1px solid rgba(139, 222, 255, .25) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(70, 193, 255, .10) !important;
}

/* Lapisan utama frosted glass */
.vps-settings-page .vps-detail-header::before,
.vps-settings-page .vps-home-header::before,
.vps-settings-page .vps-section-heading::before,
.vps-settings-page .vps-content .vps-section-heading::before,
.vps-dialog > .vps-header::before,
.vps-settings-page .vps-header::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;

  background:
    linear-gradient(
      118deg,
      rgba(0, 0, 0, .39) 0%,
      rgba(2, 11, 23, .32) 48%,
      rgba(0, 113, 151, .19) 100%
    ),
    radial-gradient(
      ellipse at 14% 0%,
      rgba(255, 255, 255, .19),
      transparent 58%
    ) !important;

  -webkit-backdrop-filter:
    blur(48px) saturate(185%) brightness(.78) contrast(1.04) !important;
  backdrop-filter:
    blur(48px) saturate(185%) brightness(.78) contrast(1.04) !important;
}

/* Pantulan cahaya tipis khas liquid glass */
.vps-settings-page .vps-detail-header::after,
.vps-settings-page .vps-home-header::after,
.vps-settings-page .vps-section-heading::after,
.vps-settings-page .vps-content .vps-section-heading::after,
.vps-dialog > .vps-header::after,
.vps-settings-page .vps-header::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .09) 0%,
      transparent 34%,
      transparent 75%,
      rgba(55, 202, 255, .07) 100%
    ) !important;
}

/* Pastikan teks dan tombol berada di atas lapisan kaca */
.vps-settings-page .vps-detail-header > *,
.vps-settings-page .vps-home-header > *,
.vps-settings-page .vps-section-heading > *,
.vps-settings-page .vps-content .vps-section-heading > *,
.vps-dialog > .vps-header > *,
.vps-settings-page .vps-header > * {
  position: relative;
  z-index: 1;
}

/* Tampilan header detail tetap konsisten di semua kategori */
.vps-settings-page .vps-detail-header {
  position: sticky !important;
  top: 5px !important;
  z-index: 60 !important;
  border-radius: 23px !important;
}

/* Tema terang tetap menggunakan dark liquid glass sesuai desain VexApp */
.messenger[data-vex-theme="light"] .vps-settings-page .vps-detail-header,
.messenger[data-vex-theme="light"] .vps-settings-page .vps-home-header,
.messenger[data-vex-theme="light"] .vps-settings-page .vps-section-heading {
  background: transparent !important;
  background-color: rgba(3, 9, 19, .16) !important;
}

@media (max-width: 680px) {
  .vps-settings-page .vps-detail-header {
    border-radius: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vps-settings-page .vps-detail-header,
  .vps-settings-page .vps-home-header,
  .vps-settings-page .vps-section-heading {
    transition: none !important;
  }
}


/* VEXAPP_HOME_HEADER_RESTORE_V9 */

/* Kembalikan header utama ke desain lama: full-width, bukan kartu. */
.vps-settings-page .vps-home-view > .vps-home-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;

  display: block !important;
  width: calc(100% + 4px) !important;
  margin: -4px -2px 17px !important;
  padding: 18px 18px 26px !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(130, 213, 245, .12) !important;
  border-radius: 0 0 36px 36px !important;

  overflow: visible !important;
  background:
    linear-gradient(
      112deg,
      #142235 0%,
      #0c1c2c 56%,
      #082a35 100%
    ) !important;

  box-shadow: none !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
}

/* Hilangkan lapisan yang sebelumnya membuat header menjadi kartu kaca. */
.vps-settings-page .vps-home-view > .vps-home-header::before,
.vps-settings-page .vps-home-view > .vps-home-header::after {
  display: none !important;
  content: none !important;
}

/* Kembalikan jarak dan tampilan judul seperti desain sebelumnya. */
.vps-settings-page .vps-home-view > .vps-home-header .vps-eyebrow {
  color: #91e7f5 !important;
}

.vps-settings-page .vps-home-view > .vps-home-header h1 {
  margin: 5px 0 0 !important;
  color: #f5f8ff !important;
}

/* Penyesuaian layar HP. */
@media (max-width: 680px) {
  .vps-settings-page .vps-home-view > .vps-home-header {
    width: calc(100% + 2px) !important;
    margin: -2px -1px 17px !important;
    padding: 18px 17px 26px !important;
    border-radius: 0 0 36px 36px !important;
  }
}


/* VEXAPP_GLOBAL_FROSTED_HEADERS_V10 */

/*
 * Universal dark liquid glass.
 * Hanya mengubah permukaan visual, tidak mengubah layout/ukuran/posisi.
 */
.messenger header,
.messenger [role="banner"],
.messenger [class*="-header"],
.messenger [class^="header"],
.messenger [class*=" header"],
.messenger [class*="__header"],
.messenger [class*="_header"],
.messenger [class*="Header"],
.messenger .vps-section-heading {
  background:
    linear-gradient(
      112deg,
      rgba(2, 8, 18, .54) 0%,
      rgba(3, 17, 33, .46) 56%,
      rgba(0, 157, 193, .20) 100%
    ) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.88) !important;
  backdrop-filter:
    blur(36px) saturate(185%) brightness(.88) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .075) !important;
}

/* Override tema terang agar efek kaca tetap konsisten. */
.messenger[data-vex-theme="light"] header,
.messenger[data-vex-theme="light"] [role="banner"],
.messenger[data-vex-theme="light"] [class*="-header"],
.messenger[data-vex-theme="light"] [class^="header"],
.messenger[data-vex-theme="light"] [class*=" header"],
.messenger[data-vex-theme="light"] [class*="__header"],
.messenger[data-vex-theme="light"] [class*="_header"],
.messenger[data-vex-theme="light"] [class*="Header"],
.messenger[data-vex-theme="light"] .vps-section-heading {
  background:
    linear-gradient(
      112deg,
      rgba(2, 8, 18, .54) 0%,
      rgba(3, 17, 33, .46) 56%,
      rgba(0, 157, 193, .20) 100%
    ) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.88) !important;
  backdrop-filter:
    blur(36px) saturate(185%) brightness(.88) !important;
}


/* VEXAPP_HELP_CENTER_OPEN_TOP_PERF_V1 */

/* Buka Pusat Bantuan tanpa mewarisi posisi scroll sebelumnya. */
.vps-detail-view[data-category="help-center"] {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  scroll-margin-top: 0 !important;
}

/* Hilangkan animasi dan transisi yang membuat menu terasa lambat. */
.vps-detail-view[data-category="help-center"] *,
.vps-detail-view[data-category="help-center"] *::before,
.vps-detail-view[data-category="help-center"] *::after {
  animation: none !important;
  transition: none !important;
}
/* VEXAPP_CHAT_MEDIA_V1 */

.chat-composer-controls {
  display: flex;
  flex: 1 0 100%;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.message-composer .chat-composer-controls textarea {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  max-height: 125px;
  resize: none;
  box-sizing: border-box;
}

.message-composer .chat-attach-button {
  display: inline-flex !important;
  flex: 0 0 42px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(120,240,255,.22) !important;
  border-radius: 50% !important;
  color: #bdebf4 !important;
  background: rgba(70,135,150,.15) !important;
  box-shadow: none !important;
}

.composer-file-input { display: none !important; }

.composer-media-preview,
.voice-recording-hint {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 14px;
}

.composer-media-preview {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 44px 10px 10px;
  border: 1px solid rgba(110,225,245,.22);
  background: rgba(25,62,75,.3);
}

.composer-media-preview-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.composer-media-image-preview,
.composer-media-video-preview {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 170px;
  object-fit: contain;
  border-radius: 10px;
}

.composer-media-audio-preview {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.composer-media-file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.16);
}

.composer-media-file-card span:last-child { overflow-wrap: anywhere; }

.composer-media-file-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: #c7e6ec;
  font-size: 12px;
}

.composer-media-file-meta strong { color: #f0fcff; font-size: 13px; }
.composer-media-file-meta span { overflow-wrap: anywhere; }
.composer-media-file-meta small { color: #91bdc7; }

.message-composer .composer-media-remove {
  position: absolute !important;
  top: 7px;
  right: 7px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #eafaff !important;
  background: rgba(0,0,0,.28) !important;
  box-shadow: none !important;
  font-size: 22px;
}

.voice-recording-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255,93,109,.28);
  background: rgba(158,35,53,.16);
  color: #ffdce1;
  font-size: 12px;
}

.voice-recording-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff596c;
  box-shadow: 0 0 0 4px rgba(255,89,108,.12);
  animation: vex-voice-record-pulse 1.2s ease-in-out infinite;
}

.message-composer .chat-mic-send-button {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.message-composer .chat-mic-send-button.is-recording {
  background: #d83e50 !important;
  border-color: rgba(255,180,190,.5) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(216,62,80,.24) !important;
}

.chat-media-message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.chat-media-rendered-image,
.chat-media-rendered-video {
  display: block;
  max-width: min(100%,360px);
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(0,0,0,.12);
}

.chat-media-audio {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(100%,340px);
  min-width: 0;
}

.chat-media-audio audio {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.chat-media-caption {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-media-download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  max-width: 100%;
  padding: 10px;
  border: 1px solid rgba(110,225,245,.18);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  background: rgba(60,118,135,.12);
}

.chat-media-download-name {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.chat-media-download small,
.chat-media-muted {
  color: #95b8c0;
  font-size: 11px;
}

.chat-media-load-error {
  margin: 0;
  color: #ffb9c0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@keyframes vex-voice-record-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}

@media (max-width: 520px) {
  .chat-composer-controls { gap: 7px; }
  .message-composer .chat-attach-button {
    flex-basis: 39px !important;
    width: 39px !important;
    min-width: 39px !important;
    height: 41px !important;
  }
  .chat-media-rendered-image,
  .chat-media-rendered-video { max-width: 100%; max-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-recording-dot { animation: none !important; }
}

/* VEXAPP_VOICE_NOTE_PLAYER_V1 */

.voice-note-player {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 340px);
  min-width: 0;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid rgba(115, 220, 239, .14);
  border-radius: 14px;
  background: rgba(31, 93, 110, .13);
}

.voice-note-player.compact {
  width: 100%;
  max-width: 360px;
}

.voice-note-audio-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.voice-note-play {
  display: inline-flex !important;
  flex: 0 0 38px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(91, 211, 232, .17) !important;
  color: #9beaf8 !important;
  box-shadow: none !important;
}

.voice-note-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.voice-note-waveform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  height: 27px;
  overflow: hidden;
}

.voice-note-bar {
  display: block;
  flex: 1 1 2px;
  min-width: 2px;
  max-width: 5px;
  border-radius: 4px;
  background: rgba(139, 194, 204, .48);
  transition: background-color .12s linear;
}

.voice-note-bar.played {
  background: #65d9ed;
}

.voice-note-seek {
  display: block;
  width: 100%;
  height: 12px;
  min-width: 0;
  margin: 0;
  accent-color: #65d9ed;
  cursor: pointer;
}

.voice-note-seek:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.voice-note-time {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #a9cbd2;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.voice-note-speed {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 30px !important;
  padding: 0 5px !important;
  border: 1px solid rgba(115, 220, 239, .2) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #a9ebf5 !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 700;
}

.voice-note-error {
  margin: 2px 0 0;
  color: #ffb9c0;
  font-size: 10px;
  overflow-wrap: anywhere;
}

@media (max-width: 360px) {
  .voice-note-player {
    gap: 6px;
    padding: 6px;
  }

  .voice-note-play {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .voice-note-speed {
    min-width: 34px !important;
    padding-inline: 3px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-note-bar {
    transition: none !important;
  }
}

/* VEXAPP_MEDIA_VIEWER_V1 */
/* VEXAPP_MEDIA_VIEWER_LAYOUT_FIX_V1 */

.chat-media-preview-button {
  display: inline-flex !important;
  align-self: flex-start;
  width: auto !important;
  max-width: min(100%, 360px);
  min-width: 0;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  line-height: 0;
  text-align: left;
  cursor: zoom-in;
}

.chat-media-preview-button .chat-media-rendered-image {
  display: block;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 10px;
}

.chat-media-open-viewer {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(110, 225, 245, .35);
  border-radius: 999px;
  color: inherit;
  background: rgba(60, 118, 135, .16);
  cursor: pointer;
}

.chat-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  overflow: hidden;
  background: rgba(0, 0, 0, .88);
  overscroll-behavior: contain;
}

.chat-media-lightbox-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(960px, 100%);
  height: min(88vh, 860px);
  height: min(88dvh, 860px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(160, 220, 235, .22);
  border-radius: 14px;
  color: #f4fbff;
  background: #101820;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .5);
}

.chat-media-lightbox-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 12px;
  border-bottom: 1px solid rgba(160, 220, 235, .16);
}

.chat-media-lightbox-title {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  max-height: 2.7em;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
  font-size: 14px;
  font-weight: 600;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.chat-media-lightbox-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 6px;
}

.chat-media-lightbox-action,
.chat-media-lightbox-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(160, 220, 235, .25);
  border-radius: 9px;
  color: #f4fbff;
  background: rgba(60, 118, 135, .18);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.chat-media-lightbox-stage {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 12px;
  overflow: hidden;
  background: #080d12;
}

.chat-media-lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.chat-media-lightbox-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

.chat-media-caption {
  max-width: min(100%, 52ch);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-media-preview-button:focus-visible,
.chat-media-open-viewer:focus-visible,
.chat-media-lightbox button:focus-visible,
.chat-media-lightbox a:focus-visible {
  outline: 2px solid #7ceafa;
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .chat-media-lightbox-panel {
    width: 100%;
    height: min(90vh, 860px);
    height: min(90dvh, 860px);
    border-radius: 12px;
  }

  .chat-media-lightbox-header {
    gap: 7px;
    padding: 9px;
  }

  .chat-media-lightbox-title {
    font-size: 12px;
  }

  .chat-media-lightbox-actions {
    gap: 5px;
  }

  .chat-media-lightbox-action,
  .chat-media-lightbox-close {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .chat-media-lightbox-stage {
    padding: 6px;
  }
}



/* ============================================================
   VEXAPP_WA_ATTACHMENT_TRAY_V1
   WhatsApp-inspired attachment tray
   ============================================================ */

.message-composer {
  position: relative !important;
}

.chat-attachment-tray {
  position: absolute;
  z-index: 160;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 8px);

  box-sizing: border-box;
  width: auto;
  max-width: 560px;
  max-height: min(54vh, 430px);
  margin: 0 auto;
  padding: 16px 14px 13px;

  overflow-y: auto;
  overscroll-behavior: contain;

  border: 1px solid rgba(205, 232, 245, 0.15);
  border-radius: 25px;

  color: #f3f8fb;
  background: rgba(16, 27, 34, 0.94);

  -webkit-backdrop-filter: blur(28px) saturate(175%);
  backdrop-filter: blur(28px) saturate(175%);

  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);

  animation: vex-attachment-enter 190ms ease-out both;
}

@keyframes vex-attachment-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-attachment-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.chat-attachment-tray-header > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.chat-attachment-tray-header strong {
  color: #f5faff;
  font-size: 16px;
  font-weight: 750;
}

.chat-attachment-tray-header small {
  color: #91a5b1;
  font-size: 11px;
}

.chat-attachment-close {
  display: grid !important;
  flex: 0 0 34px !important;
  place-items: center;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 50% !important;

  color: #d9e5ec !important;
  background: rgba(255, 255, 255, 0.07) !important;

  font-size: 23px;
}

.chat-attachment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px 8px;
  width: 100%;
}

.chat-attachment-option {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;

  min-width: 0;
  min-height: 82px;
  padding: 0 !important;

  border: 0 !important;
  color: #dce7ed !important;
  background: transparent !important;
  box-shadow: none !important;

  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;

  -webkit-tap-highlight-color: transparent;
}

.chat-attachment-option:active:not(:disabled) {
  transform: scale(0.94);
}

.chat-attachment-icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 48px;
  box-sizing: border-box;

  border: 1px solid rgba(220, 240, 250, 0.17);
  border-radius: 17px;

  background: rgba(255, 255, 255, 0.025);
}

.chat-attachment-icon svg {
  width: 26px;
  height: 26px;
}

.chat-attachment-icon.gallery { color: #078af0; }
.chat-attachment-icon.camera { color: #ff327e; }
.chat-attachment-icon.location { color: #09cba3; }
.chat-attachment-icon.contact { color: #12a8e7; }
.chat-attachment-icon.document { color: #9574ff; }
.chat-attachment-icon.poll { color: #ffba43; }
.chat-attachment-icon.event { color: #f14b91; }
.chat-attachment-icon.ai-image { color: #168bff; }

.chat-attachment-option > small {
  position: absolute;
  top: 39px;
  right: 1px;

  padding: 2px 4px;
  border-radius: 6px;

  color: #aebcc5;
  background: rgba(255, 255, 255, 0.09);

  font-size: 7px;
}

.chat-attachment-option:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}

.chat-attachment-recent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  margin-top: 17px;
  padding-top: 13px;

  border-top: 1px solid rgba(220, 240, 250, 0.10);
}

.chat-attachment-recent > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chat-attachment-recent strong {
  color: #eaf4f8;
  font-size: 11px;
}

.chat-attachment-recent small {
  color: #91a5b1;
  font-size: 9px;
  line-height: 1.4;
}

.chat-attachment-recent button {
  flex: 0 0 auto;
  padding: 8px 11px !important;

  border: 1px solid rgba(110, 210, 240, 0.20) !important;
  border-radius: 999px !important;

  color: #b8edf7 !important;
  background: rgba(90, 190, 220, 0.09) !important;

  font-size: 10px;
  font-weight: 700;
}

.group-poll-creator-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.group-poll-creator-heading button {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;

  color: #e8f2f7;
  background: rgba(255, 255, 255, 0.07);

  font-size: 21px;
}

@media (max-width: 380px) {
  .chat-attachment-tray {
    left: 7px;
    right: 7px;
    padding: 13px 9px 11px;
  }

  .chat-attachment-grid {
    gap: 13px 4px;
  }

  .chat-attachment-icon {
    width: 49px;
    height: 45px;
  }

  .chat-attachment-option {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-attachment-tray {
    animation: none !important;
  }

  .chat-attachment-option {
    transition: none !important;
  }
}

/* VEXAPP_WA_ATTACHMENT_TRAY_V1_END */


/* VEXAPP_ATTACHMENT_PREMIUM_ROUNDED_V3 */

/* Panel pilihan lampiran */
.chat-attachment-grid {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 11px !important;
  width: 100%;
  min-width: 0;
  padding: 14px !important;
  border: 1px solid rgba(164, 207, 225, .13) !important;
  border-radius: 25px !important;
  background: rgba(16, 27, 36, .88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 30px rgba(0,0,0,.13);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

/* Kartu Galeri, Kamera, Lokasi, Kontak, Dokumen, Poll, Event */
.chat-attachment-grid .chat-attachment-option {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
  min-width: 0;
  min-height: 82px;
  padding: 11px 6px !important;
  border: 1px solid rgba(175, 211, 227, .14) !important;
  border-radius: 21px !important;
  background: linear-gradient(
    150deg,
    rgba(52, 75, 89, .48),
    rgba(25, 39, 49, .68)
  ) !important;
  color: #eaf5fa !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 5px 14px rgba(0,0,0,.10);
  text-align: center;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

/* Ikon pilihan */
.chat-attachment-grid .chat-attachment-icon {
  box-sizing: border-box;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(184, 222, 239, .13);
  border-radius: 16px !important;
  background: rgba(104, 185, 215, .12) !important;
  color: #8edcf3 !important;
}

.chat-attachment-grid .chat-attachment-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* Nama dan keterangan pilihan */
.chat-attachment-grid .chat-attachment-option > span:not(.chat-attachment-icon) {
  display: block;
  max-width: 100%;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.chat-attachment-grid .chat-attachment-option small {
  color: rgba(191, 220, 232, .67);
  font-size: 9px;
  line-height: 1.2;
}

.chat-attachment-grid .chat-attachment-option:disabled,
.chat-attachment-grid .chat-attachment-option.is-unavailable {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
}

/* Interaksi */
@media (hover: hover) {
  .chat-attachment-grid .chat-attachment-option:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: rgba(102, 211, 240, .38) !important;
    background: linear-gradient(
      150deg,
      rgba(63, 103, 121, .55),
      rgba(29, 53, 65, .78)
    ) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
  }
}

.chat-attachment-grid .chat-attachment-option:not(:disabled):active {
  transform: scale(.965);
  border-color: rgba(102, 211, 240, .48) !important;
}

/* Baris Galeri perangkat */
.chat-attachment-recent {
  box-sizing: border-box;
  margin: 10px 12px 12px;
  padding: 13px 15px !important;
  border: 1px solid rgba(164, 207, 225, .12);
  border-radius: 19px !important;
  background: rgba(115, 158, 177, .075);
}

/* Preview lampiran sebelum dikirim */
.composer-media-preview {
  border: 1px solid rgba(164, 207, 225, .16) !important;
  border-radius: 23px !important;
  overflow: hidden;
}

.composer-media-preview-content,
.composer-media-file-card {
  border-radius: 19px !important;
  overflow: hidden;
}

.composer-media-image-preview,
.composer-media-video-preview {
  border-radius: 17px !important;
  overflow: hidden;
}

.message-composer .composer-media-remove {
  border-radius: 999px !important;
}

/* Media yang tampil di percakapan */
.chat-media-rendered-image,
.chat-media-rendered-video {
  border-radius: 18px !important;
  overflow: hidden;
}

/* Layar kecil */
@media (max-width: 380px) {
  .chat-attachment-grid {
    gap: 8px !important;
    padding: 11px !important;
    border-radius: 22px !important;
  }

  .chat-attachment-grid .chat-attachment-option {
    min-height: 73px;
    padding: 9px 4px !important;
    border-radius: 18px !important;
  }

  .chat-attachment-grid .chat-attachment-icon {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
    border-radius: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-attachment-grid .chat-attachment-option {
    transition: none;
  }
}


/* VEXAPP_CHAT_COMPOSER_PILL_LAYOUT_V1 */

/* Baris composer: kapsul input dan tombol terpisah. */
.message-composer .chat-composer-controls {
  display: flex !important;
  flex: 1 1 100% !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Kapsul emoji + teks + lampiran. */
.message-composer .chat-composer-input-shell {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 55px !important;
  box-sizing: border-box !important;
  padding: 5px 8px !important;
  overflow: visible !important;

  border: 1px solid rgba(82, 190, 225, .23) !important;
  border-radius: 29px !important;

  background: linear-gradient(
    145deg,
    rgba(17, 40, 60, .96),
    rgba(7, 22, 38, .97) 65%,
    rgba(5, 40, 49, .94)
  ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 5px 17px rgba(0,0,0,.16) !important;
}

/* Area teks berada di dalam kapsul. */
.message-composer .chat-composer-input-shell textarea {
  display: block !important;
  flex: 1 1 auto !important;
  width: 0 !important;
  min-width: 0 !important;
  min-height: 43px !important;
  max-height: 120px !important;
  align-self: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 11px 5px !important;
  resize: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;

  color: #effaff !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.message-composer .chat-composer-input-shell textarea::placeholder {
  color: rgba(190, 211, 228, .65) !important;
}

.message-composer .chat-composer-input-shell textarea:focus {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tombol emoji dan lampiran berada dalam satu kapsul. */
.message-composer .chat-emoji-button,
.message-composer .chat-composer-input-shell .chat-attach-button {
  display: inline-grid !important;
  flex: 0 0 39px !important;
  place-items: center !important;
  width: 39px !important;
  min-width: 39px !important;
  height: 41px !important;
  min-height: 41px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #9edcf4 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color .16s ease,
    background .16s ease,
    transform .16s ease !important;
}

.message-composer .chat-emoji-button:active,
.message-composer .chat-composer-input-shell .chat-attach-button:active {
  transform: scale(.90);
  background: rgba(65, 190, 225, .13) !important;
}

.message-composer .chat-emoji-button svg,
.message-composer .chat-composer-input-shell .chat-attach-button svg {
  display: block;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
}

/* Mic / Send terpisah dari kapsul input. */
.message-composer .chat-mic-send-button {
  display: inline-flex !important;
  flex: 0 0 55px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 55px !important;
  min-width: 55px !important;
  height: 55px !important;
  min-height: 55px !important;
  box-sizing: border-box !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid rgba(110, 230, 255, .36) !important;
  border-radius: 50% !important;
  color: #ffffff !important;

  background: linear-gradient(
    145deg,
    #177fbd,
    #087eae 55%,
    #00aaba
  ) !important;

  box-shadow:
    0 6px 19px rgba(0, 139, 195, .25),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease !important;
}

.message-composer .chat-mic-send-button:active {
  transform: scale(.93) !important;
  filter: brightness(1.12);
}

.message-composer .chat-mic-send-button.is-recording {
  border-color: rgba(255, 180, 190, .6) !important;
  background: linear-gradient(145deg, #e34c68, #b92749) !important;
  box-shadow: 0 0 0 5px rgba(227, 76, 104, .13) !important;
}

/* Panel emoji muncul tepat di atas kapsul. */
.message-composer .chat-emoji-picker {
  position: absolute !important;
  z-index: 120 !important;
  left: 0 !important;
  bottom: calc(100% + 12px) !important;

  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 5px !important;

  width: min(286px, calc(100vw - 42px)) !important;
  max-height: 218px !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;

  border: 1px solid rgba(105, 200, 235, .23) !important;
  border-radius: 19px !important;

  background: linear-gradient(
    145deg,
    rgba(16, 37, 59, .98),
    rgba(5, 17, 31, .98)
  ) !important;

  color: #f2fbff !important;

  box-shadow:
    0 15px 42px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);

  animation: vex-composer-emoji-enter-v1 170ms ease-out both;
}

.message-composer .chat-emoji-option {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 37px !important;
  min-height: 37px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 23px !important;
  line-height: 1 !important;
  cursor: pointer;
}

.message-composer .chat-emoji-option:active {
  transform: scale(.88);
  border-color: rgba(80, 205, 240, .24) !important;
  background: rgba(38, 142, 190, .19) !important;
}

@keyframes vex-composer-emoji-enter-v1 {
  from {
    opacity: 0;
    transform: translateY(7px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 380px) {
  .message-composer .chat-composer-controls {
    gap: 7px !important;
  }

  .message-composer .chat-composer-input-shell {
    gap: 2px !important;
    padding-inline: 5px !important;
  }

  .message-composer .chat-emoji-button,
  .message-composer .chat-composer-input-shell .chat-attach-button {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
  }

  .message-composer .chat-mic-send-button {
    flex-basis: 49px !important;
    width: 49px !important;
    min-width: 49px !important;
    height: 49px !important;
    min-height: 49px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-composer .chat-emoji-picker,
  .message-composer .chat-emoji-option,
  .message-composer .chat-emoji-button,
  .message-composer .chat-mic-send-button {
    animation: none !important;
    transition: none !important;
  }
}
.counter {
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  margin-bottom: 24px;

  &:hover {
    border-color: var(--accent-border);
  }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

.hero {
  position: relative;

  .base,
  .framework,
  .vite {
    inset-inline: 0;
    margin: 0 auto;
  }

  .base {
    width: 170px;
    position: relative;
    z-index: 0;
  }

  .framework,
  .vite {
    position: absolute;
  }

  .framework {
    z-index: 1;
    top: 34px;
    height: 28px;
    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
      scale(1.4);
  }

  .vite {
    z-index: 0;
    top: 107px;
    height: 26px;
    width: auto;
    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
      scale(0.8);
  }
}

#center {
  display: flex;
  flex-direction: column;
  gap: 25px;
  place-content: center;
  place-items: center;
  flex-grow: 1;

  @media (max-width: 1024px) {
    padding: 32px 20px 24px;
    gap: 18px;
  }
}

#next-steps {
  display: flex;
  border-top: 1px solid var(--border);
  text-align: left;

  & > div {
    flex: 1 1 0;
    padding: 32px;
    @media (max-width: 1024px) {
      padding: 24px 20px;
    }
  }

  .icon {
    margin-bottom: 16px;
    width: 22px;
    height: 22px;
  }

  @media (max-width: 1024px) {
    flex-direction: column;
    text-align: center;
  }
}

#docs {
  border-right: 1px solid var(--border);

  @media (max-width: 1024px) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

#next-steps ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  margin: 32px 0 0;

  .logo {
    height: 18px;
  }

  a {
    color: var(--text-h);
    font-size: 16px;
    border-radius: 6px;
    background: var(--social-bg);
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: var(--shadow);
    }
    .button-icon {
      height: 18px;
      width: 18px;
    }
  }

  @media (max-width: 1024px) {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;

    li {
      flex: 1 1 calc(50% - 8px);
    }

    a {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
  }
}

#spacer {
  height: 88px;
  border-top: 1px solid var(--border);
  @media (max-width: 1024px) {
    height: 48px;
  }
}

.ticks {
  position: relative;
  width: 100%;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: -4.5px;
    border: 5px solid transparent;
  }

  &::before {
    left: 0;
    border-left-color: var(--border);
  }
  &::after {
    right: 0;
    border-right-color: var(--border);
  }
}


/* Premium verification-method picker */
.verification-picker {
  display: grid;
  gap: 14px;
  margin: 8px 0 18px;
}

.verification-picker-heading {
  display: grid;
  gap: 5px;
}

.verification-step {
  color: #7f8fa7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.verification-picker-heading > strong {
  font-size: 15px;
  letter-spacing: -.02em;
}

.verification-picker-heading > small {
  color: #8290a5;
  font-size: 12px;
  line-height: 1.5;
}

.verification-method-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.verification-method-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--border-color, #2d3442);
  border-radius: 16px;
  background: var(--surface-color, rgba(255,255,255,.025));
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.verification-method-card:hover {
  border-color: #64748b;
  transform: translateY(-1px);
}

.verification-method-card.selected {
  border-color: #00dffc;
  background: rgba(38, 112, 230, .105);
  box-shadow: inset 0 0 0 1px rgba(67,143,255,.16);
}

.verification-method-card:focus-within {
  outline: 2px solid rgba(67,143,255,.7);
  outline-offset: 3px;
}

.verification-method-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.verification-method-symbol {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(67,143,255,.2);
  border-radius: 13px;
  background: rgba(67,143,255,.12);
  color: #6aaaff;
  font-size: 20px;
}

.verification-method-symbol.owner {
  background: rgba(124, 229, 255, .12);
  border-color: rgba(124, 229, 255, .25);
  color: #9bebff;
}

.verification-method-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 5px;
}

.verification-method-copy > strong {
  font-size: 13px;
  font-weight: 750;
}

.verification-method-copy > small {
  color: #8793a8;
  font-size: 12px;
  line-height: 1.5;
}

.verification-method-note {
  color: #8bb9ff;
  font-size: 10px;
  font-weight: 650;
}

.verification-choice-mark {
  display: grid;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid #566174;
  border-radius: 50%;
  color: white;
  font-size: 12px;
}

.verification-method-card.selected .verification-choice-mark {
  border-color: #00dffc;
  background: #00dffc;
}

@media (min-width: 520px) {
  .verification-method-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .verification-method-card {
    min-height: 145px;
    padding: 14px;
  }

  .verification-method-symbol {
    display: none;
  }
}


/* VexApp verified badge */
.vex-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #1687ff;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(22, 135, 255, .12);
}

/* VexApp: final #48dff5 glass navigation override */

/* Tidak ada bidang hitam yang dilukis oleh container navigasi. */
.bottom-nav {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  box-sizing: border-box;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 1px solid transparent !important;
  box-shadow: none !important;

  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;

  -webkit-tap-highlight-color: transparent;
}

/* Tombol tidak boleh menggambar latar sendiri. */
.bottom-nav .nav-item,
.bottom-nav .nav-item.nav-active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Kaca ungu transparan untuk pill yang aktif. */
.bottom-nav .nav-pill-indicator {
  box-sizing: border-box;

  background: linear-gradient(
    135deg,
    rgba(132, 228, 252, 0.27),
    rgba(58, 201, 237, 0.17) 55%,
    rgba(33, 152, 182, 0.13)
  ) !important;

  background-color: rgba(0, 220, 255, 0.16) !important;

  border: 1px solid rgba(194, 243, 255, 0.43) !important;
  border-radius: 999px;

  -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
  backdrop-filter: blur(26px) saturate(180%) !important;

  box-shadow:
    0 0 16px rgba(0, 220, 255, 0.14),
    0 5px 22px rgba(29, 125, 149, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.31),
    inset 0 -1px 0 rgba(194, 243, 255, 0.12) !important;

  transform-origin: center;
  will-change: transform, scale;

  transition:
    transform 560ms cubic-bezier(0.22, 1.65, 0.32, 1),
    scale 360ms cubic-bezier(0.2, 1.65, 0.3, 1),
    background-color 200ms ease,
    box-shadow 220ms ease;
}

/* Saat jari menahan pill: efek membesar dan cahaya ungu meningkat. */
.bottom-nav.nav-dragging .nav-pill-indicator {
  scale: 1.065 1.16;

  background: linear-gradient(
    135deg,
    rgba(180, 239, 254, 0.40),
    rgba(0, 220, 255, 0.28),
    rgba(40, 182, 217, 0.22)
  ) !important;

  background-color: rgba(0, 220, 255, 0.25) !important;

  border-color: rgba(213, 247, 255, 0.62) !important;

  box-shadow:
    0 0 22px rgba(85, 215, 247, 0.23),
    0 7px 25px rgba(29, 125, 149, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;

  transition:
    transform 0ms linear,
    scale 200ms cubic-bezier(0.2, 1.65, 0.3, 1),
    background-color 180ms ease,
    box-shadow 180ms ease;
}

/* Setelah jari dilepas, scale kembali dan posisi memantul ke tujuan. */
.bottom-nav:not(.nav-dragging) .nav-pill-indicator {
  scale: 1 1;

  transition:
    transform 560ms cubic-bezier(0.22, 1.65, 0.32, 1),
    scale 380ms cubic-bezier(0.2, 1.7, 0.3, 1),
    background-color 220ms ease,
    box-shadow 220ms ease;
}

/* Aksen teks dan fokus memakai ungu, bukan hijau. */
.bottom-nav .nav-item {
  color: #bdf8ff !important;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav .nav-item.nav-active {
  color: #d9fbff !important;
}

.bottom-nav .nav-item:focus-visible {
  outline: 2px solid rgba(120, 240, 255, 0.90) !important;
  outline-offset: -3px;
}

/* Responsif untuk lima tab pada layar telepon. */
@media (max-width: 680px) {
  .bottom-nav {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
  }

  .bottom-nav .nav-pill-indicator {
    border-radius: 999px;
  }

  .bottom-nav .nav-item,
  .bottom-nav .nav-item.nav-active {
    background: transparent !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav .nav-pill-indicator,
  .bottom-nav.nav-dragging .nav-pill-indicator,
  .bottom-nav:not(.nav-dragging) .nav-pill-indicator {
    transition-duration: 0.01ms !important;
  }
}

/* VexApp & VexPanel Cyan Blue Theme v1 */
:root {
  color-scheme: dark;
  --vex-#48dff5: #00dffc;
  --vex-#48dff5-bright: #65eaff;
  --vex-#48dff5-soft: #bdf8ff;
  --vex-#48dff5-deep: #0878e8;
  --vex-#48dff5-rgb: 0, 220, 255;
  --accent-color: #00dffc;
  --accent: #00dffc;
  --primary: #168bff;
  --primary-color: #168bff;
  --focus-color: #65eaff;
  --brand: #00dffc;
  --brand-color: #00dffc;
  --accent-bg: rgba(0, 220, 255, .12);
  --accent-border: rgba(0, 220, 255, .38);
  --success: #34d399;
  --success-color: #34d399;
  --profile-accent: #00dffc;
}

.messenger-shell,
.profile-redesign,
.status-feature {
  --vex-#48dff5: #00dffc;
  --vex-#48dff5-bright: #65eaff;
  --vex-#48dff5-soft: #bdf8ff;
  --vex-#48dff5-deep: #0878e8;
  --vex-#48dff5-rgb: 0, 220, 255;
  --accent: #00dffc;
  --accent-color: #00dffc;
  --primary: #168bff;
  --primary-color: #168bff;
  --focus-color: #65eaff;
}

.profile-redesign {
  --profile-accent: #00dffc;
  --profile-bg: #071523;
  --profile-panel: #0c1d2d;
  --profile-muted: #9ab9cb;
}

.primary,
.profile-save,
.status-publish-button {
  border-color: rgba(0, 220, 255, .48) !important;
  background: linear-gradient(125deg, #00dffc, #168bff) !important;
  color: #03111d !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 5px 22px rgba(0,180,255,.18) !important;
}

.primary:hover:not(:disabled),
.profile-save:hover:not(:disabled),
.status-publish-button:hover:not(:disabled) {
  filter: brightness(1.09) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 8px 26px rgba(0,200,255,.27) !important;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline-color: #65eaff !important;
  outline-offset: 3px;
}

.profile-hero {
  border-color: rgba(0,220,255,.24);
  background:
    radial-gradient(ellipse at 85% 8%, rgba(0,220,255,.23), transparent 48%),
    radial-gradient(ellipse at 4% 100%, rgba(22,139,255,.16), transparent 55%),
    linear-gradient(145deg, #102a44, #0b1d2d 64%, #071523);
  box-shadow:
    0 18px 48px rgba(0,0,0,.26),
    0 0 0 1px rgba(0,220,255,.045),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.profile-hero-shade {
  background:
    linear-gradient(180deg,
      rgba(4,11,14,.10) 0%,
      rgba(4,11,14,.17) 30%,
      rgba(4,11,14,.72) 68%,
      rgba(5,14,23,.96) 100%),
    linear-gradient(110deg, rgba(0,130,220,.15), transparent 68%);
}

.profile-hero-brand,
.profile-hero-account-tag,
.profile-hero-avatar-hint {
  border-color: rgba(0,220,255,.24);
  background: rgba(5,25,40,.46);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}

.profile-hero-brand-mark,
.profile-hero-overline,
.profile-info-eyebrow,
.profile-info-heading-icon {
  color: #65eaff !important;
}

.profile-hero-account-tag,
.profile-hero-username {
  color: #bdf8ff !important;
}

.profile-hero-avatar {
  border-color: rgba(101,234,255,.88);
  box-shadow:
    0 8px 28px rgba(0,0,0,.32),
    0 0 0 5px rgba(0,220,255,.12),
    0 0 28px rgba(0,180,255,.12);
}

.profile-hero-actions button,
.profile-own-actions button,
.profile-detail-tab,
.user-about-actions button {
  border-color: rgba(0,220,255,.18);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.profile-hero-actions button:hover,
.profile-own-actions button:hover,
.user-about-actions button:hover {
  border-color: rgba(0,220,255,.42);
  background-color: rgba(0,180,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 24px rgba(0,150,255,.12);
}

.profile-detail-tab.active {
  border-color: rgba(0,220,255,.38);
  background: linear-gradient(120deg, rgba(0,220,255,.18), rgba(22,139,255,.14));
  color: #bdf8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
}

.profile-info-card,
.profile-info-row {
  border-color: rgba(0,220,255,.12);
}

.user-about-overlay {
  background: rgba(3,8,14,.70);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

.user-about-dialog {
  border-color: rgba(0,220,255,.2);
  box-shadow:
    0 32px 100px rgba(0,0,0,.48),
    0 0 34px rgba(0,150,255,.045),
    inset 0 1px 0 rgba(255,255,255,.11);
}

.user-about-identity {
  border-color: rgba(0,220,255,.23);
  background:
    radial-gradient(circle at 88% 14%, rgba(0,220,255,.27), transparent 45%),
    radial-gradient(ellipse at 5% 110%, rgba(22,139,255,.20), transparent 55%),
    linear-gradient(145deg,#102a44,#10202f 62%,#071523);
}

.user-about-bio,
.user-about-facts > div {
  border-color: rgba(0,220,255,.14);
}

.user-about-bio h3,
.user-about-header .user-about-eyebrow {
  color: #65eaff;
}

.user-about-header .profile-editor-close:hover {
  border-color: rgba(0,220,255,.42);
  background: rgba(0,180,255,.16);
}

.status-feature .status-mode-tabs button.active {
  background: linear-gradient(120deg, #00dffc, #168bff);
  color: #03111d;
}

.status-feature .status-add-bubble,
.status-feature .status-own-avatar {
  background: linear-gradient(145deg, #65eaff, #168bff);
  color: #03111d;
}

.status-feature .status-story-ring {
  border-color: #00dffc;
}

.status-feature .status-viewer-backdrop {
  accent-color: #00dffc;
}

.status-feature .status-file-picker {
  border-color: rgba(0,220,255,.34);
  background: rgba(0,160,255,.07);
}

@media (prefers-reduced-motion: no-preference) {
  .primary,
  .profile-save,
  .status-publish-button,
  .profile-hero-actions button,
  .user-about-actions button {
    transition:
      transform 180ms ease,
      filter 180ms ease,
      box-shadow 220ms ease,
      border-color 180ms ease;
  }
}

/* VEXAPP_STABLE_CYAN_UI_V1 */

:root {
  --vex-bg: #07131b;
  --vex-text: #eaf8fc;
  --vex-muted: #9bb9c8;
  --vex-cyan: #55e3fa;
  --vex-cyan-line: rgba(90, 222, 247, .19);
  --vex-cyan-gradient: linear-gradient(
    135deg, #a0f5ff 0%, #51e1f5 42%, #22b7e2 73%, #268bd0 100%
  );
  --vex-glass: rgba(8, 24, 36, .84);
}

html {
  scroll-behavior: smooth;
  scrollbar-color: rgba(79, 207, 235, .28) transparent;
}

.message-history {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 14px 11px 20px;
  color: var(--vex-text);
  background-color: var(--vex-bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(91, 208, 234, .04) 1px, transparent 1.8px),
    radial-gradient(ellipse at 3% 0%, rgba(0, 190, 228, .065), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(35, 105, 192, .05), transparent 50%);
  background-size: 24px 24px, auto, auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 207, 235, .24) transparent;
}

/* The line controls alignment. It must never draw a second bubble. */
.message-history > .message-line {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 2px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.message-history > .message-line.mine {
  justify-content: flex-end;
}

/* Only the article draws the actual incoming message bubble. */
.message-history .message-line > article.bubble-message {
  display: block;
  flex: 0 1 auto;
  width: fit-content;
  min-width: 0;
  max-width: min(88%, 560px);
  box-sizing: border-box;
  margin: 0;
  padding: 9px 12px 7px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(100, 216, 241, .15);
  border-radius: 17px 17px 17px 5px;
  color: #eaf8fc;
  background: linear-gradient(145deg, rgba(17, 43, 56, .97), rgba(8, 27, 39, .97));
  box-shadow:
    0 4px 14px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(9px) saturate(125%);
  backdrop-filter: blur(9px) saturate(125%);
}

/* Outgoing messages: explicitly select the real outgoing article. */
.message-history .message-line.mine > article.bubble-message.bubble-mine {
  margin: 0;
  border-color: rgba(66, 222, 248, .29);
  border-radius: 17px 17px 5px 17px;
  color: #f0fcff;
  background: linear-gradient(135deg, rgba(0, 157, 187, .31), rgba(23, 91, 177, .33));
  box-shadow:
    0 4px 15px rgba(0, 153, 208, .075),
    inset 0 1px 0 rgba(255, 255, 255, .075);
}

.message-history .bubble-message > p {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.48;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-history .bubble-message .message-author {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0 0 6px;
  color: var(--vex-cyan);
  font-size: 11px;
  font-weight: 750;
}

.message-history .bubble-message .message-author-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-history .bubble-message .message-author-avatar {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--vex-cyan-line);
  border-radius: 50%;
}

.message-history .bubble-message .message-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.message-history .bubble-message .message-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 5px;
  padding: 0;
  border: 0;
  color: var(--vex-muted);
  background: transparent;
  box-shadow: none;
  font-size: 10px;
}

.message-history .message-bubble-flags,
.message-history .message-receipt-mark.read {
  color: var(--vex-cyan);
}

/* Compact, dark liquid-glass conversation header. */
.conversation-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 8px;
  color: var(--vex-text);
  border-bottom: 1px solid var(--vex-cyan-line);
  background:
    radial-gradient(ellipse at 82% 0%, rgba(0, 207, 245, .105), transparent 58%),
    linear-gradient(135deg, rgba(13, 32, 45, .95), rgba(5, 16, 26, .94));
  box-shadow: 0 5px 22px rgba(0, 0, 0, .12),
              inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

.conversation-header .back-button {
  flex: 0 0 30px;
  width: 30px;
  height: 40px;
  padding: 0;
  color: #d9f8ff;
  background: transparent;
  border: 0;
  font-size: 30px;
}

.conversation-profile-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(89, 224, 249, .38);
  border-radius: 50%;
  background: linear-gradient(145deg, #164b61, #102438);
  box-shadow: 0 0 0 3px rgba(0, 196, 238, .045);
}

.conversation-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.conversation-heading {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  overflow: hidden;
  cursor: pointer;
}

.conversation-heading > strong {
  width: 100%;
  overflow: hidden;
  color: #f0fcff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.conversation-heading > small {
  max-width: 100%;
  overflow: hidden;
  color: #9abac9;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.conversation-heading > .conversation-bio {
  color: #b8e8f3;
}

.conversation-heading > .peer-presence-label.peer-online {
  color: #66e7be;
}

.conversation-heading > .peer-presence-label.peer-is-typing {
  color: #61e5ff;
}

.conversation-header .header-tag {
  flex: 0 1 auto;
  max-width: 78px;
  overflow: hidden;
  padding: 6px 8px;
  border: 1px solid rgba(153, 244, 255, .42);
  border-radius: 11px;
  color: #06232d;
  background: var(--vex-cyan-gradient);
  box-shadow: 0 3px 12px rgba(0, 190, 232, .13),
              inset 0 1px 0 rgba(255,255,255,.40);
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vex-call-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
}

.vex-call-header-actions button,
.conversation-header .conversation-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #dff9ff;
  background: rgba(67, 200, 229, .045);
  font-size: 19px;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 260ms cubic-bezier(.2, 1.25, .35, 1);
}

.conversation-header .conversation-menu-button {
  flex-basis: 28px;
  width: 28px;
  font-size: 24px;
}

.conversation-header button:active {
  background: rgba(0, 199, 238, .14);
  border-color: rgba(83, 223, 248, .2);
  transform: scale(.96);
}

/* Menu is anchored to the header and never becomes a gray full-width box. */
.conversation-header .conversation-overflow-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 7px);
  right: 7px;
  width: min(235px, calc(100vw - 26px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(88, 221, 248, .23);
  border-radius: 16px;
  color: #eaf9ff;
  background: rgba(6, 23, 35, .96);
  box-shadow: 0 18px 42px rgba(0,0,0,.38),
              inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
}

.conversation-header .conversation-overflow-menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #eaf9ff;
  background: transparent;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.35;
  transition: background 170ms ease, border-color 170ms ease;
}

.conversation-header .conversation-overflow-menu button:active {
  background: rgba(0, 190, 231, .14);
  border-color: rgba(90, 222, 247, .17);
}

.message-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(90, 222, 247, .14);
  background: linear-gradient(180deg, rgba(8, 23, 34, .86), rgba(5, 15, 25, .96));
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

.message-composer textarea {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  min-height: 46px;
  max-height: 125px;
  box-sizing: border-box;
  resize: none;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(94, 212, 240, .18);
  border-radius: 23px;
  color: #ecfaff;
  background: rgba(11, 32, 45, .92);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.message-composer textarea::placeholder {
  color: #8da9b8;
}

.message-composer textarea:focus {
  outline: none;
  border-color: rgba(82, 224, 248, .52);
  box-shadow: 0 0 0 3px rgba(0, 191, 232, .07);
}

.message-composer .send-button {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(153, 244, 255, .43);
  border-radius: 50%;
  color: #06212a;
  background: var(--vex-cyan-gradient);
  box-shadow: 0 4px 15px rgba(0, 183, 230, .17),
              inset 0 1px 0 rgba(255,255,255,.36);
  transition: transform 280ms cubic-bezier(.2, 1.25, .35, 1);
}

.message-composer .send-button:active {
  transform: scale(.93);
}

.message-composer .send-button:disabled {
  opacity: .48;
  box-shadow: none;
}


@media (max-width: 520px) {
  .message-history {
    padding: 12px 9px 17px;
  }

  .message-history .message-line > article.bubble-message {
    max-width: 91%;
    padding: 9px 11px 7px;
  }

  .conversation-header {
    gap: 4px;
    padding: 8px 6px;
  }

  .conversation-profile-avatar {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .conversation-header .header-tag {
    max-width: 70px;
    padding: 5px 6px;
  }

  .vex-call-header-actions button {
    flex-basis: 30px;
    width: 30px;
    height: 35px;
  }

  .conversation-header .conversation-menu-button {
    flex-basis: 24px;
    width: 24px;
  }

  .message-composer {
    gap: 7px;
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  .message-history {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


.conversation-overflow-menu {
  animation: vexStableMenuEnter 180ms cubic-bezier(.2, .75, .25, 1) both;
}
@keyframes vexStableMenuEnter {
  from { opacity: 0; transform: translate3d(0, -5px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* VEXAPP_GLOBAL_CHAT_BOTTOM_V1 */

.vex-global-chat-section {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 14px 0 10px;
  padding-top: 13px;
  border-top: 1px solid rgba(82, 221, 248, .19);
}

.vex-global-chat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 4px 9px;
  color: #63e6ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .85px;
}

.vex-global-chat-label span:last-child {
  color: #88aebe;
  font-size: 8px;
  letter-spacing: .35px;
}

.person-row.vex-global-chat-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 11px;
  margin: 0;
  padding: 11px;
  border: 1px solid rgba(82, 220, 248, .24);
  border-radius: 17px;
  text-align: left;
  color: #eafaff;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(55, 220, 245, .15), transparent 60%),
    linear-gradient(135deg, rgba(11, 45, 61, .93), rgba(6, 23, 37, .96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 5px 19px rgba(0,0,0,.10);
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 280ms cubic-bezier(.2, 1.25, .35, 1),
    box-shadow 220ms ease;
}

.person-row.vex-global-chat-row:active {
  transform: scale(.985);
  border-color: rgba(99, 233, 255, .42);
  box-shadow: 0 0 18px rgba(0, 195, 235, .09);
}

.vex-global-chat-avatar {
  display: inline-flex;
  flex: 0 0 43px;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(118, 236, 255, .37);
  border-radius: 50%;
  color: #f0fcff;
  background: linear-gradient(145deg, #1b91ad, #15528b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  font-size: 21px;
}

.person-row.vex-global-chat-row .row-text {
  flex: 1 1 auto;
  min-width: 0;
}

.person-row.vex-global-chat-row .row-text strong {
  display: block;
  color: #f0fcff;
  font-size: 14px;
}

.person-row.vex-global-chat-row .row-text small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #a7c9d7;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.person-row.vex-global-chat-row .row-arrow {
  flex: 0 0 auto;
  color: #75eaff;
}

@media (max-width: 520px) {
  .vex-global-chat-section {
    margin-top: 12px;
    padding-top: 11px;
  }

  .person-row.vex-global-chat-row {
    gap: 9px;
    padding: 10px;
  }

  .vex-global-chat-avatar {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
  }
}


/* VEXAPP_FIX_OVERFLOW_MENU_DEFAULT_HIDDEN_V1 */
/* Menu titik tiga harus benar-benar tersembunyi saat ditutup. */
.conversation-header .conversation-overflow-menu:not(.is-open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.conversation-header .conversation-overflow-menu.is-open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* VEXAPP_SELECTION_MODE_POLISH_V1 */
/* Selection mode — cyan, navy, mobile-friendly. */

:where(.conversation-header,.message-history,.conversation-view,.chat-view,.chat-panel)
:is([class*="selection-toolbar" i],[class*="selection-bar" i],
[class*="selection-mode" i],[class*="selection-actions" i],
[class*="select-toolbar" i],[class*="bulk-action" i],
[class*="selected-messages" i],[class*="message-selection" i]) {
  box-sizing:border-box !important;
  gap:8px !important;
  max-width:100%;
  padding:9px 10px !important;
  border:1px solid rgba(45,211,255,.26) !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,rgba(7,25,43,.98),rgba(9,39,61,.97)) !important;
  color:#eafaff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04) !important;
}

:where(.conversation-header,.message-history,.conversation-view,.chat-view,.chat-panel)
:is([class*="selection-toolbar" i],[class*="selection-bar" i],
[class*="selection-mode" i],[class*="selection-actions" i],
[class*="select-toolbar" i],[class*="bulk-action" i],
[class*="selected-messages" i],[class*="message-selection" i])
:is(button,[role="button"],a) {
  min-width:36px !important;
  min-height:38px !important;
  padding:7px 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:1px solid rgba(77,214,255,.2) !important;
  border-radius:10px !important;
  background:rgba(21,70,96,.58) !important;
  color:#eafaff !important;
  transition:background .16s ease,transform .16s ease !important;
}

:where(.conversation-header,.message-history,.conversation-view,.chat-view,.chat-panel)
:is([class*="selection-toolbar" i],[class*="selection-bar" i],
[class*="selection-mode" i],[class*="selection-actions" i],
[class*="select-toolbar" i],[class*="bulk-action" i],
[class*="selected-messages" i],[class*="message-selection" i])
:is(button,[role="button"],a):active {
  transform:scale(.96) !important;
  background:rgba(21,151,191,.4) !important;
}

.message-history input[type="checkbox"],
.message-history [role="checkbox"],
:where(.conversation-header,.message-history,.conversation-view,.chat-view,.chat-panel)
:is([class*="selection" i],[class*="select-mode" i],[class*="bulk-action" i]) input[type="checkbox"] {
  accent-color:#25d9ff !important;
  width:19px !important;
  height:19px !important;
  min-width:19px !important;
  min-height:19px !important;
  flex:0 0 19px !important;
  cursor:pointer !important;
  touch-action:manipulation;
}

.message-history :is([class*="message-checkbox" i],[class*="select-message" i],[class*="message-select" i],[role="checkbox"]) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:32px;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}

.message-history :is(.message-line,.bubble-message,[class*="message-row" i]):is(.selected,.is-selected,[aria-selected="true"],[data-selected="true"],[data-selection-state="selected"]) {
  outline:1px solid rgba(37,217,255,.72) !important;
  outline-offset:2px !important;
  border-radius:13px !important;
  background-color:rgba(21,175,218,.08) !important;
}

.message-history :is(.message-line,.bubble-message,[class*="message-row" i]):is([aria-checked="true"],[data-selected="true"]) {
  box-shadow:0 0 0 1px rgba(37,217,255,.24) !important;
}

:where(.conversation-header,.message-history,.conversation-view,.chat-view,.chat-panel)
:is([class*="selection-count" i],[class*="selected-count" i],[class*="selection-title" i],[class*="selection-label" i]) {
  color:#eafaff !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums;
  line-height:1.35 !important;
  overflow-wrap:anywhere;
}

@media(max-width:600px) {
  :where(.conversation-header,.message-history,.conversation-view,.chat-view,.chat-panel)
  :is([class*="selection-toolbar" i],[class*="selection-bar" i],
  [class*="selection-mode" i],[class*="selection-actions" i],
  [class*="select-toolbar" i],[class*="bulk-action" i],
  [class*="selected-messages" i],[class*="message-selection" i]) {
    gap:6px !important;
    padding:7px !important;
    flex-wrap:wrap !important;
    border-radius:12px !important;
  }
}



/* VEXAPP_SWIPE_REPLY_V1 */
.message-history .bubble-message {
  touch-action: pan-y;
}

.message-reply-quote {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 2px 0 8px;
  padding: 7px 10px;
  border-left: 3px solid #28d9ff;
  border-radius: 7px;
  background: rgba(34, 190, 235, .10);
  color: inherit;
}

.message-reply-quote strong {
  color: #48dfff;
  font-size: 11px;
  line-height: 1.35;
}

.message-reply-quote span {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12px;
  line-height: 1.4;
  opacity: .9;
}

.message-composer {
  flex-wrap: wrap;
}

.message-composer .reply-compose-preview {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid rgba(40, 217, 255, .3);
  border-left: 3px solid #28d9ff;
  border-radius: 11px;
  background: rgba(10, 39, 58, .95);
  order: -1;
}

.reply-compose-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.reply-compose-copy strong {
  color: #48dfff;
  font-size: 12px;
}

.reply-compose-copy span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  opacity: .88;
}

.message-composer .reply-compose-cancel {
  flex: 0 0 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font-size: 23px;
  line-height: 1;
}


/* VEXAPP_DISCOVERY_MENU_RESTORE_V1 */
.pane-heading {
  flex-wrap: wrap;
}

.discovery-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(45, 211, 255, .32);
  border-radius: 11px;
  background: rgba(12, 55, 78, .82);
  color: #eafaff;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.discovery-toggle:active {
  transform: scale(.97);
  background: rgba(22, 115, 148, .7);
}

.discovery-toggle > span:first-child {
  color: #48dfff;
  font-size: 21px;
  line-height: 1;
}

.global-directory-heading {
  position: relative;
  padding-right: 44px;
}

.discovery-close {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(45, 211, 255, .25);
  border-radius: 11px;
  background: rgba(12, 55, 78, .75);
  color: #eafaff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.discovery-close:active {
  transform: scale(.95);
}

@media (max-width: 480px) {
  .discovery-toggle {
    min-height: 36px;
    padding: 7px 9px;
    gap: 5px;
  }
}


/* VEXAPP_SAVED_CONTACTS_V1 */
.saved-contacts-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(45, 211, 255, .28);
  border-radius: 11px;
  background: rgba(12, 55, 78, .76);
  color: #eafaff;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.saved-contacts-toggle b {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 99px;
  background: rgba(45, 211, 255, .18);
  color: #65e5ff;
  font-size: 10px;
  text-align: center;
}

.saved-contacts-panel {
  margin: 10px 0 14px;
  padding: 14px;
  border: 1px solid rgba(45, 211, 255, .24);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(8, 29, 47, .98), rgba(8, 39, 58, .96));
  color: #eafaff;
}

.saved-contacts-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.saved-contacts-heading h2 {
  margin: 5px 0;
}

.saved-contacts-heading p {
  margin: 0;
  font-size: 12px;
  opacity: .75;
}

.saved-contact-search {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(45, 211, 255, .25);
  border-radius: 11px;
  background: rgba(0, 10, 20, .35);
  color: inherit;
  font: inherit;
}

.saved-contact-list {
  display: grid;
  gap: 8px;
}

.saved-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.saved-contact-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 2px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.saved-contact-main:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.saved-contact-actions {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
}

.saved-contact-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(45, 211, 255, .2);
  border-radius: 9px;
  background: rgba(45, 211, 255, .08);
  color: #dffaff;
  font-size: 17px;
}

.saved-contacts-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 12px 2px;
}

.saved-contacts-empty p {
  margin: 0;
  font-size: 12px;
  opacity: .8;
}

.vex-discovery-person {
  display: flex;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
  margin-bottom: 7px;
}

.vex-discovery-person > .person-row {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.saved-contact-add {
  flex-shrink: 0;
  align-self: center;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(45, 211, 255, .26);
  border-radius: 10px;
  background: rgba(45, 211, 255, .09);
  color: #bcefff;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.saved-contact-add:disabled {
  opacity: .62;
}

@media (max-width: 420px) {
  .saved-contacts-toggle,
  .discovery-toggle {
    padding: 7px 8px;
  }

  .saved-contacts-panel {
    padding: 10px;
  }

  .saved-contact-add {
    padding: 7px;
    font-size: 10px;
  }
}


/* VEXAPP_GROUP_POLLS_V1 */
.group-poll-tools {
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  width: 100%;
  min-width: 0;
  order: -2;
}

.group-poll-toggle,
.group-poll-secondary,
.group-poll-submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(45, 211, 255, .25);
  border-radius: 10px;
  background: rgba(22, 92, 119, .35);
  color: #e8faff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.group-poll-toggle {
  align-self: flex-start;
  color: #67e2ff;
}

.group-poll-creator {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(45, 211, 255, .25);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(7, 28, 44, .99), rgba(10, 44, 64, .98));
  color: #e9faff;
}

.group-poll-creator h3 {
  margin: 0;
  font-size: 15px;
}

.group-poll-creator label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
}

.group-poll-creator input,
.group-poll-creator select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid rgba(45, 211, 255, .24);
  border-radius: 9px;
  background: rgba(0, 10, 22, .42);
  color: inherit;
  font: inherit;
  font-size: 13px;
}

.group-poll-creator select option {
  color: #e9faff;
  background: #0a2538;
}

.group-poll-option-fields {
  display: grid;
  gap: 7px;
}

.group-poll-option-input {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.group-poll-option-input input {
  flex: 1;
}

.group-poll-option-input button {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border: 1px solid rgba(45, 211, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  color: inherit;
  font-size: 20px;
}

.group-poll-submit {
  width: 100%;
  background: linear-gradient(110deg, #0d789b, #087c9f);
  font-weight: 750;
}

.group-poll-submit:disabled,
.group-poll-toggle:disabled,
.group-poll-secondary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.group-poll-card {
  display: grid;
  gap: 11px;
  min-width: 0;
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(45, 211, 255, .24);
  border-radius: 13px;
  background: rgba(5, 28, 44, .22);
}

.group-poll-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #48dfff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
}

.group-poll-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.45;
}

.group-poll-card-options {
  display: grid;
  gap: 8px;
}

.group-poll-option {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(45, 211, 255, .22);
  border-radius: 10px;
  background: rgba(20, 91, 118, .16);
  color: inherit;
  text-align: left;
}

.group-poll-option.is-voted {
  border-color: rgba(45, 211, 255, .8);
  background: rgba(45, 211, 255, .12);
}

.group-poll-option:disabled {
  cursor: default;
  opacity: .82;
}

.group-poll-option-label {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.group-poll-option-label strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.45;
}

.group-poll-option-label small {
  flex-shrink: 0;
  font-size: 10px;
  opacity: .8;
}

.group-poll-progress {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
}

.group-poll-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1597c1, #48dfff);
  transition: width .2s ease;
}

.group-poll-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 10px;
  line-height: 1.4;
  opacity: .75;
}

.group-poll-loading {
  padding: 9px;
  color: #8bdff2;
  font-size: 12px;
}

@media (max-width: 480px) {
  .group-poll-creator {
    padding: 10px;
  }

  .group-poll-card {
    max-width: min(340px, 78vw);
    padding: 10px;
  }
}

/* VEXAPP_DISCOVERY_RESTYLE_AFTER_AUDIT_V1 */

/* Restore Discovery as a normal part of the Chats list. */
.messenger .list-pane .global-directory-heading {
  display: block;
  position: relative;
  margin: 10px 10px 8px;
  padding: 13px 46px 12px 13px;
  border: 1px solid rgba(65, 218, 255, .18);
  border-radius: 12px;
  background: linear-gradient(135deg, #111b21, #14232b);
  color: #e9edef;
  pointer-events: auto;
}

.messenger .list-pane .global-directory-heading h2 {
  margin: 5px 0;
  color: #e9edef;
  font-size: 16px;
  line-height: 1.35;
}

.messenger .list-pane .global-directory-heading p {
  margin: 4px 0 0;
  color: #a8b9c1;
  font-size: 12px;
  line-height: 1.5;
}

.messenger .list-pane .global-directory-eyebrow {
  color: #53d9f7;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
}

.messenger .list-pane form.search-box {
  display: flex;
  position: relative;
  align-items: center;
  gap: 8px;
  margin: 9px 10px 12px;
  padding: 5px 7px 5px 11px;
  border: 1px solid #2b3b43;
  border-radius: 11px;
  background: #202c33;
  pointer-events: auto;
}

.messenger .list-pane form.search-box input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 38px;
  padding: 7px 4px;
  border: 0;
  outline: none;
  background: transparent;
  color: #e9edef;
  font: inherit;
  pointer-events: auto;
}

.messenger .list-pane form.search-box input::placeholder {
  color: #8696a0;
}

.messenger .list-pane form.search-box button.discovery-search-submit {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(45, 211, 255, .2);
  border-radius: 9px;
  background: #075e70;
  color: #e9edef;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.messenger .list-pane form.search-box button.discovery-search-submit:active {
  background: #087f8f;
  transform: scale(.97);
}

.messenger .list-pane form.search-box button.discovery-search-submit:disabled {
  opacity: .6;
  cursor: wait;
}

.messenger .list-pane .result-section {
  display: block;
  margin: 0 10px 12px;
}

.messenger .list-pane .discovery-search-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid rgba(65, 218, 255, .25);
  border-radius: 10px;
  background: #202c33;
  color: #e9edef;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.messenger .list-pane .discovery-search-trigger:active {
  background: #2a424c;
  transform: scale(.98);
}

.messenger .list-pane .discovery-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #30434c;
  border-radius: 9px;
  background: #202c33;
  color: #e9edef;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.messenger .list-pane .discovery-close:active {
  background: #2d424b;
}

@media (max-width: 420px) {
  .messenger .list-pane .global-directory-heading {
    margin-right: 7px;
    margin-left: 7px;
  }

  .messenger .list-pane form.search-box {
    gap: 5px;
    margin-right: 7px;
    margin-left: 7px;
    padding-left: 8px;
  }

  .messenger .list-pane form.search-box button.discovery-search-submit {
    min-width: 62px;
    padding-right: 9px;
    padding-left: 9px;
  }
}


/* VEXAPP_UI_POLISH_SAVED_CONTACT_STYLE_V1 */
/* Panel fitur baru: konsisten dengan kartu Kontak Tersimpan. */
.messenger .global-directory-eyebrow,
.messenger .global-directory-heading,
.messenger .group-poll-card,
.messenger .group-poll-card-eyebrow,
.messenger .group-poll-card-footer,
.messenger .status-composer-backdrop,
.messenger .status-composer-footer,
.messenger .status-composer-header,
.messenger .status-composer-modal,
.messenger .status-composer-text,
.messenger .status-empty,
.messenger .status-empty-wa,
.messenger .status-section-title,
.messenger .status-story-text-preview,
.messenger .status-story-viewed,
.messenger .status-viewer,
.messenger .status-viewer-author,
.messenger .status-viewer-avatar,
.messenger .status-viewer-backdrop,
.messenger .status-viewer-caption,
.messenger .status-viewer-content,
.messenger .status-viewer-footer,
.messenger .status-viewer-header,
.messenger .status-viewer-nav,
.messenger .status-viewer-progress,
.messenger .status-viewer-progress-segment,
.messenger .status-viewer-text,
.messenger .status-viewer-text-mode,
.messenger .vex-call-contact-list,
.messenger .vex-contact-picker-header,
.messenger .vex-contact-picker-list {
  box-sizing: border-box;
  border: 1px solid rgba(84, 210, 235, .22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(10, 39, 53, .96), rgba(7, 22, 36, .98));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  color: var(--text-primary, #e4f3f7);
}

.messenger input:not([type="checkbox"]):not([type="radio"]),
.messenger textarea,
.messenger select {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid rgba(92, 195, 220, .22);
  border-radius: 14px;
  background: rgba(7, 27, 40, .92);
  color: inherit;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.messenger input:focus,
.messenger textarea:focus,
.messenger select:focus {
  border-color: rgba(80, 218, 244, .72);
  box-shadow: 0 0 0 3px rgba(42, 181, 215, .10);
}

.messenger button {
  -webkit-tap-highlight-color: transparent;
  transition: border-color .16s ease, filter .16s ease, transform .16s ease;
}

.messenger button:active {
  transform: scale(.985);
}

.messenger .discovery-close,
.messenger .discovery-search-submit,
.messenger .discovery-search-trigger,
.messenger .discovery-toggle,
.messenger .group-poll-card-options,
.messenger .group-poll-option,
.messenger .group-poll-option-fields,
.messenger .group-poll-option-input,
.messenger .group-poll-option-label,
.messenger .group-poll-submit,
.messenger .group-poll-toggle,
.messenger .message-action-close,
.messenger .message-action-danger,
.messenger .message-reply-quote,
.messenger .reply-compose-cancel,
.messenger .reply-compose-copy,
.messenger .reply-compose-preview,
.messenger .saved-contact-actions,
.messenger .saved-contact-add,
.messenger .saved-contact-card,
.messenger .saved-contact-list,
.messenger .saved-contact-main,
.messenger .saved-contact-search,
.messenger .saved-contacts-empty,
.messenger .saved-contacts-heading,
.messenger .saved-contacts-panel,
.messenger .saved-contacts-toggle,
.messenger .status-add-bubble,
.messenger .status-composer-close,
.messenger .status-publish-button,
.messenger .status-refresh,
.messenger .status-viewer-close,
.messenger .status-viewer-delete,
.messenger .vex-call-contact-actions,
.messenger .vex-contact-option {
  box-sizing: border-box;
  border-radius: 13px;
  border: 1px solid rgba(85, 202, 232, .26);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.messenger button:focus-visible,
.messenger [role="button"]:focus-visible {
  outline: 2px solid rgba(88, 222, 246, .9);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .messenger .global-directory-eyebrow,
.messenger .global-directory-heading,
.messenger .group-poll-card,
.messenger .group-poll-card-eyebrow,
.messenger .group-poll-card-footer,
.messenger .status-composer-backdrop,
.messenger .status-composer-footer,
.messenger .status-composer-header,
.messenger .status-composer-modal,
.messenger .status-composer-text,
.messenger .status-empty,
.messenger .status-empty-wa,
.messenger .status-section-title,
.messenger .status-story-text-preview,
.messenger .status-story-viewed,
.messenger .status-viewer,
.messenger .status-viewer-author,
.messenger .status-viewer-avatar,
.messenger .status-viewer-backdrop,
.messenger .status-viewer-caption,
.messenger .status-viewer-content,
.messenger .status-viewer-footer,
.messenger .status-viewer-header,
.messenger .status-viewer-nav,
.messenger .status-viewer-progress,
.messenger .status-viewer-progress-segment,
.messenger .status-viewer-text,
.messenger .status-viewer-text-mode,
.messenger .vex-call-contact-list,
.messenger .vex-contact-picker-header,
.messenger .vex-contact-picker-list {
    border-radius: 15px;
    max-width: 100%;
  }

  .messenger input:not([type="checkbox"]):not([type="radio"]),
  .messenger textarea,
  .messenger select {
    min-height: 42px;
    font-size: 16px;
  }
}


/* VEXAPP_ICON_REPAIR_V1 */
.message-history .message-receipt-mark {
  display: inline-block;
  color: #a9bbc5;
  font-family: Arial, sans-serif;
  font-weight: 800;
  white-space: nowrap;
}

.message-history .message-receipt-mark.read {
  color: #35d8ff !important;
  text-shadow: 0 0 8px rgba(53, 216, 255, .2);
}

.message-composer .send-paper-plane,
.message-composer .send-progress-icon {
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}

.message-composer .send-paper-plane {
  animation: vex-icon-appear 180ms ease-out both;
}

.message-composer .send-progress-icon {
  animation: vex-icon-spin .85s linear infinite;
}

@keyframes vex-icon-appear {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes vex-icon-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .message-composer .send-paper-plane,
  .message-composer .send-progress-icon {
    animation: none !important;
  }
}

/* VEXAPP_ICON_SEND_REPAIR_V2_20261028 */

/* Ikon centang akun terverifikasi berbasis SVG. */
.vex-verified-badge svg {
  display: block;
  flex: 0 0 auto;
}

/* Ikon centang pesan: satu untuk terkirim, dua untuk diterima/dibaca. */
.message-history .message-receipt-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: 0;
  letter-spacing: normal;
  vertical-align: middle;
}

.message-history .message-receipt-icon {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
}

/* Tombol kirim VexApp: kontras, terpusat, dan konsisten. */
.message-composer .send-button {
  display: inline-flex !important;
  flex: 0 0 46px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 1px solid rgba(160, 245, 255, .55) !important;
  border-radius: 50% !important;
  color: #06212a !important;
  background: linear-gradient(
    135deg,
    #8af1ff 0%,
    #36c8ed 100%
  ) !important;
  box-shadow:
    0 5px 16px rgba(0, 190, 225, .20),
    inset 0 1px 0 rgba(255, 255, 255, .55) !important;
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease !important;
  -webkit-tap-highlight-color: transparent;
}

.message-composer .send-button:not(:disabled):hover {
  filter: brightness(1.06);
  box-shadow:
    0 7px 20px rgba(0, 190, 225, .28),
    inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

.message-composer .send-button:not(:disabled):active {
  transform: scale(.94) !important;
}

.message-composer .send-button:focus-visible {
  outline: 2px solid #8af1ff !important;
  outline-offset: 3px;
}

.message-composer .send-button:disabled {
  opacity: .48 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.message-composer .send-paper-plane,
.message-composer .send-progress-icon {
  display: block;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
}

/* Pertahankan ukuran tombol ringkas pada layar HP. */
@media (max-width: 520px) {
  .message-composer .send-button {
    flex: 0 0 41px !important;
    width: 41px !important;
    min-width: 41px !important;
    height: 41px !important;
  }
}


/* VEXAPP_MESSAGE_REACTIONS_V1 */

.message-reactions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  line-height: 1;
}

.message-reaction-chip,
.message-reaction-add,
.message-reaction-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 30px;
  min-height: 30px;
  margin: 0;
  padding: 5px 7px;
  border: 1px solid rgba(135, 180, 195, .28);
  border-radius: 999px;
  color: inherit;
  background: rgba(80, 120, 135, .13);
  box-shadow: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.message-reaction-chip {
  gap: 5px;
  font-size: 14px;
}

.message-reaction-chip small {
  font-size: 11px;
  line-height: 1;
  opacity: .9;
}

.message-reaction-chip.is-active {
  border-color: rgba(75, 195, 225, .8);
  background: rgba(65, 170, 200, .22);
}

.message-reaction-add {
  font-size: 15px;
  opacity: .85;
}

.message-reaction-picker {
  position: absolute;
  z-index: 50;
  left: 0;
  bottom: calc(100% + 7px);
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  max-width: min(calc(100vw - 32px), 320px);
  padding: 6px;
  border: 1px solid rgba(135, 180, 195, .3);
  border-radius: 14px;
  background: #16232b;
  color: #f5fbff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

.message-reaction-option {
  min-width: 34px;
  min-height: 34px;
  padding: 5px;
  border-color: transparent;
  background: transparent;
  font-size: 19px;
}

.message-reaction-chip:hover,
.message-reaction-add:hover,
.message-reaction-option:hover {
  background: rgba(80, 175, 205, .2);
}

.message-reaction-chip:focus-visible,
.message-reaction-add:focus-visible,
.message-reaction-option:focus-visible {
  outline: 2px solid #7ceafa;
  outline-offset: 2px;
}


/* VEXAPP_REACTION_HORIZONTAL_UI_V1 */

.message-reactions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}

.message-reaction-list {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100% - 42px);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding: 2px 1px 4px;
  box-sizing: border-box;
}

.message-reaction-list::-webkit-scrollbar,
.message-reaction-picker::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.message-reaction-chip {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 32px;
  gap: 5px;
  white-space: nowrap;
  user-select: none;
  transition: background-color .15s ease, transform .15s ease;
}

.message-reaction-chip:active,
.message-reaction-option:active {
  transform: scale(.96);
}

.message-reaction-add {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  min-height: 32px;
  padding: 4px;
  white-space: nowrap;
}

.message-reaction-picker {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: max-content;
  max-width: min(calc(100vw - 32px), 350px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.message-reaction-option {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .message-reaction-chip,
  .message-reaction-option {
    transition: none;
  }
}


/* VEXAPP_MESSAGE_EDIT_V1 */
.edit-compose-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(115, 210, 235, .28);
  border-left: 3px solid #69cfe8;
  border-radius: 10px;
  background: rgba(50, 120, 140, .13);
}

.edit-compose-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.edit-compose-copy strong {
  font-size: 13px;
}

.edit-compose-copy span {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--muted, #a8bbc5);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.edit-compose-cancel {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(150, 190, 205, .25);
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font-size: 21px;
  cursor: pointer;
}

/* VEXAPP_GROUP_MESSAGE_RECEIPTS_V1 */
.message-bubble-meta .group-message-receipt-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--vex-muted);
  font-size: 9px;
  line-height: 1;
}

.message-bubble-meta .group-message-receipt-summary .is-read {
  color: var(--vex-accent, #75b7ff);
}


/* 

/* VEXAPP_TELEGRAM_INSPIRED_HOME_V1 */
/* VEXAPP_LIQUID_GLASS_NAV_V2 */

/* Main home canvas */
.messenger.messenger-chat-home {
  padding: 0;
  gap: 0;
  color: #f5f5f5;
  background: #171717;
}

.messenger-chat-home .main-header {
  flex: 0 0 auto;
  min-height: 69px;
  margin: 0;
  padding: 13px 22px 9px;
  border: 0;
  border-radius: 0;
  background: #171717;
  box-shadow: none;
}

.messenger-chat-home .main-header .brand {
  min-height: 42px;
}

.messenger-chat-home .main-header .brand-text strong {
  color: #ffffff;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.6px;
}

.messenger-chat-home .messenger-shell {
  background: #171717;
  border: 0;
  border-radius: 0;
}

.messenger-chat-home .list-pane {
  min-width: 0;
  padding: 4px 17px 18px;
  border-right: 0;
  background: #171717;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}

/* Compact chat heading and existing discovery actions */
.messenger-chat-home .pane-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 43px;
  margin: 0;
  padding: 3px 0 9px;
  border: 0;
  border-radius: 0;
  color: #eeeeee;
  background: transparent !important;
  box-shadow: none !important;
}

.messenger-chat-home .pane-heading h1 {
  color: #eeeeee;
  font-size: 20px;
  font-weight: 750;
}

.messenger-chat-home .pane-heading .online-dot {
  display: none;
}

.messenger-chat-home .pane-heading .discovery-search-trigger,
.messenger-chat-home .pane-heading .saved-contacts-toggle {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  color: #e7e7e7;
  background: #262626;
  font-size: 12px;
  box-shadow: none;
}

/* Chat rows */
.messenger-chat-home .person-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 82px;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 3px;
  border: 0;
  border-bottom: 1px solid #292929;
  border-radius: 0;
  color: #ffffff;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  transition: background 160ms ease;
}

.messenger-chat-home .person-row:active {
  background: #222222 !important;
  transform: none;
}

.messenger-chat-home .person-row.row-selected {
  background: #242a38 !important;
}

.messenger-chat-home .person-row > .avatar {
  flex: 0 0 59px;
  width: 59px;
  height: 59px;
  box-sizing: border-box;
  border: 1px solid #383838;
  border-radius: 50%;
  color: #ffffff;
  background: #303030;
  font-size: 20px;
}

.messenger-chat-home .person-row > .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.messenger-chat-home .person-row .row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

.messenger-chat-home .person-row .row-text strong {
  overflow: hidden;
  color: #f6f6f6;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.messenger-chat-home .person-row .row-text small {
  display: block;
  overflow: hidden;
  margin: 0;
  color: #929292;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.messenger-chat-home .person-row .row-arrow {
  display: none;
}

.messenger-chat-home .person-row .unread-badge {
  display: grid;
  flex: 0 0 auto;
  min-width: 29px;
  height: 29px;
  box-sizing: border-box;
  place-items: center;
  margin-left: auto;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: #587bf0;
  font-size: 13px;
  font-weight: 700;
}

.messenger-chat-home .list-heading {
  margin-top: 13px;
  padding: 11px 2px 8px;
  border-top: 1px solid #292929;
  color: #ffffff;
}

.messenger-chat-home .list-heading h2 {
  color: #eeeeee;
  font-size: 15px;
}

/* Floating create-chat action */
.messenger .vex-fab-add-chat {
  position: fixed;
  z-index: 80;
  right: 21px;
  bottom: calc(103px + env(safe-area-inset-bottom, 0px));
  display: grid;
  width: 59px;
  height: 59px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: #587cf2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .38);
}

.messenger .vex-fab-add-chat span {
  font-size: 31px;
  line-height: 1;
}

/* Liquid-glass navigation shell */
.messenger .bottom-nav {
  position: relative !important;
  z-index: 70;
  isolation: isolate;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 0;
  width: calc(100% - 34px);
  min-height: 76px;
  max-width: 850px;
  box-sizing: border-box;
  margin: 8px auto max(9px, env(safe-area-inset-bottom, 0px));
  padding: 5px;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.115),
      rgba(255,255,255,.025) 42%,
      rgba(0,0,0,.10)
    ),
    rgba(36,36,40,.77) !important;
  background-color: rgba(36,36,40,.77) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.29),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.055) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Moving glass bubble */
.messenger .bottom-nav .nav-pill-indicator {
  overflow: hidden;
  border: 1px solid rgba(240,246,255,.30) !important;
  border-radius: 999px;
  background:
    radial-gradient(
      ellipse at 26% 0%,
      rgba(255,255,255,.30),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.17),
      rgba(255,255,255,.065) 48%,
      rgba(112,145,255,.16)
    ) !important;
  box-shadow:
    0 5px 19px rgba(0,0,0,.22),
    0 0 14px rgba(105,145,255,.11),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%) !important;
  backdrop-filter: blur(22px) saturate(190%) !important;
  transform-origin: center;
  will-change: transform, scale;
  transition:
    transform 620ms cubic-bezier(.16,1.22,.28,1),
    scale 420ms cubic-bezier(.18,1.42,.32,1),
    border-color 220ms ease,
    box-shadow 240ms ease;
}

/* Top reflection and blue refracted light */
.messenger .bottom-nav .nav-pill-indicator::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 24% 0%,
      rgba(255,255,255,.30),
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.10),
      transparent 47%,
      rgba(82,125,255,.08)
    );
  opacity: .9;
}

.messenger .bottom-nav .nav-pill-indicator::after {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 2px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(95,140,255,.55),
    rgba(185,205,255,.48),
    transparent
  );
  filter: blur(4px);
  opacity: .65;
  animation: vex-liquid-glint 3.2s ease-in-out infinite;
}

/* Stretch and brighten while finger moves across tabs */
.messenger .bottom-nav.nav-dragging .nav-pill-indicator {
  scale: 1.10 1.16;
  border-color: rgba(235,244,255,.56) !important;
  background:
    radial-gradient(
      ellipse at 25% 0%,
      rgba(255,255,255,.36),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      rgba(235,241,255,.24),
      rgba(120,151,255,.18) 58%,
      rgba(85,119,242,.20)
    ) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.27),
    0 0 19px rgba(107,145,255,.24),
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(255,255,255,.13) !important;
  transition:
    transform 95ms linear,
    scale 180ms cubic-bezier(.18,1.45,.32,1),
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.messenger .bottom-nav:not(.nav-dragging) .nav-pill-indicator {
  scale: 1 1;
  transition:
    transform 620ms cubic-bezier(.16,1.22,.28,1),
    scale 430ms cubic-bezier(.18,1.42,.32,1),
    border-color 220ms ease,
    box-shadow 240ms ease;
}

@keyframes vex-liquid-glint {
  0%, 100% {
    opacity: .38;
    transform: translateX(-7%) scaleX(.88);
  }
  50% {
    opacity: .78;
    transform: translateX(7%) scaleX(1.08);
  }
}

/* Existing four tabs and icons */
.messenger .bottom-nav .nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 2px;
  border: 0 !important;
  border-radius: 999px;
  color: #eeeeee !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 190ms ease, transform 260ms cubic-bezier(.2,1.25,.3,1);
}

.messenger .bottom-nav .nav-item .nav-icon {
  font-size: 23px;
}

.messenger .bottom-nav .nav-item.nav-active {
  color: #83a3ff !important;
  background: transparent !important;
}

.messenger .bottom-nav .nav-item:active {
  transform: scale(.94);
}

.messenger .bottom-nav .nav-item:focus-visible {
  outline: 2px solid rgba(160,185,255,.88) !important;
  outline-offset: -3px;
}

/* Mobile spacing */
@media (max-width: 680px) {
  .messenger.messenger-chat-home {
    padding: 0;
  }

  .messenger-chat-home .main-header {
    min-height: 69px;
    padding: 13px 21px 9px;
  }

  .messenger-chat-home .messenger-shell {
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    border-radius: 0;
  }

  .messenger-chat-home .list-pane {
    padding: 4px 17px 18px;
  }

  .messenger-chat-home .person-row {
    min-height: 82px;
  }

  .messenger-chat-home .person-row > .avatar {
    flex-basis: 59px;
    width: 59px;
    height: 59px;
  }

  .messenger .bottom-nav {
    width: calc(100% - 34px);
    min-height: 74px;
    margin-bottom: max(9px, env(safe-area-inset-bottom, 0px));
  }

  .messenger .vex-fab-add-chat {
    right: 21px;
    bottom: calc(101px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .messenger .bottom-nav .nav-pill-indicator,
  .messenger .bottom-nav .nav-item,
  .messenger .bottom-nav .nav-pill-indicator::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}


/* VEXAPP_CONTACT_ROW_SYNC_V1 */

/* Discovery result: one profile row + one fixed action column */
.messenger .list-pane .result-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.messenger .list-pane .vex-discovery-person {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 90px;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 9px;
  overflow: hidden;
}

.messenger .list-pane .vex-discovery-person > .person-row {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 3px;
  overflow: hidden;
  border-radius: 12px;
}

.messenger .list-pane .vex-discovery-person > .person-row > .avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
}

.messenger .list-pane .vex-discovery-person > .person-row .row-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.messenger .list-pane .vex-discovery-person > .person-row .row-text strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.messenger .list-pane .vex-discovery-person > .person-row .row-text small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Fixed-size action button, never overlaps the profile */
.messenger .list-pane .vex-discovery-person > .saved-contact-add {
  display: inline-flex;
  flex: 0 0 90px;
  align-items: center;
  justify-content: center;
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  min-height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 7px;
  overflow: hidden;
  border: 1px solid rgba(120, 158, 255, .30);
  border-radius: 12px;
  color: #eaf0ff;
  background: rgba(75, 111, 222, .17);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: none;
}

.messenger .list-pane .vex-discovery-person > .saved-contact-add:not(:disabled):active {
  background: rgba(75, 111, 222, .32);
  transform: scale(.96);
}

.messenger .list-pane .vex-discovery-person > .saved-contact-add:disabled {
  opacity: 1;
  color: #91b1ff;
  border-color: rgba(120, 158, 255, .20);
  background: rgba(75, 111, 222, .10);
  cursor: default;
}

@media (max-width: 420px) {
  .messenger .list-pane .vex-discovery-person {
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 6px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .messenger .list-pane .vex-discovery-person > .saved-contact-add {
    flex-basis: 84px;
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    font-size: 10px;
  }
}


/* VEXAPP_DISCOVERY_RESULTS_LAYOUT_FIX_V1 */

/* Jangan biarkan panel Discovery terjepit oleh flex layout. */
.messenger.messenger-chat-home .list-pane {
  align-items: stretch;
}

.messenger.messenger-chat-home .list-pane > .global-directory-heading,
.messenger.messenger-chat-home .list-pane > form.search-box,
.messenger.messenger-chat-home .list-pane > .result-section,
.messenger.messenger-chat-home .list-pane > .vex-chat-filters {
  flex: 0 0 auto !important;
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
}

.messenger.messenger-chat-home .list-pane > .global-directory-heading {
  min-height: max-content !important;
}

.messenger.messenger-chat-home .list-pane > form.search-box {
  min-height: 54px;
}

/* Hasil pencarian harus mengikuti tinggi seluruh pengguna. */
.messenger.messenger-chat-home .list-pane .result-section {
  display: block !important;
  position: relative;
  flex: 0 0 auto !important;
  align-self: stretch;
  width: auto !important;
  min-width: 0 !important;
  min-height: max-content !important;
  height: auto !important;
  max-height: none !important;
  margin: 10px 0 18px !important;
  padding: 12px 9px !important;
  overflow: visible !important;
  box-sizing: border-box;
  border: 1px solid rgba(120, 158, 255, .16);
  border-radius: 17px;
  background: rgba(12, 23, 30, .88);
}

.messenger.messenger-chat-home .list-pane .result-section > h3 {
  display: block;
  flex: 0 0 auto;
  min-height: 26px;
  margin: 0 0 8px;
  padding: 0 5px;
  color: #dfeaff;
  font-size: 13px;
}

/* Setiap pengguna mendapat satu baris penuh. */
.messenger.messenger-chat-home .list-pane .result-section > .vex-discovery-person {
  display: grid !important;
  position: relative;
  flex: 0 0 auto !important;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 76px !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 7px 2px !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.messenger.messenger-chat-home .list-pane .result-section > .vex-discovery-person:last-child {
  border-bottom: 0;
}

.messenger.messenger-chat-home .list-pane .result-section .vex-discovery-person > .person-row {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 64px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 2px !important;
  overflow: hidden !important;
  border: 0;
  border-radius: 10px;
  background: transparent !important;
}

.messenger.messenger-chat-home .list-pane .result-section .person-row > .avatar {
  flex: 0 0 47px;
  width: 47px;
  height: 47px;
  min-width: 47px;
}

.messenger.messenger-chat-home .list-pane .result-section .person-row .row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.messenger.messenger-chat-home .list-pane .result-section .person-row .row-text strong,
.messenger.messenger-chat-home .list-pane .result-section .person-row .row-text small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Tombol aksi selalu berada di dalam kartu. */
.messenger.messenger-chat-home .list-pane .result-section .saved-contact-add {
  position: relative;
  display: inline-flex !important;
  flex: 0 0 88px !important;
  align-items: center;
  justify-content: center;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  min-height: 39px;
  height: auto;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 5px;
  overflow: hidden;
  border-radius: 12px;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 420px) {
  .messenger.messenger-chat-home .list-pane .result-section {
    padding: 10px 7px !important;
  }

  .messenger.messenger-chat-home .list-pane .result-section > .vex-discovery-person {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 5px;
  }

  .messenger.messenger-chat-home .list-pane .result-section .saved-contact-add {
    flex-basis: 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }
}


/* VEXAPP_WHATSAPP_SETTINGS_PAGE_V1 */

.messenger-shell.profile-tab-active .pane-heading {
  display: none !important;
}




/* ============================================================
   VEXAPP_BOTTOM_NAV_TRANSPARENT_GLASS_V1
   Transparent floating navigation + frosted glass
   ============================================================ */

/* Hilangkan lapisan gelap solid di belakang area navigasi. */
.messenger {
  background: transparent !important;
  background-color: transparent !important;
}

/* Glass navigation container */
.messenger .bottom-nav {
  position: relative !important;
  z-index: 25 !important;

  border: 1px solid rgba(210, 242, 255, 0.25) !important;
  border-radius: 999px !important;

  /* Transparansi tinggi, bukan panel hitam solid. */
  background: rgba(215, 244, 255, 0.035) !important;
  background-color: rgba(215, 244, 255, 0.035) !important;
  background-image: none !important;

  /* Frosted glass */
  -webkit-backdrop-filter:
    blur(30px) saturate(190%) brightness(1.08) !important;
  backdrop-filter:
    blur(30px) saturate(190%) brightness(1.08) !important;

  /* Hilangkan bayangan hitam tebal. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(180, 225, 245, 0.07) !important;

  -webkit-tap-highlight-color: transparent;
}

/* Pastikan tab aktif tetap transparan.
   Indikator Liquid Glass tetap menjadi penanda aktif. */
.messenger .bottom-nav .nav-item {
  background: transparent !important;
  background-color: transparent !important;
}

.messenger .bottom-nav .nav-item.nav-active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Pertahankan indikator aktif dengan blur tersendiri. */
.messenger .bottom-nav .nav-pill-indicator {
  -webkit-backdrop-filter:
    blur(26px) saturate(190%) !important;
  backdrop-filter:
    blur(26px) saturate(190%) !important;
}

/* Mobile */
@media (max-width: 680px) {
  .messenger .bottom-nav {
    border: 1px solid rgba(210, 242, 255, 0.25) !important;
    border-radius: 999px !important;

    background: rgba(215, 244, 255, 0.035) !important;
    background-color: rgba(215, 244, 255, 0.035) !important;
    background-image: none !important;

    -webkit-backdrop-filter:
      blur(30px) saturate(190%) brightness(1.08) !important;
    backdrop-filter:
      blur(30px) saturate(190%) brightness(1.08) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(180, 225, 245, 0.07) !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Aksesibilitas */
@media (prefers-reduced-motion: reduce) {
  .messenger .bottom-nav,
  .messenger .bottom-nav .nav-pill-indicator {
    transition-duration: 0.01ms !important;
  }
}

/* VEXAPP_BOTTOM_NAV_TRANSPARENT_GLASS_V1_END */



/* ============================================================
   VEXAPP_BOTTOM_NAV_TRUE_GLASS_FIX_V2
   True transparent iOS glass + 4-tab positioning fix
   ============================================================ */

/* Container: tidak melukis panel atau warna solid. */
.messenger .bottom-nav {
  position: relative !important;
  z-index: 70 !important;

  display: flex !important;
  align-items: stretch !important;
  justify-content: space-around !important;
  gap: 0 !important;

  width: calc(100% - 44px) !important;
  max-width: 850px !important;
  min-width: 0 !important;
  min-height: 74px !important;

  box-sizing: border-box !important;
  margin: 8px auto max(9px, env(safe-area-inset-bottom, 0px)) !important;
  padding: 5px !important;

  /* Jangan potong indikator aktif di tab paling kanan. */
  overflow: visible !important;

  border: 1px solid transparent !important;
  border-radius: 999px !important;

  /* Benar-benar transparan, tanpa tint tambahan. */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  /* Blur hanya mengambil tampilan di belakang kaca. */
  -webkit-backdrop-filter: blur(28px) saturate(185%) !important;
  backdrop-filter: blur(28px) saturate(185%) !important;

  touch-action: none;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

/* Indikator mengikuti 4 tab, bukan 5 tab. */
.messenger .bottom-nav .nav-pill-indicator {
  position: absolute !important;
  z-index: 0 !important;

  top: 5px !important;
  bottom: 5px !important;
  left: 5px !important;

  width: calc((100% - 10px) / 4) !important;
  box-sizing: border-box !important;

  overflow: visible !important;
  border: 1px solid rgba(235, 249, 255, 0.24) !important;
  border-radius: 999px !important;

  /* Tidak ada warna cyan/biru solid pada pill. */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;

  transform-origin: center;
  will-change: transform, scale;

  transition:
    transform 560ms cubic-bezier(0.22, 1.4, 0.32, 1),
    scale 300ms cubic-bezier(0.2, 1.4, 0.3, 1) !important;
}

/* Hilangkan lapisan warna dari pseudo-element indikator lama. */
.messenger .bottom-nav .nav-pill-indicator::before,
.messenger .bottom-nav .nav-pill-indicator::after {
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Efek membesar saat disentuh, tetap dalam batas layar. */
.messenger .bottom-nav.nav-dragging .nav-pill-indicator {
  scale: 1.035 1.08 !important;

  background: transparent !important;
  background-color: transparent !important;

  border-color: rgba(245, 252, 255, 0.32) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;

  transition:
    transform 0ms linear,
    scale 180ms ease !important;
}

/* Kembali ke ukuran normal setelah tab dipilih. */
.messenger .bottom-nav:not(.nav-dragging) .nav-pill-indicator {
  scale: 1 1 !important;
}

/* Semua tombol tetap transparan. */
.messenger .bottom-nav .nav-item,
.messenger .bottom-nav .nav-item.nav-active {
  position: relative !important;
  z-index: 1 !important;

  flex: 1 1 0 !important;
  min-width: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border-color: transparent !important;
  box-shadow: none !important;
}

/* Warna teks dan ikon tidak memakai latar berwarna. */
.messenger .bottom-nav .nav-item {
  color: rgba(238, 246, 250, 0.90) !important;
}

.messenger .bottom-nav .nav-item.nav-active {
  color: #ffffff !important;
}

/* Perbaikan ukuran pada layar kecil. */
@media (max-width: 680px) {
  .messenger .bottom-nav {
    width: calc(100% - 44px) !important;
    min-height: 74px !important;
    padding: 5px !important;
    overflow: visible !important;
  }

  .messenger .bottom-nav .nav-pill-indicator {
    width: calc((100% - 10px) / 4) !important;
    top: 5px !important;
    bottom: 5px !important;
    left: 5px !important;
  }

  .messenger .bottom-nav .nav-item {
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
}

/* VEXAPP_BOTTOM_NAV_TRUE_GLASS_FIX_V2_END */



/* VEXAPP_CALL_HEADER_SVG_V1 */
.vex-call-header-actions button svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}



/* ============================================================
   VEXAPP_BOTTOM_NAV_CLEAR_CYAN_V2
   Clear transparent glass + electric blue/cyan drag indicator
   ============================================================ */

/* Background pill: benar-benar transparan, blur tetap aktif. */
.messenger .bottom-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 1px solid rgba(125, 225, 255, .30) !important;
  border-radius: 999px !important;

  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(100, 210, 255, .08),
    0 0 18px rgba(0, 180, 255, .07) !important;
}

/* Slider aktif: biru elektrik dan cyan. */
.messenger .bottom-nav .nav-pill-indicator {
  border: 1px solid rgba(145, 244, 255, .72) !important;

  background:
    radial-gradient(
      ellipse at 25% 0%,
      rgba(210, 250, 255, .42),
      transparent 58%
    ),
    linear-gradient(
      125deg,
      rgba(20, 116, 255, .94),
      rgba(0, 216, 255, .86) 54%,
      rgba(21, 95, 220, .92)
    ) !important;

  box-shadow:
    0 5px 18px rgba(0, 130, 255, .32),
    0 0 19px rgba(0, 210, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .48),
    inset 0 -1px 0 rgba(0, 70, 180, .20) !important;

  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
}

/* Ketika slider sedang digeser. */
.messenger .bottom-nav.nav-dragging .nav-pill-indicator {
  border-color: rgba(185, 250, 255, .95) !important;

  background:
    radial-gradient(
      ellipse at 25% 0%,
      rgba(225, 255, 255, .52),
      transparent 55%
    ),
    linear-gradient(
      125deg,
      rgba(0, 126, 255, 1),
      rgba(0, 229, 255, .98) 52%,
      rgba(0, 105, 240, .98)
    ) !important;

  box-shadow:
    0 8px 26px rgba(0, 120, 255, .42),
    0 0 28px rgba(0, 220, 255, .48),
    0 0 9px rgba(0, 220, 255, .40),
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -1px 0 rgba(0, 65, 190, .25) !important;
}

/* Reflection cyan pada slider. */
.messenger .bottom-nav .nav-pill-indicator::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 190, 255, .75),
    rgba(160, 250, 255, .95),
    rgba(0, 190, 255, .75),
    transparent
  ) !important;

  filter: blur(5px);
  opacity: .90;
}

.messenger .bottom-nav.nav-dragging .nav-pill-indicator::after {
  opacity: 1;
}

/* Teks dan ikon tetap jelas. */
.messenger .bottom-nav .nav-item {
  background: transparent !important;
  color: #d6edf7 !important;
}

.messenger .bottom-nav .nav-item.nav-active {
  background: transparent !important;
  color: #e9fcff !important;
  text-shadow: 0 0 10px rgba(0, 220, 255, .42);
}


/* VEXAPP_QUICK_ACTIONS_DIM_BACKDROP_V1 */

/* Latar aplikasi meredup saat popup terbuka. */
.messenger .vex-quick-actions-backdrop {
  position: fixed !important;
  z-index: 79 !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, .62) !important;

  -webkit-backdrop-filter: blur(3px) saturate(85%);
  backdrop-filter: blur(3px) saturate(85%);

  opacity: 1;
  animation: vex-quick-backdrop-fade-in-v1 240ms ease-out both;
}

/* Fade-in lembut. */
@keyframes vex-quick-backdrop-fade-in-v1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Popup tetap di atas backdrop. */
.messenger .vex-quick-actions {
  z-index: 81 !important;
}

.messenger .vex-fab-add-chat {
  z-index: 900 !important;
}

@media (prefers-reduced-motion: reduce) {
  .messenger .vex-quick-actions-backdrop {
    animation: none !important;
  }
}


/* VEXAPP_BOTTOM_TAB_MOTION_V2 */

/* Feedback sentuhan dan animasi ketika tab utama berpindah */
.bottom-nav .nav-item {
  -webkit-tap-highlight-color: transparent;
  transition:
    filter .2s ease,
    transform .2s cubic-bezier(.2, .8, .2, 1);
}

.bottom-nav .nav-item:active {
  transform: scale(.91);
  filter: brightness(1.22);
}

.bottom-nav .nav-item.nav-active {
  animation: vexBottomTabSelectV2 .40s cubic-bezier(.2, 1.4, .35, 1) both;
}

.bottom-nav .nav-item.nav-active svg {
  animation: vexBottomTabIconV2 .43s cubic-bezier(.2, 1.45, .35, 1) both;
  transform-origin: center;
}

@keyframes vexBottomTabSelectV2 {
  0% { filter: brightness(.82); }
  58% { filter: brightness(1.24); }
  100% { filter: brightness(1); }
}

@keyframes vexBottomTabIconV2 {
  0% { transform: scale(.78) rotate(-8deg); }
  62% { transform: scale(1.16) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav .nav-item,
  .bottom-nav .nav-item.nav-active,
  .bottom-nav .nav-item.nav-active svg {
    animation: none !important;
    transition: none !important;
  }
}


/* VEXAPP_MAIN_TAB_MOTION_V3 */

.bottom-nav .nav-item {
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, filter .2s ease;
}

.bottom-nav .nav-item:active {
  transform: scale(.92);
  filter: brightness(1.2);
}

.bottom-nav .nav-item.nav-active {
  animation: vexMainTabActivateV3 .43s cubic-bezier(.2,1.4,.35,1) both;
}

.bottom-nav .nav-item.nav-active .nav-icon {
  animation: vexMainTabIconV3 .45s cubic-bezier(.2,1.5,.35,1) both;
}

@keyframes vexMainTabActivateV3 {
  0% { filter: brightness(.82); }
  60% { filter: brightness(1.25); }
  100% { filter: brightness(1); }
}
@keyframes vexMainTabIconV3 {
  0% { transform: scale(.76) rotate(-10deg); }
  65% { transform: scale(1.17) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav .nav-item,
  .bottom-nav .nav-item.nav-active,
  .bottom-nav .nav-item.nav-active .nav-icon {
    animation: none !important;
    transition: none !important;
  }
}

/* VEXAPP_WA_LAYOUT_REPAIR_V1 */
/* Layout polish — presentation only; business logic is untouched. */

.status-feature.status-updates-wa {
  display: block !important;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  align-self: stretch;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 14px 16px 26px !important;
  box-sizing: border-box;
}

.status-feature.status-updates-wa,
.status-feature.status-updates-wa * {
  box-sizing: border-box;
}

.status-heading.status-updates-heading {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 0 8px !important;
}

.status-refresh {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px;
  margin: 0 0 0 auto !important;
  border-radius: 16px !important;
}

.status-section-title {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 12px 2px 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.28rem !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

.status-stories-strip {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin: 0 !important;
  padding: 0 2px 8px !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.status-stories-strip::-webkit-scrollbar {
  display: none !important;
}

.status-story,
.status-story.status-story-own {
  position: relative !important;
  display: block !important;
  flex: 0 0 144px !important;
  width: 144px !important;
  min-width: 144px !important;
  max-width: 144px !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 26px !important;
  scroll-snap-align: start;
  text-align: left;
}

.status-story-cover,
.status-story-placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.status-story-cover img,
.status-story-cover video,
.status-own-story img,
.status-own-story video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-own-story {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  border-radius: inherit;
  overflow: hidden;
}

.status-story-avatar,
.status-story-avatar-ring {
  z-index: 2;
}

.status-story-label {
  position: absolute !important;
  z-index: 3;
  right: 10px !important;
  bottom: 12px !important;
  left: 10px !important;
  max-width: calc(100% - 20px);
  overflow: hidden;
  font-size: 14px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
}

.status-add-bubble {
  z-index: 3;
}

.status-empty,
.status-empty.status-empty-wa {
  min-height: 0 !important;
  height: auto !important;
  margin: 10px 0 16px !important;
  padding: 14px !important;
}

/* CHAT: predictable header and readable conversation rows. */
.pane-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 16px;
}

.pane-heading > h1,
.pane-heading > h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.pane-heading .discovery-toggle.discovery-search-trigger {
  order: 5;
  display: flex;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 16px;
  border-radius: 17px;
  text-align: left;
  box-sizing: border-box;
}

.row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-align: left;
}

.row-text strong,
.row-text small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-text strong {
  font-size: 1rem;
  line-height: 1.3;
}

.row-text small {
  font-size: 0.88rem;
  line-height: 1.35;
  opacity: 0.78;
}

button:has(> .row-text) {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 12px 8px;
  border-radius: 0;
  text-align: left;
  box-shadow: none;
}

.vex-global-chat-avatar,
.vex-group-list-avatar {
  display: inline-flex;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}

.unread-badge {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

/* SETTINGS: clear categories, comfortable spacing, mobile-safe scrolling. */
.vps-overlay {
  padding: 14px;
  box-sizing: border-box;
}

.vps-dialog {
  display: flex !important;
  flex-direction: column !important;
  width: min(980px, calc(100vw - 28px)) !important;
  max-width: 980px !important;
  max-height: calc(100dvh - 28px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

.vps-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px !important;
  border-bottom: 1px solid rgba(150, 190, 205, 0.14);
}

.vps-header h2 {
  margin: 2px 0 6px !important;
  line-height: 1.2;
}

.vps-header p {
  margin: 0 !important;
  line-height: 1.45;
}

.vps-layout {
  display: grid !important;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr) !important;
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}

.vps-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 5px !important;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 14px !important;
  border-right: 1px solid rgba(150, 190, 205, 0.14);
}

.vps-nav-item {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 13px !important;
  border: 1px solid transparent;
  border-radius: 13px !important;
  text-align: left !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vps-nav-item.is-active {
  border-color: rgba(74, 194, 220, 0.28);
}

.vps-content {
  min-width: 0;
  min-height: 0;
  overflow: auto !important;
  padding: 20px !important;
  overscroll-behavior: contain;
}

.vps-info-card {
  margin-bottom: 14px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

.vps-info-card h4 {
  margin: 0 0 7px;
  line-height: 1.3;
}

.vps-info-card p {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.vps-section-heading {
  margin: 0 0 16px !important;
  line-height: 1.3;
}

@media (max-width: 700px) {
  .status-feature.status-updates-wa {
    padding: 12px 14px 24px !important;
  }

  .status-story,
  .status-story.status-story-own {
    flex-basis: 142px !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 248px !important;
    min-height: 248px !important;
    max-height: 248px !important;
  }

  .pane-heading {
    gap: 9px;
  }

  .pane-heading > h1,
  .pane-heading > h2 {
    font-size: clamp(1.45rem, 6vw, 1.9rem);
  }

  .vps-overlay {
    padding: 0 !important;
  }

  .vps-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .vps-header {
    padding:
      calc(14px + env(safe-area-inset-top, 0px))
      16px 13px !important;
    gap: 10px;
  }

  .vps-close {
    flex: 0 0 auto;
    min-height: 40px;
  }

  .vps-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .vps-nav {
    max-height: 38dvh;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 9px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(150, 190, 205, 0.14);
  }

  .vps-nav-item {
    flex: 0 0 auto;
    min-height: 43px;
    padding: 10px 12px !important;
  }

  .vps-content {
    padding: 15px 13px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .vps-info-card {
    padding: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-stories-strip {
    scroll-behavior: auto !important;
  }
}
/* VEXAPP_WA_LAYOUT_REPAIR_V2 */

/* Hilangkan baris refresh Status sepenuhnya agar tidak menyisakan ruang kosong. */
.status-feature.status-updates-wa > header.status-heading.status-updates-heading {
  display: none !important;
}
button.status-refresh,
button.profile-history-refresh,
button[class*="refresh" i],
button[aria-label*="muat ulang" i],
button[aria-label*="reload" i],
button[title*="refresh" i] {
  display: none !important;
}

/* Kartu status: ukuran konsisten, horizontal, tanpa kartu melebar. */
.status-feature.status-updates-wa {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 14px 20px !important;
  box-sizing: border-box !important;
}
.status-feature.status-updates-wa .status-section-title {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 10px 2px 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
}
.status-feature.status-updates-wa .status-section-title h3 {
  margin: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
}
.status-feature.status-updates-wa .status-stories-strip {
  display: flex !important;
  position: static !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 2px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}
.status-feature.status-updates-wa .status-stories-strip::-webkit-scrollbar {
  display: none !important;
}
.status-feature.status-updates-wa .status-stories-strip > .status-own-story {
  display: block !important;
  position: relative !important;
  flex: 0 0 142px !important;
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
  height: 248px !important;
  min-height: 248px !important;
  max-height: 248px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.status-feature.status-updates-wa .status-stories-strip > button.status-story,
.status-feature.status-updates-wa .status-stories-strip > .status-own-story > button.status-story {
  display: block !important;
  position: relative !important;
  flex: 0 0 142px !important;
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
  height: 248px !important;
  min-height: 248px !important;
  max-height: 248px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
}
.status-feature.status-updates-wa .status-story-cover {
  display: flex !important;
  position: absolute !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}
.status-feature.status-updates-wa .status-story-cover img,
.status-feature.status-updates-wa .status-story-cover video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Teks status langsung menjadi isi kartu, bukan kotak di dalam kartu. */
.status-feature.status-updates-wa .status-story-text-preview {
  display: flex !important;
  position: absolute !important;
  inset: 20px 12px 42px !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}
.status-feature.status-updates-wa .status-story-label {
  position: absolute !important;
  z-index: 4 !important;
  right: 10px !important;
  bottom: 12px !important;
  left: 10px !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
}

/* Chat: search kembali ke alur normal, tidak menimpa garis atau filter. */
.pane-heading {
  display: flex !important;
  position: relative !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 10px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 24px !important;
  padding: 0 0 14px !important;
  border-bottom: 0 !important;
  overflow: visible !important;
}
.pane-heading .discovery-search-trigger {
  display: flex !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  order: 5 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 54px !important;
  margin: 8px 0 8px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 18px !important;
  text-align: left !important;
}
.pane-heading .discovery-search-trigger + * {
  margin-top: 0 !important;
}
.pane-heading > h1,
.pane-heading > h2 {
  min-width: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
}

/* Daftar chat: isi teks rapi dan tidak mendorong lebar layar. */
.row-text {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
}
.row-text strong,
.row-text small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.vex-global-chat-avatar,
.vex-group-list-avatar {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
}

/* Pengaturan: panel tidak meluber di layar HP. */
.vps-overlay {
  padding: 0 !important;
  box-sizing: border-box !important;
}
.vps-dialog {
  display: flex !important;
  flex-direction: column !important;
  width: min(980px, 100vw) !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.vps-layout {
  display: grid !important;
  grid-template-columns: minmax(170px, .34fr) minmax(0, 1fr) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}
.vps-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px !important;
}
.vps-nav-item {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}
.vps-content {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 16px !important;
  overscroll-behavior: contain;
}
.vps-info-card {
  margin-bottom: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
}
@media (max-width: 700px) {
  .pane-heading {
    gap: 12px 9px !important;
    margin-bottom: 24px !important;
    padding-bottom: 14px !important;
  }
  .status-feature.status-updates-wa .status-stories-strip > .status-own-story,
  .status-feature.status-updates-wa .status-stories-strip > button.status-story,
  .status-feature.status-updates-wa .status-stories-strip > .status-own-story > button.status-story {
    flex-basis: 142px !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    height: 248px !important;
    min-height: 248px !important;
    max-height: 248px !important;
  }
  .vps-dialog {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .vps-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .vps-nav {
    max-height: 35dvh !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(150,190,205,.14);
    padding: 9px 12px !important;
  }
  .vps-content {
    padding: 14px 13px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/*
 * VexApp UI Consistency + Desktop Optimization V1
 * Layer tambahan: tidak mengganti stylesheet utama.
 * Redesain khusus UI Group tidak termasuk patch ini.
 */

:root {
  --vex-ui-control-radius: 12px;
  --vex-ui-focus-ring:
    var(--focus-color, var(--accent-color, #00dffc));
}

/* Ukuran elemen lebih terkontrol dan mencegah overflow. */
.messenger,
.messenger-shell {
  min-width: 0;
}

.messenger-shell :where(*, *::before, *::after) {
  box-sizing: border-box;
}

.messenger-shell :where(img, video, canvas, iframe) {
  max-width: 100%;
}

.messenger-shell :where(input, textarea, select) {
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  border-radius: var(--vex-ui-control-radius);
}

.messenger-shell :where(button, input, textarea, select, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}

/* Fokus keyboard konsisten, tanpa mengubah warna tombol utama. */
.messenger-shell :where(
  button,
  input,
  textarea,
  select,
  [role="button"]
):focus-visible {
  outline: 2px solid var(--vex-ui-focus-ring);
  outline-offset: 2px;
}

/* Transisi ringan untuk kontrol interaktif. */
@media (prefers-reduced-motion: no-preference) {
  .messenger-shell :where(
    button,
    input,
    textarea,
    select,
    [role="button"]
  ) {
    transition:
      background-color 150ms ease,
      border-color 150ms ease,
      color 150ms ease,
      box-shadow 150ms ease;
  }
}

/* Jangan memaksakan animasi pada pengguna yang membatasi motion. */
@media (prefers-reduced-motion: reduce) {
  .messenger-shell *,
  .messenger-shell *::before,
  .messenger-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Desktop dan laptop:
 * manfaatkan layar lebih lebar tanpa memperbesar sidebar berlebihan.
 */
@media (min-width: 1024px) {
  .messenger {
    width: 100%;
    max-width: 1760px;
    margin-inline: auto;
  }

  .messenger-shell {
    width: 100%;
    max-width: none;
    grid-template-columns:
      clamp(280px, 24vw, 360px)
      minmax(0, 1fr);
  }
}

/* Monitor besar: lebar sidebar stabil supaya area chat tetap luas. */
@media (min-width: 1600px) {
  .messenger-shell {
    grid-template-columns: 360px minmax(0, 1fr);
  }
}
/*
 * VexApp UI V2
 * Search categories + unified user/group profile visual language.
 * Tidak mengubah query/database atau hak admin.
 */

:root {
  --vex-v2-line: rgba(85, 227, 250, 0.19);
  --vex-v2-surface: var(--profile-bg, #071523);
  --vex-v2-accent: var(--accent-color, #00dffc);
}

/* Kategori chat: rapi, konsisten, dan tetap bisa digulir di layar sempit. */
.messenger .vex-chat-filters {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 10px 12px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.messenger .vex-chat-filters::-webkit-scrollbar {
  display: none;
}

.messenger .vex-filter-chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--vex-v2-line);
  border-radius: 999px;
  background: rgba(9, 28, 42, 0.82);
  color: var(--vex-text, #eaf8fc);
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}

.messenger .vex-filter-chip.active {
  border-color: rgba(85, 227, 250, 0.58);
  background: rgba(0, 223, 252, 0.12);
  color: var(--vex-v2-accent);
}

.messenger .vex-filter-chip:focus-visible,
.vex-group-info-dialog :where(button, input, textarea, select):focus-visible {
  outline: 2px solid var(--vex-v2-accent);
  outline-offset: 2px;
}

/* Selaraskan permukaan dialog profil user dan informasi group. */
.user-about-dialog,
.vex-group-info-overlay .vex-group-info-dialog {
  color: var(--vex-text, #eaf8fc);
  background:
    radial-gradient(
      ellipse at top,
      rgba(0, 223, 252, 0.075),
      transparent 62%
    ),
    var(--vex-v2-surface) !important;
  border: 1px solid var(--vex-v2-line) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.43);
  border-radius: 22px;
}

/* Header group menggunakan bahasa visual header profil user. */
.user-about-header,
.vex-group-info-dialog .vex-group-info-topbar {
  background: rgba(7, 21, 35, 0.72);
  border-bottom: 1px solid var(--vex-v2-line);
}

.vex-group-info-dialog .vex-group-info-topbar {
  color: var(--vex-text, #eaf8fc);
}

.vex-group-info-dialog .vex-group-info-tabs {
  gap: 8px;
  border-bottom: 1px solid var(--vex-v2-line);
}

.vex-group-info-dialog .vex-group-info-tabs button {
  min-height: 42px;
  border-radius: 10px 10px 0 0;
  color: var(--profile-muted, #9bb9c8);
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.vex-group-info-dialog .vex-group-info-tabs button.is-active {
  color: var(--vex-v2-accent);
  background: rgba(0, 223, 252, 0.09);
  border-color: rgba(85, 227, 250, 0.4);
}

.vex-group-info-dialog .vex-group-info-content {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vex-group-info-dialog .vex-group-info-content :where(
  input,
  textarea,
  select
) {
  max-width: 100%;
  font: inherit;
  border-radius: 12px;
}

.vex-group-info-dialog .vex-group-info-content :where(img, video) {
  max-width: 100%;
}

/* Manfaatkan ruang desktop tanpa memperbesar seluruh konten tanpa batas. */
@media (min-width: 1024px) {
  .vex-group-info-overlay .vex-group-info-dialog {
    width: min(940px, calc(100vw - 64px));
    max-width: 940px;
  }
}

/* Pertahankan pengalaman layar penuh pada HP. */
@media (max-width: 700px) {
  .vex-group-info-overlay {
    padding: 0;
  }

  .vex-group-info-overlay .vex-group-info-dialog {
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .messenger .vex-filter-chip,
  .vex-group-info-dialog * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/*
 * VexApp UI Polish V3
 * Separate chat-filter state and align group identity UI with user profile.
 */

:root {
  --vex-v3-line: rgba(85, 227, 250, 0.22);
  --vex-v3-accent: var(--accent-color, #00dffc);
  --vex-v3-panel: var(--profile-panel, #0c1d2d);
}

/* Tombol panel kategori */
.messenger .chat-filter-toggle[aria-expanded="true"] {
  border-color: var(--vex-v3-line);
  background: rgba(0, 223, 252, 0.10);
  color: var(--vex-v3-accent);
}

/* Kategori muncul di dekat header dan tidak bercampur dengan hasil pengguna. */
.messenger .vex-chat-filters {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.messenger .vex-chat-filters::-webkit-scrollbar {
  display: none;
}

.messenger .vex-filter-chip {
  flex: 0 0 auto;
  min-height: 38px;
  border-radius: 999px;
  white-space: nowrap;
}

.messenger .vex-filter-chip.active {
  border-color: rgba(85, 227, 250, 0.65);
  background: rgba(0, 223, 252, 0.13);
  color: var(--vex-v3-accent);
}

/* Group dialog mempertahankan layout dasarnya, dengan permukaan konsisten. */
.vex-group-info-overlay .vex-group-info-dialog {
  color: var(--vex-text, #eaf8fc);
  border: 1px solid var(--vex-v3-line);
  border-radius: 22px;
  background:
    radial-gradient(
      ellipse at top,
      rgba(0, 223, 252, 0.07),
      transparent 60%
    ),
    var(--vex-v3-panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

/* Kartu identitas group mengikuti pola kartu identitas profil user. */
.vex-group-info-overlay .vex-group-info-dialog .vex-group-info-hero {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 5px;
  min-width: 0;
  margin: 14px;
  padding: 20px;
  border: 1px solid var(--vex-v3-line);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(0, 223, 252, 0.14),
      transparent 48%
    ),
    rgba(9, 28, 42, 0.76);
  text-align: left;
}

.vex-group-info-overlay .vex-group-info-hero .vex-group-info-emoji {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0;
  border: 1px solid var(--vex-v3-line);
  border-radius: 19px;
  background: rgba(0, 223, 252, 0.10);
  color: var(--vex-v3-accent);
  font-size: 34px;
  overflow: hidden;
}

.vex-group-info-hero .vex-group-info-emoji svg {
  width: 48px;
  height: 48px;
  max-width: 100%;
}

.vex-group-info-overlay .vex-group-info-hero > h3 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  color: var(--vex-text, #eaf8fc);
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.vex-group-info-overlay .vex-group-info-hero > p {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 4px 0 0;
  color: var(--profile-muted, #9bb9c8);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Aksi group tetap tersedia dan tidak melebarkan panel. */
.vex-group-info-overlay .vex-group-info-hero .vex-group-info-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 12px;
}

.vex-group-info-hero .vex-group-info-action {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Deskripsi dan detail group mengikuti gaya kartu bio/detail profil. */
.vex-group-info-overlay .vex-group-description-section {
  min-width: 0;
  margin: 10px 14px 14px;
  padding: 16px;
  border: 1px solid var(--vex-v3-line);
  border-radius: 16px;
  background: rgba(9, 28, 42, 0.58);
  overflow-wrap: anywhere;
}

.vex-group-info-overlay .vex-group-description-text {
  margin: 0;
  color: var(--vex-text, #eaf8fc);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.vex-group-info-overlay .vex-group-created-by {
  margin: 12px 0 0;
  color: var(--profile-muted, #9bb9c8);
  font-size: 11px;
  line-height: 1.6;
}

/* Tab dan kontrol tetap konsisten. */
.vex-group-info-overlay .vex-group-info-tabs {
  gap: 8px;
  border-bottom: 1px solid var(--vex-v3-line);
}

.vex-group-info-overlay .vex-group-info-tabs button {
  min-height: 42px;
  border-radius: 10px 10px 0 0;
}

.vex-group-info-overlay .vex-group-info-content {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vex-group-info-overlay .vex-group-info-content :where(
  input, textarea, select
) {
  max-width: 100%;
}

/* Laptop dan desktop */
@media (min-width: 1024px) {
  .vex-group-info-overlay .vex-group-info-dialog {
    width: min(940px, calc(100vw - 64px));
    max-width: 940px;
  }
}

/* HP */
@media (max-width: 700px) {
  .vex-group-info-overlay {
    padding: 0;
  }

  .vex-group-info-overlay .vex-group-info-dialog {
    border-radius: 0;
  }

  .vex-group-info-overlay .vex-group-info-hero {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 12px;
    margin: 10px;
    padding: 14px;
  }

  .vex-group-info-overlay .vex-group-info-hero .vex-group-info-emoji {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    font-size: 28px;
  }

  .vex-group-info-overlay .vex-group-info-hero > h3 {
    font-size: 18px;
  }

  .vex-group-info-overlay .vex-group-description-section {
    margin: 10px;
    padding: 14px;
  }

  .vex-group-info-overlay .vex-group-info-hero .vex-group-info-actions {
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vex-group-info-overlay *,
  .messenger .vex-filter-chip {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* VexApp UI V4: Search + Discovery + compact group icon. */

.messenger .pane-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.messenger .pane-heading > h1 {
  min-width: 0;
  margin-right: auto;
}

.messenger .pane-heading .discovery-search-trigger,
.messenger .pane-heading .saved-contacts-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
}

.messenger .discovery-search-trigger[aria-expanded="true"] {
  border-color: rgba(85,227,250,.58);
  background: rgba(0,223,252,.12);
  color: var(--accent-color,#00dffc);
}

/* Kategori tepat di bawah header, bisa digeser di layar kecil. */
.messenger .vex-chat-filters {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 9px 0 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.messenger .vex-chat-filters::-webkit-scrollbar { display: none; }

.messenger .vex-filter-chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.messenger .vex-filter-chip.active {
  border-color: rgba(85,227,250,.6);
  background: rgba(0,223,252,.12);
  color: var(--accent-color,#00dffc);
}

.messenger .global-directory-heading {
  min-width: 0;
  max-width: 100%;
  margin-block: 8px 10px;
  overflow-wrap: anywhere;
}

.messenger .list-pane form.search-box {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-block: 8px 12px;
  border-radius: 14px;
}

.messenger .list-pane form.search-box input {
  min-width: 0;
  max-width: 100%;
}

/* Ikon group sedikit lebih kecil daripada V3. */
.vex-group-info-overlay .vex-group-info-dialog
.vex-group-info-hero .vex-group-info-emoji {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px;
  border-radius: 14px;
  font-size: 24px;
}

.vex-group-info-overlay .vex-group-info-dialog
.vex-group-info-hero .vex-group-info-emoji svg {
  width: 32px;
  height: 32px;
  max-width: 100%;
}

@media (max-width: 700px) {
  .messenger .pane-heading { gap: 6px; }

  .messenger .pane-heading .discovery-search-trigger,
  .messenger .pane-heading .saved-contacts-toggle {
    min-height: 36px;
    padding: 7px 9px;
    gap: 5px;
    font-size: 11px;
  }

  .vex-group-info-overlay .vex-group-info-dialog
  .vex-group-info-hero .vex-group-info-emoji {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    font-size: 21px;
  }

  .vex-group-info-overlay .vex-group-info-dialog
  .vex-group-info-hero .vex-group-info-emoji svg {
    width: 29px;
    height: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .messenger .vex-filter-chip,
  .messenger .discovery-search-trigger,
  .messenger .saved-contacts-toggle {
    transition: none !important;
  }
}

/* VEXAPP_HEADER_SPACING_FIX_V2 */

/* Header: judul di atas, dua tombol di bawah tanpa saling memotong. */
.messenger .pane-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center;
  column-gap: 10px !important;
  row-gap: 12px !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 4px;
  box-sizing: border-box;
  overflow: visible !important;
}

.messenger .pane-heading > h1 {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  overflow-wrap: anywhere;
}

.messenger .pane-heading > .online-dot {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.messenger .pane-heading .discovery-search-trigger {
  grid-column: 1;
  grid-row: 2;
}

.messenger .pane-heading .saved-contacts-toggle {
  grid-column: 2;
  grid-row: 2;
}

/* Paksa kedua tombol memakai lebar kolom masing-masing. */
.messenger .pane-heading .discovery-search-trigger,
.messenger .pane-heading .saved-contacts-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 40px;
  margin: 0 !important;
  padding: 8px 6px !important;
  gap: 5px;
  box-sizing: border-box;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible !important;
}

/* Jarak kategori dari header dan panel Discovery. */
.messenger .vex-chat-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 14px 0 18px !important;
  padding: 10px 2px 12px !important;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.messenger .vex-chat-filters::-webkit-scrollbar {
  display: none;
}

.messenger .vex-chat-filters .vex-filter-chip {
  flex: 0 0 auto;
  min-height: 38px;
  margin: 0 !important;
  padding: 9px 13px !important;
  box-sizing: border-box;
  border-radius: 999px;
  white-space: nowrap;
}

/* Jangan biarkan judul daftar menempel ke kategori. */
.messenger .list-heading {
  margin-top: 4px;
}

@media (max-width: 360px) {
  .messenger .pane-heading {
    column-gap: 7px !important;
    row-gap: 10px !important;
  }

  .messenger .pane-heading .discovery-search-trigger,
  .messenger .pane-heading .saved-contacts-toggle {
    padding-inline: 4px !important;
    gap: 4px;
    font-size: 11px;
  }

  .messenger .vex-chat-filters {
    gap: 8px !important;
  }

  .messenger .vex-chat-filters .vex-filter-chip {
    padding-inline: 10px !important;
  }
}

/* VEXAPP_WHATSAPP_SEARCH_HEADER_V5 */

/* Header: jarak nyata antara judul/Kontak dengan pencarian. */
.list-pane .pane-heading,
.messenger .list-pane .pane-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto max-content !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 12px 14px 10px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.list-pane .pane-heading > h1,
.messenger .list-pane .pane-heading > h1 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

.list-pane .pane-heading > .online-dot,
.messenger .list-pane .pane-heading > .online-dot {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  margin: 0 !important;
}

/* Kontak tetap di sisi kanan baris judul. */
.list-pane .pane-heading > .saved-contacts-toggle,
.messenger .list-pane .pane-heading > .saved-contacts-toggle {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  position: relative !important;
  inset: auto !important;
  order: 0 !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Pencarian penuh di bawah; tidak dipotong oleh tinggi tetap. */
.list-pane .pane-heading > .discovery-search-trigger,
.messenger .list-pane .pane-heading > .discovery-search-trigger {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  position: relative !important;
  inset: auto !important;
  order: 0 !important;
  display: inline-flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transform: none !important;
}

.list-pane .pane-heading > .discovery-search-trigger > span,
.messenger .list-pane .pane-heading > .discovery-search-trigger > span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Beri ruang terpisah untuk filter dan daftar chat. */
.list-pane .vex-chat-filters,
.messenger .list-pane .vex-chat-filters {
  margin-top: 12px !important;
  margin-bottom: 18px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 360px) {
  .list-pane .pane-heading,
  .messenger .list-pane .pane-heading {
    column-gap: 7px !important;
    row-gap: 18px !important;
    padding-inline: 10px !important;
  }

  .list-pane .pane-heading > .saved-contacts-toggle,
  .messenger .list-pane .pane-heading > .saved-contacts-toggle {
    padding-inline: 7px !important;
    font-size: 11px !important;
  }

  .list-pane .pane-heading > .discovery-search-trigger,
  .messenger .list-pane .pane-heading > .discovery-search-trigger {
    padding-inline: 11px !important;
  }
}
/* VEXAPP_UNIFIED_APP_HEADERS_V1 */

/* Header utama menyatu dengan background halaman di seluruh tab. */
.messenger .main-header,
.messenger .pane-heading,
.messenger .conversation-header,
.messenger .status-heading,
.messenger .vps-detail-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Judul halaman dibuat sedikit lebih besar dan tegas. */
.messenger .pane-heading h1 {
  font-size: 27px !important;
  font-weight: 800 !important;
  letter-spacing: -0.7px !important;
}

/* Rapikan posisi judul VexApp pada halaman Chat. */
.messenger-chat-home .list-pane .pane-heading {
  min-height: 54px !important;
  margin: 0 !important;
  padding: 6px 0 12px !important;
  border: 0 !important;
  background: transparent !important;
}

.messenger-chat-home .list-pane .pane-heading h1 {
  font-size: 27px !important;
  font-weight: 800 !important;
}
/* VEXAPP_ICON_ONLY_NAV_POLISH_V1 */

/* Label tetap tersedia untuk screen reader, tanpa tampil secara visual. */
.messenger .bottom-nav .nav-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Empat tombol ikon dengan ukuran dan posisi yang konsisten. */
.messenger .bottom-nav .nav-item {
  display: flex !important;
  flex: 1 1 25% !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 25% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
}

/* Ikon */
.messenger .bottom-nav .nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: translateZ(0);
  transition:
    transform 240ms cubic-bezier(.2, .75, .25, 1),
    opacity 200ms ease;
}

.messenger .bottom-nav .nav-icon svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  overflow: visible;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.messenger .bottom-nav .nav-item {
  color: rgba(225, 235, 245, .76) !important;
}

.messenger .bottom-nav .nav-item.nav-active {
  color: #ffffff !important;
}

.messenger .bottom-nav .nav-item.nav-active .nav-icon {
  transform: scale(1.07);
}

.messenger .bottom-nav .nav-item:active .nav-icon {
  transform: scale(.91);
}

/* Pill aktif: kaca lembut dengan gerakan yang konsisten. */
.messenger .bottom-nav .nav-pill-indicator {
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 5px !important;
  width: calc((100% - 10px) / 4) !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 999px !important;

  background:
    radial-gradient(
      ellipse at 25% 0%,
      rgba(255, 255, 255, .24),
      transparent 62%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .15),
      rgba(255, 255, 255, .065) 52%,
      rgba(125, 160, 255, .13)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -1px 0 rgba(255, 255, 255, .055),
    0 4px 15px rgba(0, 0, 0, .13) !important;

  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;

  transform-origin: center;
  will-change: transform, scale;
  animation: none !important;
}

/* Drag: indikator mengikuti gerakan jari tanpa tertinggal. */
.messenger .bottom-nav.nav-dragging .nav-pill-indicator {
  scale: 1.035 1.075 !important;
  border-color: rgba(255, 255, 255, .38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 5px 18px rgba(0, 0, 0, .16) !important;
  transition: none !important;
}

/* Hapus kilatan lama yang dapat bertabrakan dengan animasi pill baru. */
.messenger .bottom-nav .nav-pill-indicator::after {
  animation: none !important;
  opacity: 0 !important;
}

/* Animasi utama hanya aktif saat perangkat mengizinkannya. */
@media (prefers-reduced-motion: no-preference) {
  .messenger .bottom-nav .nav-pill-indicator {
    scale: 1 1;
    transition:
      transform 540ms cubic-bezier(.22, .82, .22, 1),
      scale 300ms cubic-bezier(.2, .8, .25, 1),
      background 220ms ease,
      border-color 220ms ease,
      box-shadow 240ms ease !important;
  }

  .messenger .bottom-nav:not(.nav-dragging) .nav-pill-indicator {
    scale: 1 1 !important;
  }
}

/* Hormati pengaturan reduce motion perangkat. */
@media (prefers-reduced-motion: reduce) {
  .messenger .bottom-nav .nav-pill-indicator,
  .messenger .bottom-nav .nav-item,
  .messenger .bottom-nav .nav-icon,
  .messenger .bottom-nav .nav-pill-indicator::after {
    animation: none !important;
    transition: none !important;
    scale: 1 1 !important;
  }
}


/* VEXAPP_NAV_GRID_ALIGNMENT_FIX_V1 */

/* Empat kolom grid mencegah tombol saling menumpuk. */
.messenger .bottom-nav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  padding: 5px !important;
}

/* Setiap tombol menempati satu kolom penuh. */
.messenger .bottom-nav > .nav-item {
  position: relative !important;
  display: flex !important;
  grid-row: 1 !important;
  grid-column: auto !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Pastikan setiap ikon berada tepat di tengah kolomnya. */
.messenger .bottom-nav > .nav-item .nav-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pill memiliki ukuran persis satu kolom grid. */
.messenger .bottom-nav > .nav-pill-indicator {
  position: absolute !important;
  z-index: 0 !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 5px !important;
  width: calc((100% - 10px) / 4) !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Tombol dan ikon selalu tampil di atas pill. */
.messenger .bottom-nav > .nav-item {
  z-index: 1 !important;
}

.messenger .bottom-nav > .nav-item .nav-icon svg {
  flex: 0 0 auto !important;
  width: 25px !important;
  height: 25px !important;
  margin: auto !important;
}
.vex-call-history {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  padding: 16px 12px 110px;
  color: var(--text-primary, #e5e7eb);
  box-sizing: border-box;
}

.vex-call-history-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
}

.vex-call-brand-mark {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  place-items: center;
  border-radius: 15px;
  color: white;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 8px 24px rgba(37, 99, 235, .28);
  font-size: 21px;
  font-weight: 900;
}

.vex-call-history-heading h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 850;
}

.vex-call-history-heading p {
  margin: 4px 0 0;
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
}

.vex-call-history-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px;
  font-size: 13px;
}

.vex-call-history-title span {
  color: #bfdbfe;
  background: rgba(37, 99, 235, .16);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
}

.vex-call-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vex-call-contact {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 17px;
  background: rgba(30, 41, 59, .37);
}

.vex-call-contact-avatar {
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: 50%;
  color: #dbeafe;
  background: linear-gradient(145deg, rgba(37, 99, 235, .35), #172554);
  font-size: 19px;
  font-weight: 800;
}

.vex-call-contact-avatar img,
.vex-call-big-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vex-call-contact-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vex-call-contact-info strong,
.vex-call-contact-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vex-call-contact-info strong {
  font-size: 13px;
}

.vex-call-contact-info small {
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
}

.vex-call-contact-actions {
  display: flex;
  gap: 7px;
}

.vex-call-contact-actions button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, .19);
  border-radius: 13px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, .14);
  cursor: pointer;
}

.vex-call-contact-actions button:active {
  transform: scale(.95);
}

.vex-call-contact-actions svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vex-call-empty {
  padding: 32px 15px;
  border: 1px dashed rgba(148, 163, 184, .2);
  border-radius: 19px;
  text-align: center;
}

.vex-call-empty > div {
  margin-bottom: 12px;
  color: #60a5fa;
  font-size: 32px;
}

.vex-call-empty strong {
  font-size: 13px;
}

.vex-call-empty p,
.vex-call-network-note {
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
  line-height: 1.6;
}

.vex-call-network-note {
  padding: 0 5px;
}

.vex-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(1, 5, 15, .85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.vex-call-window {
  display: flex;
  flex-direction: column;
  width: min(100%, 720px);
  max-height: 95dvh;
  overflow: hidden;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 25px;
  background: #08111f;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .6);
}

.vex-call-window-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, .13);
}

.vex-call-window-header > div:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.vex-call-window-header strong {
  font-size: 14px;
}

.vex-call-window-header small {
  color: #94a3b8;
  font-size: 11px;
}

.vex-call-status-dot,
.vex-call-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f59e0b;
}

.vex-call-status-dot.is-connected {
  background: #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, .6);
}

.vex-call-stage {
  position: relative;
  display: grid;
  min-height: 300px;
  height: min(60dvh, 550px);
  overflow: hidden;
  place-items: center;
  background: radial-gradient(ellipse at 50% 30%, #1e3354, #07101f 70%);
}

.vex-call-remote-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050b15;
}

.vex-call-audio-sink {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -10px;
  bottom: 0;
  opacity: .01;
}

.vex-call-avatar-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  pointer-events: none;
}

.vex-call-big-avatar {
  display: grid;
  width: 100px;
  height: 100px;
  overflow: hidden;
  place-items: center;
  border: 2px solid rgba(147, 197, 253, .35);
  border-radius: 35px;
  color: white;
  background: linear-gradient(145deg, #2563eb, #172554);
  box-shadow: 0 20px 65px rgba(37, 99, 235, .25);
  font-size: 38px;
  font-weight: 800;
}

.vex-call-avatar-stage h2 {
  margin: 18px 0 7px;
  font-size: 21px;
}

.vex-call-avatar-stage p {
  margin: 0;
  color: #bfdbfe;
  font-size: 12px;
}

.vex-call-connecting {
  display: flex;
  gap: 5px;
  margin-top: 16px;
}

.vex-call-connecting i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a5fa;
  animation: vex-call-pulse 1s infinite ease-in-out;
}

.vex-call-connecting i:nth-child(2) { animation-delay: .15s; }
.vex-call-connecting i:nth-child(3) { animation-delay: .3s; }

@keyframes vex-call-pulse {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-5px); }
}

.vex-call-local-tile {
  position: absolute;
  z-index: 3;
  right: 14px;
  top: 14px;
  width: clamp(90px, 25%, 175px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 17px;
  background: #111827;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.vex-call-local-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.vex-call-local-tile span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 7px;
  color: white;
  background: rgba(0, 0, 0, .5);
  font-size: 10px;
}

.vex-call-local-placeholder {
  display: none;
}

.vex-call-video-badges {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 12px;
}

.vex-call-live-dot {
  width: auto;
  height: auto;
  padding: 4px 7px;
  color: white;
  background: #dc2626;
  font-size: 9px;
  font-weight: 800;
}

.vex-call-inline-error {
  position: absolute;
  z-index: 4;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(248, 113, 113, .2);
  border-radius: 12px;
  color: #fecaca;
  background: rgba(127, 29, 29, .8);
  font-size: 11px;
  line-height: 1.5;
}

.vex-call-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 25px);
  padding: 18px 12px 22px;
  background: #080f1d;
}

.vex-call-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 59px;
  border: 0;
  color: #e2e8f0;
  background: transparent;
  cursor: pointer;
}

.vex-call-control > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 19px;
  background: #1e293b;
  font-size: 21px;
}

.vex-call-control small {
  font-size: 10px;
  white-space: nowrap;
}

.vex-call-control.is-off > span {
  background: #475569;
}

.vex-call-control.accept > span {
  color: white;
  background: #16a34a;
}

.vex-call-control.reject > span {
  color: white;
  background: #dc2626;
}

.vex-call-control:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.vex-call-toast {
  position: fixed;
  z-index: 20001;
  left: 14px;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 570px;
  margin: auto;
  padding: 12px 15px;
  border: 1px solid rgba(248, 113, 113, .25);
  border-radius: 14px;
  color: #fecaca;
  background: #451a1a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  font-size: 12px;
  line-height: 1.5;
}

.vex-call-toast button {
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 20px;
}

@media (max-width: 480px) {
  .vex-call-overlay { padding: 7px; }
  .vex-call-window { max-height: 96dvh; border-radius: 21px; }
  .vex-call-stage { min-height: 270px; height: 55dvh; }
  .vex-call-controls { gap: 7px; padding: 14px 6px 18px; }
  .vex-call-control { min-width: 52px; }
  .vex-call-control > span { width: 46px; height: 46px; border-radius: 17px; }
}



/* VEXAPP_CALL_FULLSCREEN_POLISH_V1 */

/* Fullscreen call experience */
.vex-call-window {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.vex-call-window-header {
  flex: 0 0 auto;
  padding-top: max(14px, env(safe-area-inset-top)) !important;
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
}

.vex-call-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  overscroll-behavior: contain;
}

.vex-call-stage video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.vex-call-window button {
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.vex-call-window button:focus-visible {
  outline: 2px solid rgba(95, 216, 255, .9);
  outline-offset: 3px;
}

.vex-call-window button:active {
  transform: scale(.95);
}

@media (max-width: 600px) {
  .vex-call-window-header {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }

  .vex-call-stage {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vex-call-window *,
  .vex-call-window *::before,
  .vex-call-window *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}



/* VEXCALL_PREMIUM_CONTROLS_V1 */
.vex-call-controls {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 24px);
  padding: 24px 18px max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .08);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .70), rgba(2, 6, 23, .96));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.vex-call-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 66px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: #f8fafc;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, opacity .18s ease;
}

.vex-call-control > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  color: #f8fafc;
  background: rgba(255, 255, 255, .105);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .20);
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.vex-call-control > span svg {
  display: block;
  width: 25px;
  height: 25px;
  stroke: currentColor;
  fill: none;
}

.vex-call-control small {
  color: rgba(241, 245, 249, .88);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
  letter-spacing: .1px;
}

.vex-call-control:hover:not(:disabled) {
  transform: translateY(-3px);
}

.vex-call-control:active:not(:disabled) > span {
  transform: scale(.92);
}

.vex-call-control.is-off > span {
  color: #ff8585;
  border-color: rgba(248, 113, 113, .38);
  background: rgba(239, 68, 68, .19);
  box-shadow: 0 6px 22px rgba(239, 68, 68, .10);
}

.vex-call-control.accept > span {
  color: #fff;
  background: linear-gradient(145deg, #22c55e, #15803d);
  border-color: rgba(134, 239, 172, .45);
  box-shadow: 0 8px 24px rgba(34, 197, 94, .24);
}

.vex-call-control.reject > span {
  width: 66px;
  height: 66px;
  color: #fff;
  background: linear-gradient(145deg, #fb5555, #dc2626);
  border: 1px solid rgba(254, 202, 202, .42);
  box-shadow: 0 9px 28px rgba(220, 38, 38, .32);
}

.vex-call-control.reject > span svg {
  width: 29px;
  height: 29px;
}

.vex-call-control.reject small {
  color: #fca5a5;
}

.vex-call-control:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

.vex-call-control:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 5px;
}

@media (max-width: 560px) {
  .vex-call-controls {
    gap: 12px;
    padding: 19px 10px max(22px, env(safe-area-inset-bottom));
  }

  .vex-call-control {
    min-width: 59px;
    gap: 8px;
  }

  .vex-call-control > span {
    width: 53px;
    height: 53px;
  }

  .vex-call-control > span svg {
    width: 23px;
    height: 23px;
  }

  .vex-call-control.reject > span {
    width: 60px;
    height: 60px;
  }

  .vex-call-control small {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vex-call-control,
  .vex-call-control > span {
    transition: none;
  }
}


/* VEXCALL_CAMERA_SWITCH_GLASS_V5 */
.messenger .vex-call-history {
  width: 100%;
  min-height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.messenger .vex-call-history-heading {
  border: 1px solid rgba(110,190,220,.15);
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(35,57,79,.87),
    rgba(12,24,39,.91) 58%,
    rgba(8,40,49,.88)
  );
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    0 10px 27px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.messenger .vex-call-history-title {
  color: #edf7ff;
}

.messenger .vex-call-history-title span {
  border: 1px solid rgba(80,185,225,.20);
  background: linear-gradient(
    135deg,
    rgba(25,101,174,.27),
    rgba(0,166,194,.17)
  );
  color: #a9eaff;
}

.messenger .vex-call-contact {
  border-color: rgba(110,190,220,.13);
  background: linear-gradient(
    135deg,
    rgba(22,42,62,.90),
    rgba(10,22,35,.94) 65%,
    rgba(7,34,43,.90)
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 7px 18px rgba(0,0,0,.13);
}

.messenger .vex-call-contact-actions button {
  border-color: rgba(91,185,230,.22);
  background: linear-gradient(
    145deg,
    rgba(34,105,174,.28),
    rgba(0,140,173,.16)
  );
  color: #d9f3ff;
}

.vex-call-control.vex-call-switch-camera > span {
  border-color: rgba(65,204,230,.30);
  background: linear-gradient(
    145deg,
    rgba(30,107,168,.42),
    rgba(0,142,165,.28)
  );
  box-shadow:
    0 8px 22px rgba(0,115,170,.15),
    inset 0 1px 0 rgba(255,255,255,.13);
}

.vex-call-control.vex-call-switch-camera small {
  color: #a8eaff;
}
/* VEXAPP_UI_UNIFY_SETTINGS_V1 */
:root {
  --vex-ui-accent: var(--vex-accent, #39c7e5);
  --vex-ui-border: rgba(115,174,195,.18);
  --vex-ui-muted: #9bb2bf;
}
.messenger,
.messenger * { box-sizing: border-box; }
.messenger { min-width: 0; min-height: 0; }
.messenger :is(button,input,textarea,select) {
  -webkit-tap-highlight-color: transparent;
}
.messenger :is(button,input,textarea,select,[role="button"]):focus-visible {
  outline: 2px solid var(--vex-ui-accent);
  outline-offset: 2px;
}
.messenger :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
  max-width: 100%;
  min-width: 0;
}
.messenger :is(.pane-heading,.main-header,.conversation-header) {
  min-width: 0;
  gap: 10px;
}
.messenger .pane-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 13px 15px;
  border-bottom: 1px solid var(--vex-ui-border);
}
.messenger .pane-heading :is(h1,h2,h3) {
  min-width: 0;
  margin: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.messenger .search-box { display: flex; align-items: center; gap: 8px; }
.messenger .search-box input { flex: 1 1 auto; width: 100%; }
.messenger :is(.list-pane,.chat-pane,.profile-pane,.conversation-pane) {
  min-width: 0;
  min-height: 0;
}
.messenger :is(.messages-area,.message-list,.chat-messages) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.messenger :is(.messages-area,.message-list,.chat-messages) img {
  max-width: 100%;
  height: auto;
}
.messenger :is(.message-row,.chat-row,.conversation-item) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.messenger :is(.profile-hero,.profile-info-card,.user-about-dialog,
  .status-feature,.vps-dialog) {
  box-sizing: border-box;
  max-width: 100%;
}
.messenger .profile-info-card,
.messenger .user-about-dialog {
  border-radius: 18px;
}
.messenger .message-composer {
  gap: 9px;
  min-width: 0;
}
.messenger .message-composer textarea {
  min-width: 0;
  max-width: 100%;
}
.messenger .send-button,
.messenger .profile-save,
.messenger .status-publish-button,
.messenger .vps-primary-button {
  transition: filter .16s ease, transform .16s ease;
}
.messenger :is(.send-button,.profile-save,.status-publish-button,
  .vps-primary-button):active {
  transform: scale(.985);
}
.messenger .status-updates-wa { min-width: 0; width: 100%; }
.messenger .status-updates-heading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: 10px;
}
/* Jika judul luar sudah ada, jangan menampilkan judul internal kedua. */
.messenger .status-updates-heading h2 { margin: 0; line-height: 1.2; }
.messenger .status-stories-strip {
  display: flex;
  gap: 12px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.messenger .status-story { flex: 0 0 auto; }
.messenger .vps-dialog { width: min(960px,100%); min-width: 0; }
.messenger .vps-content { min-width: 0; overflow-y: auto; }
.messenger .vps-row { gap: 12px; }
.messenger .vps-row-copy { min-width: 0; }
.messenger .vps-sync-status { overflow-wrap: anywhere; }
.messenger[data-vex-theme="light"] {
  color-scheme: light;
  background: #f2f6fa;
  color: #172638;
}
.messenger[data-vex-theme="light"] :is(.list-pane,.chat-pane,
  .profile-pane,.conversation-pane,.messages-area,.message-list,.chat-messages) {
  color: #172638;
}
.messenger[data-vex-compact="true"] :is(.chat-item,.chat-row,
  .conversation-item,.message-row) {
  padding-block: 6px;
}
.messenger[data-vex-reduced-motion="true"] *,
.messenger[data-vex-reduced-motion="true"] *::before,
.messenger[data-vex-reduced-motion="true"] *::after {
  animation-duration: .01ms !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
@media (max-width: 640px) {
  .messenger .pane-heading { padding: 12px; gap: 8px; }
  .messenger .vps-content { padding: 14px; }
  .messenger .vps-row { gap: 8px; }
  .messenger .vps-row select { width: 128px; max-width: 44vw; }
  .messenger .status-stories-strip { scroll-snap-type: x proximity; }
}
@media (prefers-reduced-motion: reduce) {
  .messenger *, .messenger *::before, .messenger *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* VEXAPP_UI_POLISH_BIO_LAYOUT_V2 */
.profile-info-card-heading,
.user-about-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-info-card-heading h2,
.user-about-history-heading h3 {
  margin: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.user-about-history-heading > span {
  flex-shrink: 0;
}
/* VEXAPP_HEADER_BACKGROUND_UNIFIED_V1 */

/*
 * Header yang dipilih menyatu dengan background aplikasi.
 * Blur sengaja dimatikan.
 * Tidak mengubah dimensi, padding, posisi, atau susunan elemen.
 */

/* Chat utama */
#root .messenger-chat-home .main-header,
#root .messenger-chat-home .list-pane .pane-heading {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Header percakapan: tombol audio dan video call tetap di tempatnya. */
#root .messenger .conversation-header,
#root .messenger .conversation-profile-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Updates: satukan heading halaman dan heading bagian. */
#root .messenger .status-feature .status-heading,
#root .messenger .status-updates-wa .status-updates-heading,
#root .messenger .status-section-title,
#root .messenger .status-feature .status-updates-heading {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Telepon: heading halaman dan riwayat panggilan. */
#root .messenger .vex-call-home .pane-heading,
#root .messenger .vex-call-center .pane-heading,
#root .messenger .vex-call-history-heading,
#root .messenger .vex-call-window-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* VEXAPP_LIQUID_GLASS_HEADERS_V3 */

/*
 * Satu bahasa visual untuk seluruh header VexApp.
 * Tidak mengubah ukuran, padding, posisi, radius, atau layout.
 */

#root header,
#root [role="banner"],
#root [class*="-header"],
#root [class*="Header"],
#root .main-header,
#root .app-header,
#root .pane-heading,
#root .status-heading,
#root .status-section-title,
#root .status-updates-heading,
#root .vex-call-history-heading,
#root .vex-group-info-topbar {

  background:
    linear-gradient(
      115deg,
      rgba(3, 10, 20, .40) 0%,
      rgba(4, 19, 34, .34) 56%,
      rgba(0, 145, 185, .18) 100%
    ) !important;

  background-color: rgba(3, 10, 20, .28) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;

  backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;
}

/* Header percakapan, termasuk tombol telepon/video call. */
#root .conversation-header,
#root .conversation-profile-header {
  background:
    linear-gradient(
      115deg,
      rgba(3, 10, 20, .40),
      rgba(4, 19, 34, .34) 56%,
      rgba(0, 145, 185, .18)
    ) !important;

  background-color: rgba(3, 10, 20, .28) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;

  backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;
}

/* Updates dan pemutar status. */
#root .status-feature .status-heading,
#root .status-updates-wa .status-updates-heading,
#root .status-viewer-backdrop .status-viewer-header {
  background:
    linear-gradient(
      115deg,
      rgba(3, 10, 20, .40),
      rgba(4, 19, 34, .34) 56%,
      rgba(0, 145, 185, .18)
    ) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;

  backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;
}

/* Panggilan audio dan video. */
#root .vex-call-window-header,
#root .vex-call-history-heading {
  background:
    linear-gradient(
      115deg,
      rgba(3, 10, 20, .40),
      rgba(4, 19, 34, .34) 56%,
      rgba(0, 145, 185, .18)
    ) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;

  backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;
}

/* Pengaturan dan seluruh kategori. */
#root .vps-home-header,
#root .vps-detail-header,
#root .vps-section-heading,
#root .vps-header {
  background:
    linear-gradient(
      115deg,
      rgba(3, 10, 20, .40),
      rgba(4, 19, 34, .34) 56%,
      rgba(0, 145, 185, .18)
    ) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;

  backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;
}

/* Header modal dan panel tambahan. */
#root .vex-contact-picker-header,
#root .vex-group-info-header,
#root .vex-group-info-topbar,
#root .saved-contact-editor-header,
#root .saved-contacts-heading,
#root .chat-media-lightbox-header,
#root .chat-attachment-tray-header,
#root .user-about-header,
#root .message-info-dialog > header {
  background:
    linear-gradient(
      115deg,
      rgba(3, 10, 20, .40),
      rgba(4, 19, 34, .34) 56%,
      rgba(0, 145, 185, .18)
    ) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;

  backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;
}

/* Tema terang menggunakan kaca yang sama agar tidak berbeda antar-tab. */
#root .messenger[data-vex-theme="light"] header,
#root .messenger[data-vex-theme="light"] [role="banner"],
#root .messenger[data-vex-theme="light"] [class*="-header"],
#root .messenger[data-vex-theme="light"] .pane-heading {
  background:
    linear-gradient(
      115deg,
      rgba(3, 10, 20, .40),
      rgba(4, 19, 34, .34) 56%,
      rgba(0, 145, 185, .18)
    ) !important;

  -webkit-backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;

  backdrop-filter:
    blur(36px) saturate(185%) brightness(.90) !important;
}
/* VEXAPP_HEADER_NO_BLUR_V4 */

/* 1. Header utama: Chat, Updates, dan Telepon */
#root .messenger .main-header,
#root .messenger .pane-heading {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 2. Header percakapan: profil, voice call, dan video call */
#root .messenger .conversation-pane .conversation-header,
#root .messenger .conversation-header,
#root .messenger .conversation-profile-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Area pembungkus tombol panggilan ikut menyatu.
   Tampilan tombolnya sendiri tidak diubah. */
#root .messenger .conversation-header .vex-call-header-actions {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3. Updates: satukan kedua tingkat heading */
#root .messenger .status-feature .status-heading,
#root .messenger .status-updates-wa .status-updates-heading,
#root .messenger .status-section-title,
#root .messenger .status-feature .status-updates-heading {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 4. Telepon: judul halaman dan riwayat panggilan */
#root .messenger .vex-call-home .pane-heading,
#root .messenger .vex-call-center .pane-heading,
#root .messenger .vex-call-history-heading,
#root .messenger .vex-call-window-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 5. Hilangkan animasi blur saat membuka kategori Pengaturan.
   Tidak mengubah animasi tombol atau komponen lain. */
#root .vps-settings-page .vps-detail-view,
#root .vps-settings-page .vps-content,
#root .vps-settings-page [class*="vps-content--"] {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* VEXAPP VISUAL FIXES V1 */

/* A. GROUP CREATOR: blue-cyan-black unified background */
#root .messenger .vex-contact-picker-overlay {
  background:
    radial-gradient(ellipse at 85% 8%, rgba(0,223,252,.12), transparent 43%),
    linear-gradient(145deg, #040a12, #07192b 55%, #061219) !important;
}

#root .messenger .vex-contact-picker {
  background:
    radial-gradient(ellipse at 92% 7%, rgba(0,223,252,.19), transparent 43%),
    radial-gradient(ellipse at 4% 92%, rgba(39,100,190,.17), transparent 48%),
    linear-gradient(145deg, #07111f, #09233a 53%, #06131d) !important;
  background-color: #071522 !important;
  color: #f1f9ff !important;
}

#root .messenger .vex-contact-picker-header {
  background: linear-gradient(115deg, rgba(8,31,51,.84), rgba(5,20,35,.64), rgba(0,125,155,.20)) !important;
  border-color: rgba(73,210,241,.18) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#root .messenger .vex-picker-search,
#root .messenger .vex-group-create-form,
#root .messenger .vex-picker-selected-heading,
#root .messenger .vex-picker-contact-heading,
#root .messenger .vex-contact-picker-list {
  background: transparent !important;
  background-color: transparent !important;
}

#root .messenger .vex-picker-search {
  border-bottom: 1px solid rgba(73,210,241,.13) !important;
}

#root .messenger .vex-picker-search input,
#root .messenger .vex-group-create-form > label input,
#root .messenger .vex-group-create-form > label textarea {
  background: rgba(5,20,35,.65) !important;
  border-color: rgba(76,190,221,.22) !important;
  color: #effaff !important;
}

#root .messenger .vex-contact-option {
  border: 1px solid rgba(80,190,220,.15) !important;
  border-radius: 15px !important;
  background: rgba(5,23,39,.42) !important;
}

#root .messenger .vex-contact-pick {
  background: transparent !important;
  color: #effaff !important;
}

#root .messenger .vex-contact-pick.is-selected {
  background: rgba(0,185,225,.12) !important;
  border-color: rgba(0,223,252,.35) !important;
}

#root .messenger .vex-picker-footer {
  background: linear-gradient(0deg, #071522, rgba(7,21,34,.94)) !important;
  border-color: rgba(73,210,241,.19) !important;
}

/* B. CHAT SELECTION: modern SVG icon buttons */
#root .messenger .list-pane .vex-selection-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 66px !important;
  padding: 9px !important;
  border: 1px solid rgba(68,207,244,.25) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(0,205,242,.14), transparent 48%),
    linear-gradient(135deg, #101d32, #092438 65%, #071722) !important;
  box-shadow: 0 9px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#root .messenger .list-pane .vex-selection-toolbar > strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #ecfaff !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

#root .messenger .list-pane .vex-selection-button {
  display: grid !important;
  flex: 0 0 37px !important;
  place-items: center !important;
  width: 37px !important;
  min-width: 37px !important;
  height: 39px !important;
  min-height: 39px !important;
  padding: 0 !important;
  border: 1px solid rgba(105,210,239,.22) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(49,102,137,.30), rgba(9,34,53,.78)) !important;
  color: #bfeeff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-size: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

#root .messenger .list-pane .vex-selection-button svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none;
}

#root .messenger .list-pane .vex-selection-button .vex-selection-star-icon {
  fill: rgba(113,220,255,.21) !important;
  stroke: #bceeff !important;
}

#root .messenger .list-pane .vex-selection-button:hover,
#root .messenger .list-pane .vex-selection-button:focus-visible {
  border-color: rgba(0,223,252,.52) !important;
  background: rgba(0,175,220,.22) !important;
  outline: 2px solid rgba(0,223,252,.17) !important;
}

#root .messenger .list-pane .vex-selection-button:active {
  transform: scale(.92) !important;
}

#root .messenger .list-pane .vex-selection-menu {
  border: 1px solid rgba(78,205,239,.24) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #10253b, #071827) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#root .messenger .list-pane .vex-selection-menu button {
  color: #e8f8ff !important;
}

@media (max-width: 420px) {
  #root .messenger .list-pane .vex-selection-toolbar {
    gap: 4px !important;
    padding: 8px 5px !important;
  }

  #root .messenger .list-pane .vex-selection-button {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  #root .messenger .list-pane .vex-selection-button svg {
    width: 17px !important;
    height: 17px !important;
  }
}

/* C. TEXT STATUS: replace green gradient with blue-cyan-black */
.status-viewer-backdrop .status-viewer.status-viewer-text-mode {
  background: linear-gradient(145deg, #07111f, #09233a 53%, #06131d) !important;
}

.status-viewer-backdrop .status-viewer-text-mode .status-viewer-content {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(0,223,252,.24), transparent 44%),
    radial-gradient(ellipse at 15% 86%, rgba(39,100,190,.23), transparent 48%),
    linear-gradient(145deg, #07111f, #09233a 53%, #06131d) !important;
  background-color: #071522 !important;
}

.status-viewer-backdrop .status-viewer-text-mode .status-viewer-text {
  background: transparent !important;
  color: #ffffff !important;
}
/* VEXAPP_MAILBOX_CSS_V1 */
.vex-mailbox-panel {
  display: grid;
  gap: 15px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto 18px;
  padding: 17px;
  border: 1px solid rgba(120, 178, 220, .17);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(15, 31, 48, .94), rgba(7, 18, 31, .96));
  box-shadow: 0 14px 38px rgba(0, 0, 0, .16);
}
.vex-mailbox-heading,
.vex-mailbox-heading-actions,
.vex-mailbox-card-top,
.vex-mailbox-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vex-mailbox-eyebrow {
  color: #78bce9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}
.vex-mailbox-heading h2 {
  margin: 5px 0 3px;
  color: #edf7ff;
  font-size: 21px;
}
.vex-mailbox-heading p {
  margin: 0;
  color: #8daac2;
  font-size: 11px;
}
.vex-mailbox-refresh,
.vex-mailbox-read-button {
  border: 1px solid rgba(117, 181, 224, .22);
  border-radius: 10px;
  background: rgba(51, 111, 158, .17);
  color: #bce2ff;
  cursor: pointer;
}
.vex-mailbox-refresh {
  width: 36px;
  height: 36px;
  font-size: 17px;
}
.vex-mailbox-read-button {
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 700;
}
.vex-mailbox-refresh:disabled,
.vex-mailbox-read-button:disabled {
  opacity: .55;
  cursor: wait;
}
.vex-mailbox-list {
  display: grid;
  gap: 10px;
}
.vex-mailbox-card {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(121, 177, 216, .15);
  border-radius: 15px;
  background: rgba(16, 37, 57, .58);
}
.vex-mailbox-card.is-unread {
  border-color: rgba(77, 168, 232, .42);
  background: rgba(24, 61, 91, .35);
}
.vex-mailbox-sender {
  color: #72bce9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vex-mailbox-card h3 {
  margin: 4px 0 0;
  color: #edf7ff;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.vex-mailbox-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(120, 150, 175, .12);
  color: #9bb4c9;
  font-size: 9px;
}
.vex-mailbox-status.is-unread {
  background: rgba(58, 154, 226, .17);
  color: #9bd5ff;
}
.vex-mailbox-body {
  margin: 0;
  color: #cadbea;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.vex-mailbox-card-footer {
  flex-wrap: wrap;
  padding-top: 9px;
  border-top: 1px solid rgba(125, 168, 200, .11);
}
.vex-mailbox-card-footer time {
  color: #7e9bb4;
  font-size: 10px;
}
.vex-mailbox-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 12px;
  color: #8daac2;
  text-align: center;
  font-size: 12px;
}
.vex-mailbox-empty > span {
  color: #72bce9;
  font-size: 28px;
}
.vex-mailbox-empty strong {
  color: #e2f1fd;
  font-size: 13px;
}
.vex-mailbox-empty p { margin: 0; }
.vex-mailbox-error {
  padding: 10px 12px;
  border: 1px solid rgba(230, 104, 104, .24);
  border-radius: 10px;
  background: rgba(130, 36, 36, .14);
  color: #ffb5b5;
  font-size: 11px;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .vex-mailbox-panel { padding: 13px; border-radius: 17px; }
  .vex-mailbox-card { padding: 12px; }
  .vex-mailbox-card-top { align-items: flex-start; }
}
/*
 * VEXAPP DESKTOP OPTIMIZATION V2
 * Responsive workspace and desktop layout refinements.
 */

.messenger,
.messenger-shell,
.messenger-shell :where(*, *::before, *::after) {
  min-width: 0;
}

.messenger-shell :where(img, video, canvas, iframe) {
  max-width: 100%;
}

.messenger-shell :where(input, textarea, select) {
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
}

/* Laptop and desktop workspace. */
@media (min-width: 1024px) {
  .messenger {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
  }

  .messenger-shell:not(.profile-tab-active) {
    width: 100%;
    max-width: 1880px;
    grid-template-columns:
      clamp(292px, 23vw, 380px)
      minmax(0, 1fr);

    margin-inline: auto;
    border-radius: 22px;
    box-shadow:
      0 20px 65px rgba(0, 0, 0, .27),
      inset 0 1px 0 rgba(255, 255, 255, .045);
  }

  .messenger-shell:not(.profile-tab-active) .list-pane,
  .messenger-shell:not(.profile-tab-active) .conversation-pane {
    min-width: 0;
    min-height: 0;
  }

  .messenger-shell:not(.profile-tab-active) .list-pane {
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .messenger-shell:not(.profile-tab-active) .conversation-pane {
    overscroll-behavior: contain;
  }
}

/* Large monitors: keep navigation balanced. */
@media (min-width: 1600px) {
  .messenger-shell:not(.profile-tab-active) {
    grid-template-columns:
      clamp(340px, 20vw, 400px)
      minmax(0, 1fr);
  }
}

/* Tablet landscape. */
@media (min-width: 681px) and (max-width: 1023px) {
  .messenger-shell:not(.profile-tab-active) {
    grid-template-columns:
      minmax(250px, 34%)
      minmax(0, 1fr);
  }
}

/* Desktop pointer interactions only. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .messenger-shell :where(
    button:not(:disabled),
    [role="button"]
  ) {
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease,
      background-color 160ms ease;
  }
}

/* Reduce unnecessary animation when requested. */
@media (prefers-reduced-motion: reduce) {
  .messenger-shell *,
  .messenger-shell *::before,
  .messenger-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
/*
 * VEXAPP AMBIENT + UI BLEND V8
 * Darker seamless mesh, slow movement, subtle glass UI.
 */

/* =========================================================
   1. GLOBAL BACKGROUND — BLACK / NAVY / BLUE / CYAN
   ========================================================= */

#root .messenger.messenger {
  --vex-global-background:
    radial-gradient(
      ellipse 120% 110% at 50% 45%,
      rgba(8, 27, 43, .76) 0%,
      rgba(5, 17, 30, .82) 54%,
      rgba(2, 7, 15, .96) 100%
    );

  --vex-unified-bg:
    radial-gradient(
      ellipse 120% 100% at 50% 50%,
      rgba(7, 24, 40, .72),
      rgba(2, 7, 15, .94)
    );

  --vex-global-surface: rgba(4, 13, 24, .54);
  --vex-global-glass: rgba(5, 16, 29, .60);

  --vex-unified-surface: rgba(4, 13, 24, .55);
  --vex-unified-glass: rgba(5, 16, 29, .58);

  background-color: #02070e !important;
  background-image:
    radial-gradient(
      ellipse 105% 92% at 50% 46%,
      rgba(9, 29, 46, .72) 0%,
      rgba(5, 17, 30, .76) 55%,
      rgba(2, 6, 13, .96) 100%
    ),
    radial-gradient(
      ellipse 85% 75% at 15% 10%,
      rgba(0, 145, 190, .075),
      transparent 80%
    ),
    radial-gradient(
      ellipse 90% 85% at 90% 90%,
      rgba(20, 75, 165, .09),
      transparent 82%
    ) !important;

  background-attachment: scroll !important;
}

/* =========================================================
   2. AMBIENT LIGHT — LOWER INTENSITY, KEEP V7 MOVEMENT
   ========================================================= */

#root .messenger.messenger::before,
#root .messenger.messenger::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  display: block;
  pointer-events: none !important;
  border: 0;
  border-radius: 0;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}

#root .messenger.messenger::before {
  background:
    radial-gradient(
      ellipse 64% 56% at 13% 20%,
      rgba(0, 195, 230, .19) 0%,
      rgba(0, 150, 200, .085) 46%,
      transparent 84%
    ),
    radial-gradient(
      ellipse 65% 57% at 87% 24%,
      rgba(0, 105, 220, .18) 0%,
      rgba(0, 85, 190, .075) 47%,
      transparent 85%
    ),
    radial-gradient(
      ellipse 65% 55% at 78% 88%,
      rgba(0, 175, 210, .14) 0%,
      transparent 85%
    ),
    radial-gradient(
      ellipse 60% 56% at 14% 83%,
      rgba(25, 75, 190, .17) 0%,
      transparent 85%
    ),
    radial-gradient(
      ellipse 80% 72% at 50% 50%,
      rgba(3, 22, 42, .12),
      transparent 88%
    );

  opacity: .84;
  transform-origin: center;
  will-change: transform;
  animation: vex-mesh-orbit-v8 72s linear infinite;
}

#root .messenger.messenger::after {
  background:
    radial-gradient(
      ellipse 72% 52% at 50% 0%,
      rgba(0, 195, 230, .16),
      transparent 85%
    ),
    radial-gradient(
      ellipse 58% 72% at 100% 50%,
      rgba(0, 100, 220, .15),
      transparent 85%
    ),
    radial-gradient(
      ellipse 72% 52% at 50% 100%,
      rgba(0, 170, 215, .14),
      transparent 85%
    ),
    radial-gradient(
      ellipse 58% 72% at 0% 50%,
      rgba(0, 95, 200, .14),
      transparent 85%
    );

  opacity: .035;
  transform-origin: center;
  will-change: transform, opacity;
  animation: vex-mesh-pulse-v8 34s ease-in-out infinite;
}

@keyframes vex-mesh-orbit-v8 {
  0% {
    transform: translate3d(-3%, -1%, 0) rotate(0deg) scale(.98);
  }

  25% {
    transform: translate3d(2%, -3%, 0) rotate(90deg) scale(1.02);
  }

  50% {
    transform: translate3d(4%, 2%, 0) rotate(180deg) scale(1.08);
  }

  75% {
    transform: translate3d(-2%, 4%, 0) rotate(270deg) scale(1.03);
  }

  100% {
    transform: translate3d(-3%, -1%, 0) rotate(360deg) scale(.98);
  }
}

@keyframes vex-mesh-pulse-v8 {
  0%, 68%, 100% {
    transform: scale(.94);
    opacity: .035;
  }

  75% {
    transform: scale(1.05);
    opacity: .12;
  }

  82% {
    transform: scale(1.16);
    opacity: .23;
  }

  87% {
    transform: scale(1.20);
    opacity: .17;
  }

  94% {
    transform: scale(1.06);
    opacity: .07;
  }
}

/* =========================================================
   3. ALL MAIN PAGE CONTAINERS BLEND INTO THE BACKGROUND
   ========================================================= */

#root .messenger .messenger-shell,
#root .messenger .list-pane,
#root .messenger .conversation-pane,
#root .messenger .chat-page,
#root .messenger .chat-layout,
#root .messenger .conversation-view,
#root .messenger .conversation-panel,
#root .messenger .chat-main,
#root .messenger .status-feature,
#root .messenger .status-updates-wa,
#root .messenger .vex-call-center,
#root .messenger .vex-call-center-page,
#root .messenger .vex-call-home,
#root .messenger .vps-settings-page {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Remove the old dark chat-home blocks. */
#root .messenger.messenger-chat-home .messenger-shell,
#root .messenger.messenger-chat-home .list-pane {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* =========================================================
   4. STATUS TAB — MERGE WITH THE GLOBAL AMBIENT
   ========================================================= */

#root .messenger .status-feature,
#root .messenger .status-updates-wa,
#root .messenger .status-heading,
#root .messenger .status-section-title,
#root .messenger .status-updates-heading,
#root .messenger .status-stories-strip {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Status cards and rows: dark translucent surfaces. */
#root .messenger .status-feature :is(
  .status-story-card,
  .status-story-item,
  .status-update-card,
  .status-contact-card,
  .status-my-status-card,
  .status-row,
  .status-item
) {
  background: rgba(3, 12, 23, .36) !important;
  border-color: rgba(95, 190, 220, .105) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018) !important;
}

/* =========================================================
   5. HEADERS AND NAVIGATION — SUBTLE DARK GLASS
   ========================================================= */

#root .messenger .main-header,
#root .messenger .app-header,
#root .messenger .chat-header,
#root .messenger .conversation-header,
#root .messenger .conversation-profile-header,
#root .messenger .pane-heading {
  background: rgba(3, 11, 21, .34) !important;
  background-image: none !important;
  border-color: rgba(100, 170, 205, .09) !important;
  box-shadow: none !important;
}

/* =========================================================
   6. PANELS, CARDS AND SETTINGS
   ========================================================= */

#root .messenger :is(
  .profile-card,
  .settings-panel,
  .glass-card,
  .vex-call-card,
  .vex-call-contact-list,
  .vex-call-history,
  .vps-info-card,
  .vps-warning-card,
  .saved-contact-card,
  .vex-global-chat-section
) {
  background: rgba(4, 13, 24, .48) !important;
  border-color: rgba(105, 175, 205, .11) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

/* Keep controls readable and separate from the background. */
#root .messenger :is(
  input,
  textarea,
  select,
  .search-box,
  .message-composer
) {
  background-color: rgba(5, 14, 25, .72);
}

/* =========================================================
   7. MOBILE AND ACCESSIBILITY
   ========================================================= */

@media (max-width: 680px) {
  #root .messenger.messenger {
    background-attachment: scroll !important;
  }

  #root .messenger.messenger::before,
  #root .messenger.messenger::after {
    inset: -20%;
  }

  #root .messenger.messenger::before {
    animation-duration: 78s;
  }

  #root .messenger.messenger::after {
    animation-duration: 36s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root .messenger.messenger::before,
  #root .messenger.messenger::after {
    animation: none !important;
    will-change: auto;
    transform: none;
  }
}
/* VEXAPP SCROLL CONTAINMENT V1 */

/* Kunci halaman luar hanya ketika aplikasi messenger aktif. */
html:has(.messenger),
body:has(.messenger) {
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#root:has(.messenger) {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Messenger menjadi viewport utama aplikasi. */
.messenger {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Area scroll internal tidak boleh meneruskan gesture ke halaman luar. */
.messenger .list-pane,
.messenger .message-history,
.messenger .vps-content {
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* Shell tidak boleh menjadi halaman scroll kedua. */
.messenger .messenger-shell {
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
/* VEXAPP FAB + HEADER BLEND V1
   Scope terbatas: FAB, popup, Chat header, Updates header, Phone header.
   Settings dan komponen lain tidak ditargetkan.
*/

/* Portal netral: jangan memakai class .messenger di body. */
.vex-floating-portal-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9500 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: none !important;
  isolation: isolate;
}

/* Backdrop popup */
.vex-floating-portal-root .vex-quick-actions-backdrop {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(0, 0, 0, .48) !important;
  -webkit-backdrop-filter: blur(3px) saturate(85%);
  backdrop-filter: blur(3px) saturate(85%);
  pointer-events: auto !important;
}

/* Popup tiga menu */
.vex-floating-portal-root .vex-quick-actions {
  position: absolute !important;
  z-index: 2 !important;
  right: 21px !important;
  bottom: calc(174px + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  gap: 6px !important;
  width: min(275px, calc(100vw - 42px)) !important;
  box-sizing: border-box !important;
  padding: 9px !important;
  overflow: hidden !important;
  border: 1px solid rgba(160, 205, 235, .19) !important;
  border-radius: 20px !important;
  background: rgba(5, 16, 29, .94) !important;
  color: #edf7ff !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
  pointer-events: auto !important;
  transform-origin: bottom right;
}

.vex-floating-portal-root .vex-quick-action-item {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 65px !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(145, 190, 220, .09) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #edf7ff !important;
  text-align: left !important;
  cursor: pointer;
}

.vex-floating-portal-root .vex-quick-action-icon {
  display: grid !important;
  flex: 0 0 41px !important;
  width: 41px !important;
  height: 41px !important;
  place-items: center !important;
  border: 1px solid rgba(125, 195, 230, .15) !important;
  border-radius: 13px !important;
  background: rgba(60, 115, 175, .15) !important;
}

.vex-floating-portal-root .vex-quick-action-copy {
  display: grid !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 4px !important;
}

.vex-floating-portal-root .vex-quick-action-copy strong {
  color: #f1f7ff !important;
  font-size: 13px !important;
}

.vex-floating-portal-root .vex-quick-action-copy small {
  color: #9fb2c5 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.vex-floating-portal-root .vex-quick-action-arrow {
  color: #91b8d5 !important;
  font-size: 23px !important;
}

/* FAB bulat seperti UI lama */
.vex-floating-portal-root .vex-fab-add-chat {
  position: fixed !important;
  z-index: 3 !important;
  right: 21px !important;
  bottom: calc(103px + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  width: 59px !important;
  height: 59px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #587cf2 !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .38) !important;
  pointer-events: auto !important;
}

.vex-floating-portal-root .vex-fab-add-chat > span {
  font-size: 31px !important;
  line-height: 1 !important;
  transition: transform .23s cubic-bezier(.2, .8, .2, 1);
}

.vex-floating-portal-root .vex-fab-add-chat.is-open > span {
  transform: rotate(45deg);
}

/* CHAT HEADER — hanya header halaman Chats, bukan Settings. */
#root .messenger.messenger-chat-home .main-header {
  background: rgba(4, 13, 24, .25) !important;
  background-image: none !important;
  border-color: rgba(125, 190, 220, .12) !important;
  box-shadow:
    0 7px 22px rgba(0, 0, 0, .10),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

/* UPDATES HEADER — hanya judul Status/Updates. */
#root .messenger .status-feature .status-section-title,
#root .messenger .status-feature .status-updates-heading {
  background: rgba(4, 13, 24, .22) !important;
  background-image: none !important;
  border: 1px solid rgba(125, 190, 220, .12) !important;
  border-radius: 16px !important;
  box-shadow:
    0 7px 20px rgba(0, 0, 0, .09),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

/* TELEPON HEADER — class aktual dari VexCallHistory. */
#root .messenger .vex-call-history-title {
  background: rgba(4, 13, 24, .24) !important;
  background-image: none !important;
  border: 1px solid rgba(125, 190, 220, .12) !important;
  border-radius: 16px !important;
  box-shadow:
    0 7px 20px rgba(0, 0, 0, .09),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

@media (prefers-reduced-motion: reduce) {
  .vex-floating-portal-root .vex-fab-add-chat > span {
    transition: none !important;
  }
}

/* VEXAPP AMBIENT FAB HEADER REVIVAL V1 */

/* AMBIENT — fix stacking layer */
#root .messenger.messenger {
  position: relative !important;
  isolation: isolate !important;
}

#root .messenger.messenger::before {
  z-index: -1 !important;
  opacity: 1 !important;
  animation: vex-ambient-revival-orbit 60s linear infinite !important;
}

#root .messenger.messenger::after {
  z-index: -1 !important;
  animation: vex-ambient-revival-pulse 34s ease-in-out infinite !important;
}

@keyframes vex-ambient-revival-orbit {
  0% {
    transform: translate3d(-4%,-2%,0) rotate(0deg) scale(.96);
  }
  25% {
    transform: translate3d(2%,-3%,0) rotate(90deg) scale(1.04);
  }
  50% {
    transform: translate3d(4%,2%,0) rotate(180deg) scale(1.10);
  }
  75% {
    transform: translate3d(-2%,4%,0) rotate(270deg) scale(1.04);
  }
  100% {
    transform: translate3d(-4%,-2%,0) rotate(360deg) scale(.96);
  }
}

@keyframes vex-ambient-revival-pulse {
  0%, 64%, 100% {
    transform: scale(.90);
    opacity: .08;
  }
  72% {
    transform: scale(1.04);
    opacity: .22;
  }
  80% {
    transform: scale(1.19);
    opacity: .58;
  }
  85% {
    transform: scale(1.13);
    opacity: .36;
  }
  93% {
    transform: scale(.98);
    opacity: .12;
  }
}

/* FAB — restore visibility, position and original circular form */
.vex-floating-portal-root {
  z-index: 10020 !important;
}

.vex-floating-portal-root .vex-fab-add-chat {
  position: fixed !important;
  z-index: 10023 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  right: max(21px, calc((100vw - 520px) / 2 + 18px)) !important;
  bottom: calc(103px + env(safe-area-inset-bottom, 0px)) !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #587cf2 !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.38) !important;
  pointer-events: auto !important;
}

.vex-floating-portal-root .vex-fab-add-chat > span {
  font-size: 31px !important;
  line-height: 1 !important;
}

/* CHAT — preserve search layout, improve spacing */
#root .messenger.messenger-chat-home .list-pane > .pane-heading {
  margin: 0 0 16px !important;
  padding: 8px 0 14px !important;
  row-gap: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(95,190,220,.12) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#root .messenger.messenger-chat-home .list-pane > .pane-heading > h1 {
  font-size: 27px !important;
  line-height: 1.15 !important;
  letter-spacing: -.7px !important;
}

#root .messenger.messenger-chat-home .discovery-search-trigger {
  min-height: 52px !important;
  border-radius: 20px !important;
}

/* UPDATES + TELEPON — one consistent page header */
#root .messenger:has(.status-feature) .list-pane > .pane-heading,
#root .messenger:has(.vex-call-history) .list-pane > .pane-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  width: 100% !important;
  min-height: 60px !important;
  margin: 0 0 16px !important;
  padding: 11px 15px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(95,190,220,.14) !important;
  border-radius: 18px !important;
  background: rgba(4,18,32,.40) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter: blur(17px) saturate(145%);
  backdrop-filter: blur(17px) saturate(145%);
}

#root .messenger:has(.status-feature) .list-pane > .pane-heading h1,
#root .messenger:has(.vex-call-history) .list-pane > .pane-heading h1 {
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* Updates section heading */
#root .messenger:has(.status-feature) .status-section-title {
  min-height: 34px !important;
  margin: 0 0 10px !important;
  padding: 0 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Phone contacts heading */
#root .messenger:has(.vex-call-history) .vex-call-history-title {
  min-height: 48px !important;
  margin: 0 0 14px !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(95,190,220,.13) !important;
  border-radius: 15px !important;
  background: rgba(4,18,32,.40) !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  #root .messenger.messenger::before,
  #root .messenger.messenger::after {
    animation: none !important;
  }

  .vex-floating-portal-root .vex-fab-add-chat > span {
    transition: none !important;
  }
}
/* VEXAPP HEADER CLEANUP V1 */

/* Header halaman Update dan Telepon: menyatu dengan ambient background. */
#root .messenger:has(.status-feature) .list-pane > .pane-heading,
#root .messenger:has(.vex-call-history) .list-pane > .pane-heading {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Global Chat: hilangkan panel gelap, pertahankan garis pemisah. */
#root .messenger .vex-global-chat-section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-top: 1px solid rgba(82, 221, 248, .19) !important;
  box-shadow: none !important;
}

/* Kartu Global Chat ikut menyatu dengan background halaman. */
#root .messenger .person-row.vex-global-chat-row {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* VEXAPP_PHONE_SURFACE_CLEANUP_V1 */

/* Hapus panel gelap besar di halaman Telepon. */
#root .messenger .vex-call-history,
#root .messenger .vex-call-contact-list {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Judul internal riwayat panggilan ikut menyatu. */
#root .messenger .vex-call-history-title {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Kartu kontak tetap mempertahankan tampilan glass. */


/* VEXAPP_PHONE_SURFACE_FINAL_V2 */
/* Hanya pembungkus dan judul telepon yang transparan. Kartu kontak tetap glass. */
#root .messenger .vex-call-history,
#root .messenger .vex-call-contact-list,
#root .messenger .vex-call-history-title {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#root .messenger .vex-call-contact {
  background: rgba(7, 21, 34, .48) !important;
  border: 1px solid rgba(115, 190, 225, .15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 22px rgba(0,0,0,.12) !important;
  -webkit-backdrop-filter: blur(17px) saturate(140%) !important;
  backdrop-filter: blur(17px) saturate(140%) !important;
}


/* VEXAPP_CONTACTS_OPAQUE_AMBIENT_GRADIENT_V1 */

/* Dasar halaman Kontak: gradient ambient solid, bukan transparan. */
#root .messenger .saved-contacts-panel {
  background-color: #041426 !important;
  background-image:
    radial-gradient(
      ellipse 90% 50% at 100% 0%,
      rgba(0, 126, 184, .27) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 80% 55% at 0% 100%,
      rgba(20, 76, 170, .25) 0%,
      transparent 75%
    ),
    linear-gradient(
      145deg,
      #071b2e 0%,
      #04182b 52%,
      #03111f 100%
    ) !important;
  isolation: isolate !important;
}

/* Header Kontak tetap mempunyai identitas glass biru. */
#root .messenger .saved-contacts-panel .saved-contacts-heading {
  background:
    linear-gradient(
      115deg,
      rgba(23, 48, 77, .97),
      rgba(0, 69, 103, .96)
    ) !important;
  border-color: rgba(105, 195, 225, .16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 25px rgba(0,0,0,.16) !important;
}

/* Kartu kontak lebih solid agar halaman Chat tidak tembus. */
#root .messenger .saved-contacts-panel .saved-contact-card {
  background:
    linear-gradient(
      135deg,
      rgba(10, 39, 60, .97),
      rgba(4, 20, 36, .96)
    ) !important;
  border-color: rgba(95, 190, 220, .18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 5px 16px rgba(0,0,0,.12) !important;
}

/* Bagian tombol utama tetap transparan di dalam kartu solid. */
#root .messenger .saved-contacts-panel .saved-contact-main {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Form pencarian tetap gelap dan terbaca. */
#root .messenger .saved-contacts-panel .saved-contact-search {
  background: rgba(3, 16, 29, .94) !important;
  border-color: rgba(95, 190, 220, .20) !important;
}