html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.text-pre-wrap {
  white-space: pre-wrap;
}

.content-width-640 {
  max-width: 640px;
}

.content-width-720 {
  max-width: 720px;
}

.profile-card-image {
  height: 260px;
}

.friend-card-image {
  height: 240px;
}

.hot-or-not-card {
  max-width: 620px;
  position: relative;
  touch-action: pan-y;
  transform-origin: center bottom;
  user-select: none;
  will-change: transform;
}

.interest-suggestions {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 17.5rem;
    overflow-y: auto;
}

.interest-tag {
    background: rgba(var(--bs-primary-rgb), .14);
    border: 1px solid rgba(var(--bs-primary-rgb), .5);
}

.hot-or-not-image {
  height: min(62vh, 560px);
  pointer-events: none;
}

.hot-or-not-card.is-swiping {
  cursor: grabbing;
  transition: none;
}

.hot-or-not-card.is-swipe-committed {
  pointer-events: none;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.hot-or-not-swipe-label {
  border: 0.25rem solid currentColor;
  border-radius: 0.5rem;
  font-size: clamp(1.3rem, 5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0;
  padding: 0.25rem 0.65rem;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: 2rem;
  z-index: 2;
}

.hot-or-not-swipe-label-pass {
  color: var(--bs-secondary-color);
  right: 1.5rem;
  transform: rotate(10deg);
}

.hot-or-not-swipe-label-like {
  color: var(--bs-danger);
  left: 1.5rem;
  transform: rotate(-10deg);
}

.profile-detail-photo {
  width: 100%;
  max-height: 480px;
}

.profile-gallery-image {
  max-height: 480px;
}

.profile-thumbnail {
  max-width: 240px;
}

.email-preview {
  max-height: 720px;
}

.message-list {
  min-height: 240px;
}

.message-bubble {
  max-width: 75%;
}

.chat-message-image {
  max-height: 420px;
}

.typing-status {
  min-height: 1.25rem;
}

.messages-nav-label { position: relative; display: inline-block; }
.messages-nav-badge {
  position: absolute;
  top: -.55rem;
  left: calc(100% - .15rem);
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .28rem;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--bs-tertiary-bg);
  font-size: .62rem;
  line-height: 1;
}

/* Private messages: familiar, focused messenger workspace */
.wa-page {
  --wa-green: #00a884;
  --wa-green-dark: #008069;
  --wa-outgoing: #d9fdd3;
  --wa-panel: color-mix(in srgb, var(--bs-body-bg) 94%, #111b21);
  width: min(1180px, calc(100% - 2rem));
  margin: 1.5rem auto;
}

.wa-shell {
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--wa-panel);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .2);
}

.wa-inbox { max-width: 760px; margin-inline: auto; min-height: 70vh; }
.wa-list-header, .wa-chat-header {
  display: flex; align-items: center; gap: .8rem;
  background: color-mix(in srgb, var(--bs-tertiary-bg) 92%, transparent);
  border-bottom: 1px solid var(--bs-border-color);
}
.wa-list-header { justify-content: space-between; padding: 1.15rem 1.35rem; }
.wa-filter { display: flex; gap: .25rem; padding: .25rem; border-radius: 2rem; background: var(--bs-body-bg); }
.wa-filter-link { padding: .5rem .85rem; border-radius: 2rem; color: var(--bs-secondary-color); font-size: .82rem; font-weight: 700; }
.wa-filter-link.active { color: white; background: var(--wa-green-dark); }
.wa-search { margin: .75rem 1rem; padding: .65rem 1rem; display: flex; gap: .75rem; align-items: center; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-radius: .65rem; font-size: .9rem; }
.wa-conversation-list { overflow-y: auto; }
.wa-conversation-item { display: flex; gap: .9rem; align-items: center; padding: .72rem 1rem; color: var(--bs-body-color); }
.wa-conversation-item:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
.wa-avatar { width: 3.2rem; height: 3.2rem; flex: 0 0 3.2rem; border-radius: 50%; object-fit: cover; background: var(--bs-secondary-bg); }
.wa-conversation-content { min-width: 0; flex: 1; padding: .25rem 0 .8rem; border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 65%, transparent); }
.wa-conversation-topline, .wa-conversation-bottomline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.wa-conversation-topline strong { font-size: 1rem; }
.wa-conversation-topline time { color: var(--bs-secondary-color); font-size: .75rem; }
.wa-conversation-bottomline { color: var(--bs-secondary-color); font-size: .88rem; }
.wa-conversation-item.unread .wa-conversation-topline time { color: var(--wa-green); }
.wa-unread-badge { min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; display: grid; place-items: center; color: white; background: var(--wa-green); border-radius: 1rem; font-size: .7rem; font-weight: 700; }
.wa-empty-state { min-height: 45vh; padding: 3rem; display: grid; place-content: center; text-align: center; color: var(--bs-secondary-color); }
.wa-empty-state i { font-size: 3.5rem; color: var(--wa-green); margin-bottom: 1rem; }

.wa-chat-shell { height: calc(100vh - 120px); min-height: 570px; display: grid; grid-template-rows: auto 1fr auto; }
.wa-chat-page { display: grid; grid-template-columns: minmax(310px, 36%) minmax(0, 1fr); gap: 0; }
.wa-inbox-page { display: grid; grid-template-columns: minmax(310px, 36%) minmax(0, 1fr); gap: 0; }
.wa-inbox-page .wa-inbox { max-width: none; margin: 0; }
.wa-inbox-page > .wa-shell { height: calc(100vh - 120px); min-height: 570px; border-radius: 0; }
.wa-inbox-page > .wa-shell:first-child { border-radius: 1rem 0 0 1rem; border-right: 0; }
.wa-inbox-page > .wa-shell:nth-child(2) { border-radius: 0 1rem 1rem 0; }
.wa-inbox-sidebar { display: flex; flex-direction: column; }
.wa-inbox-sidebar .wa-conversation-list { flex: 1; }
.wa-empty-chat {
  background-color: color-mix(in srgb, var(--bs-body-bg) 88%, #efeae2);
  background-image: radial-gradient(color-mix(in srgb, var(--bs-secondary-color) 13%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
.wa-chat-page > .wa-shell { border-radius: 0; }
.wa-chat-page > .wa-shell:first-child { border-radius: 1rem 0 0 1rem; border-right: 0; }
.wa-chat-page > .wa-shell:nth-child(2) { border-radius: 0 1rem 1rem 0; }
.wa-desktop-sidebar { height: calc(100vh - 120px); min-height: 570px; display: flex; flex-direction: column; }
.wa-desktop-sidebar .wa-list-header { min-height: 68px; padding: .7rem 1rem; }
.wa-desktop-sidebar .wa-list-header h1 { font-size: 1.25rem; }
.wa-desktop-sidebar .wa-filter-link { padding: .42rem .55rem; font-size: .72rem; }
.wa-desktop-sidebar .wa-conversation-list { flex: 1; }
.wa-conversation-item.active { background: color-mix(in srgb, var(--wa-green) 11%, var(--bs-tertiary-bg)); }
.wa-chat-header { min-height: 68px; padding: .5rem .75rem; z-index: 2; }
.wa-contact { min-width: 0; flex: 1; display: flex; align-items: center; gap: .75rem; color: var(--bs-body-color); }
.wa-contact:hover { color: var(--bs-body-color); }
.wa-contact .wa-avatar { width: 2.8rem; height: 2.8rem; flex-basis: 2.8rem; }
.wa-contact small { color: var(--bs-secondary-color); font-size: .76rem; }
.wa-icon-button, .wa-send-button { border: 0; display: grid; place-items: center; color: var(--bs-secondary-color); background: transparent; border-radius: 50%; }
.wa-icon-button { width: 2.7rem; height: 2.7rem; font-size: 1.25rem; }
.wa-icon-button:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.wa-back { color: var(--bs-body-color); }
.wa-actions-menu .dropdown-item { display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem; }

.wa-message-list {
  padding: 1rem max(4%, 1rem); overflow-y: auto; scroll-behavior: smooth;
  background-color: color-mix(in srgb, var(--bs-body-bg) 88%, #efeae2);
  background-image: radial-gradient(color-mix(in srgb, var(--bs-secondary-color) 13%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
.wa-date-divider, .wa-system-message { display: flex; justify-content: center; margin: .65rem 0 1rem; }
.wa-date-divider span, .wa-system-message span { max-width: 85%; padding: .38rem .75rem; border-radius: .5rem; background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.12); color: var(--bs-secondary-color); font-size: .72rem; text-align: center; }
.wa-system-message span { background: color-mix(in srgb, #ffeecd 80%, var(--bs-body-bg)); color: color-mix(in srgb, var(--bs-body-color) 78%, #6d5700); }
.wa-message-row { display: flex; margin: .18rem 0; }
.wa-message-row.message-own { justify-content: flex-end; }
.wa-message-row.message-other { justify-content: flex-start; }
.wa-message-bubble { position: relative; max-width: min(72%, 620px); padding: .45rem .55rem .28rem; border-radius: .5rem; background: var(--bs-tertiary-bg); box-shadow: 0 1px 1px rgba(0,0,0,.14); overflow-wrap: anywhere; }
.message-own .wa-message-bubble { background: color-mix(in srgb, var(--wa-outgoing) 86%, var(--bs-body-bg)); color: color-mix(in srgb, var(--bs-body-color) 82%, #111); }
.wa-message-text { white-space: pre-wrap; line-height: 1.35; }
.message-own .wa-message-text { color: #000; }
.wa-message-meta { float: right; display: inline-flex; align-items: center; gap: .2rem; margin: .45rem 0 0 .7rem; color: color-mix(in srgb, currentColor 55%, transparent); font-size: .67rem; }
.wa-message-meta .read-status { font-size: .92rem; line-height: 1; }
.wa-message-meta .is-read { color: #53bdeb; }
.wa-image-link { display: block; margin-bottom: .3rem; }
.chat-message-image { display: block; width: 100%; max-width: 420px; max-height: 430px; object-fit: cover; border-radius: .35rem; }
.wa-image-modal-content { background: color-mix(in srgb, var(--bs-body-bg) 96%, transparent); }
.wa-image-modal-content .modal-body { min-height: 12rem; padding: .5rem; display: grid; place-items: center; background: #050505; }
.wa-image-modal-content img { display: block; max-width: 100%; max-height: calc(100dvh - 9rem); object-fit: contain; }

.wa-composer-area { padding: .35rem .65rem .55rem; border-top: 1px solid var(--bs-border-color); background: color-mix(in srgb, var(--bs-tertiary-bg) 94%, transparent); }
.wa-typing-status { min-height: 1rem; padding-left: 3.5rem; color: var(--wa-green); font-size: .72rem; }
.wa-composer { display: flex; align-items: flex-end; gap: .45rem; }
.wa-composer textarea { min-height: 2.75rem; max-height: 8rem; resize: none; border: 0; border-radius: 1.5rem; padding: .7rem 1rem; background: var(--bs-body-bg); }
.wa-composer textarea:focus { box-shadow: none; }
.wa-send-button { width: 2.8rem; height: 2.8rem; flex: 0 0 2.8rem; color: white; background: var(--wa-green-dark); }
.wa-send-button:hover { background: var(--wa-green); }
.wa-attachment-panel { padding: .4rem 3.3rem .65rem; }
.wa-attachment-options { display: flex; gap: .6rem; padding: .35rem 0; }
.wa-attachment-choice { min-width: 7rem; padding: .7rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; color: var(--bs-body-color); background: var(--bs-body-bg); }
.wa-attachment-choice i { color: var(--wa-green); font-size: 1.35rem; }
.wa-attachment-choice.active, .wa-attachment-choice:hover { border-color: var(--wa-green); background: color-mix(in srgb, var(--wa-green) 9%, var(--bs-body-bg)); }
.wa-attachment-albums { display: flex; flex-wrap: wrap; gap: .45rem; padding-top: .35rem; }
.wa-attachment-albums button { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .65rem; color: var(--bs-body-color); background: var(--bs-body-bg); }
.wa-attachment-albums button:hover { border-color: var(--wa-green); }
.wa-system-message a { color: inherit; font-weight: 700; text-decoration: underline; }
.album-scroll-target { scroll-margin-top: 6rem; }
.wa-attachment-form { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; }
.wa-file-picker { cursor: pointer; display: flex; align-items: center; gap: .45rem; color: var(--wa-green); font-weight: 700; }
.wa-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wa-attachment-form .btn { width: 2.4rem; height: 2.4rem; padding: 0; }
.wa-album-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; scroll-margin-top: 5rem; }
.wa-album-card { padding: 1.15rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--wa-panel); }
.wa-album-card h2 i { color: var(--wa-green); margin-right: .35rem; }
.wa-album-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--bs-border-color); }
.wa-album-row:last-child { border-bottom: 0; }
.wa-album-request { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }

@media (max-width: 991.98px) {
  .wa-chat-page { display: block; }
  .wa-desktop-sidebar { display: none; }
  .wa-chat-page > .wa-shell:nth-child(2) { border-radius: 1rem; }
  .wa-inbox-page { display: block; }
  .wa-inbox-page .wa-inbox { min-height: 70vh; height: auto; border: 1px solid var(--bs-border-color); border-radius: 1rem; }
  .wa-empty-chat { display: none; }
}

@media (max-width: 767.98px) {
  .wa-page { width: 100%; margin: 0; }
  .wa-shell { border-width: 0; border-radius: 0; box-shadow: none; }
  .wa-inbox { min-height: calc(100vh - 60px); }
  .wa-inbox-page .wa-inbox { min-height: calc(100vh - 60px); border: 0; border-radius: 0; }
  .wa-list-header { align-items: flex-start; flex-direction: column; }
  .wa-filter { width: 100%; }
  .wa-filter-link { flex: 1; text-align: center; }
  .wa-chat-page { position: fixed; z-index: 1035; inset: 0; background: var(--bs-body-bg); }
  .wa-chat-shell { height: 100dvh; min-height: 0; }
  .wa-message-bubble { max-width: 86%; }
  .wa-album-panel { display: none; }
  .wa-attachment-panel { padding-inline: .5rem; }
  .wa-attachment-form { grid-template-columns: 1fr auto; }
  .wa-file-picker { grid-column: 1 / -1; }
}
/* Persistent environment marker, primarily used by the test environment. */
.environment-banner {
    position: sticky;
    top: 0;
    z-index: 1100;
    padding: .35rem 1rem;
    background: #ffc107;
    color: #1f1f1f;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}