/* Define color variables globally */
:root {
    --black: #000000;
    --white: #ffffff;
    --primary: #002AFF;
    --blue: #002AFF;
    --blue-rgb: 0, 42, 255;
    --light-blue: #cce6ff;
    --dark-blue: #003580;
    --red: #FF0000;
    --green: #05CC47;
    --green-rgb: 5, 204, 71;
    --dark-green: #012d0f;
    --purple: #52057F;
    --purple-rgb: 82, 5, 127;
    --mint: #25DD85;
    --grey: #f5f5f5;
    --grey-rgb: 245, 245, 245;
    --mid-grey: #cfcfcf;  
    --slate: #40403E;
    --dark-slate: #3F414E;
    --dark-grey: #8996a0;
    --brown: #51312a;
    --gold: #c37d16;
    --main-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.1);
}

/* Base Styles - Applied to all screen sizes */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Remove light blue autofill background globally for all inputs */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--grey) inset !important;
    -webkit-text-fill-color: var(--black) !important;
    background-color: var(--grey) !important;
    border: 1px solid var(--grey) !important;
    transition: background-color 5000s ease-in-out 0s; /* Prevents background color flash */
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--grey) inset !important;
    -webkit-text-fill-color: var(--black) !important;
    border-color: var(--black) !important;
}

a {
    text-decoration: none;
    color: var(--black);
}

a:link,
a:visited,
a:hover,
a:active {
    color: var(--black);
    text-decoration: none;
}

#currentEmailDisplay {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.subscription-info a,
.subscription-info a:visited,
.subscription-info a:hover,
.subscription-info a:active {
  color: inherit;
  text-decoration: none;
}

.formButton:disabled {
    background-color: var(--mid-grey) !important;
    color: var(--white) !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

html {
    font-size: 16px;
    background-color: var(--white); /* Mobile override */
}


body:has(.modal-overlay[style*="display: flex"]) {
    overflow: hidden;
}

body {
    background-color: var(--white);
    font-family: "Geist", sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 600px;
    margin: 0 auto;
    min-height: 100vh;
}

.noshow {
display: none!important;
}

#qrImage {
    border: 20px solid var(--white);
    border-radius: 1rem;
}

.editing-mode {
    background-color: var(--black)!important;
    color: var(--white)!important;
}


.consent-wrapper {
    margin: 1rem 0;
    display: flex;
    align-items: flex-start; /* Align checkbox with top of first line */
    flex-wrap: wrap; /* Allow label to wrap on small screens */
}
.consent-wrapper input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    min-width: 1.2rem; /* Prevent shrinking */
    min-height: 1.2rem; /* Prevent shrinking */
    flex-shrink: 0; /* Prevent flexbox compression */
    margin-right: 0.5rem;
    margin-top: 4px;
    border: 1px solid var(--black);
    border-radius: 0.4rem;
    background-color: var(--white);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box; /* Ensure border doesn't affect size */
}
.consent-wrapper input[type="checkbox"]:checked {
    background-color: var(--black);
    border-color: var(--black);
    background-image: url('../img/ok.svg');
    background-size: 0.8rem;
    background-position: center;
    background-repeat: no-repeat;
}
.consent-wrapper input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--black);
}
.consent-wrapper label {
    font-family: "Geist", sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.4;
    flex: 1; /* Allow label to take remaining space and wrap */
}
.consent-wrapper label a {
    color: var(--black);
    font-weight: 700;
    text-decoration: none;
}
.consent-wrapper label a:hover {
    font-weight: 700;
    text-decoration: underline;
}



/* Styles for post.html when u sing title and disclaimers */
.bizTitle {
    margin-bottom: 0rem!important;
    border-bottom-right-radius: 0rem!important;
    border-bottom-left-radius: 0rem!important;
}
.bizContent {
    border-top-left-radius: 0rem !important;
    border-top-right-radius: 0rem !important;
    padding-top: 0rem !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
.bizDisclaimer {
    margin-top: 0.5rem!important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;    
}
.bizCorners {
    border-top-left-radius: 1rem!important;
    border-top-right-radius: 1rem!important;
    border-bottom-right-radius: 1rem!important;
    border-bottom-left-radius: 1rem!important;
}


/* Extra padding for inputs with the toggle */
.input-wrapper.has-visibility-toggle input {
  padding-right: 3rem;
}

/* Toggle button positioning */
.toggle-password {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-password:focus-visible {
  outline: 2px solid #9aa0a6;
  outline-offset: 2px;
}

/* Icon size */
.eye-icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none; /* click passes to button */
}


/* Advisory Icon Styling */
.advisory-icon {
    display: block;
    height: 0.8rem;
    margin: 0.5rem 0;
    object-fit: contain;
}

.page-footer {
    margin-top: auto;
}

h1 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

h2 {
    font-size: 0.9rem;
    font-weight: 500;
}

h1.headers {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem;
}

.margin_null {
    margin-bottom: 0rem!important;
}

#search, #post, #reply, #repost {
    overflow-y: auto; /* Enable vertical scrolling */
}


.logo-link {
   margin-top: 0rem!important; 
}


/* MPU Ad Styles */
.mpu-ad-container {
    width: 300px;
    height: 250px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    /*border: 1px solid #ddd;*/
    overflow: hidden;
  }


.disclaimer {
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--black);
    margin-top: 1rem;
}

.legal-links {
    display: flex;
    gap: 20px;
}

.legal-link {
    color: var(--black);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-link:hover {
    color: var(--black);
    text-decoration: underline !important;
}

.copyright {
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--black);
    margin-top: 2rem;
    margin-bottom: 40px;
}

.profile-about-input[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: #999;
    font-style: italic;
}

.mention {
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  background-color: var(--primary);
  border-radius: 8px;
  padding: 0.2rem 0.4rem;
  line-height: 2.3;
  font-size: 0.8rem;
  margin-right: 4px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.newtags {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--white);
    padding: 0.6rem;
    background-color: var(--black);
    /*line-height: 3.5;*/
    border-radius: 1rem;
    cursor: pointer;
    margin-inline-end: 0.2rem;
    display: inline-flex;
    align-items: center;
    margin-block: 0.2rem;
}

.newtags-selected {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--black);
    padding: 0.6rem;
    background-color: transparent;
    /*line-height: 3.5;*/
    border-radius: 1rem;
    cursor: pointer;
    margin-inline-end: 0.2rem;
    display: inline-flex;
    align-items: center;
    margin-block: 0.2rem;
    outline: 1px solid #000;
    border: none;
}

.tags {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--white);
    padding: 0.6rem;
    background-color: var(--primary);
    /*line-height: 3.5;*/
    border-radius: 1rem;
    cursor: pointer;
    margin-inline-end: 0.2rem;
    display: inline-flex;
    align-items: center;
    margin-block: 0.2rem;
}

.untagged {
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    padding: 0rem;
    line-height: 2;
    margin-inline-end: 0.5rem;
}

span.untagged .tag-delete-icon {
    display: none;
}

/* Header */
.header {
    box-sizing: border-box;
    /*border: 1px solid white;*/
    width: 100%;
    height: 3.5rem;
    padding: 0.9375rem;
    background-color: var(--white);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    z-index: 100;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.headerIndex {
    box-sizing: border-box;
    /*border: 1px solid white;*/
    padding: 0.9375rem;
    width: 100%;
    background: var(--white);
    max-width: 600px;
    height: 7rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    transition: transform 0.3s ease, opacity 0.5s ease;
    opacity: 1;
    justify-content: space-between;
    align-items: center;
}

/* Override height for profile and settings */
body#profile .headerIndex,
body#settings .headerIndex {
    height: 4rem;
}

.header--hidden {
    transform: translateY(-10rem) translateX(-50%);
}

.logo {
    width: 150px;
    height: auto;
    display: block;
}

.margin-top-7px {
    margin-top: 7px;
}

#register .logo,
#signin .logo,
#reset-password-confirm .logo,
#reset-password .logo {
    width: 150px;
    height: auto;
    display: block;
}

.logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

.header__menu {
    width: 2.5rem;
    height: 2.5rem;
}

.header-row a {
    display: flex;
    align-items: center;
    justify-content: center;
}


.menu__icon {
    height: 1rem !important;
    width: 1rem !important;
    margin-top: 0px;
    cursor: pointer;
    align-self: center;
}

.book__icon {
    height: 1.2rem !important;
    width: 1.2rem !important;
    margin-top: 0px;
    cursor: pointer;
    align-self: center;
}

.header-row .book__icon {
    height: 1.2rem!important;
    width: 1.2rem!important;
}

.header__back {
    width: 1.875rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back__icon {
    height: 1.2rem;
    margin: 0;
    align-self: center;
}

.back__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.back__link:hover,
.settings__link:hover {
    text-decoration: none;
    cursor: pointer;
}

.post__button {
    height: 44px;
    width: 44px;
    background-color: var(--black);
    border: none;
    border-radius: 0.9rem;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.fetch__button {
    height: 44px;
    width: 44px;
    background-color: var(--black);
    border: none;
    border-radius: 0.9rem;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.content-pro {
    padding: 0.9375rem;
    margin-top: 3rem; /* Height of the fixed header */
    margin-bottom: 3.5rem; /* Height of the fixed footer */
    min-height: calc(100vh - 7rem); /* Ensure content takes at least viewport height minus header and footer */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


.content {
    padding: 0.9375rem;
    margin-top: 7rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.margin-top-35rem {
    margin-top: 3.5rem!important;
}

.margin-top-7rem {
    margin-top: 7rem!important;
}

.margin-top-05rem {
    margin-top: 0.5rem!important;
}

#index .content {
    height: auto;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    margin-top: 9rem!important;
}

#library .content,
#followers .content,
#following .content {
    padding-top: 0.5rem;
}

#post .content,
#reply .content,
#repost .content,
#search .content {
min-height: calc(100vh - 3.75rem - 3.75rem); /* Allow content to grow */
    height: auto; /* Remove fixed height */
    margin-top: 4rem;
    padding-top: 0rem !important;
    display: flex;
    flex-direction: column;
}

#signin .content {
       height: calc(100vh - 70px)!important; 
}

#register .content {
    margin-top: 0rem !important;
    height: calc(100vh - 70px) !important;
}

#reset-password .content {
    margin-top: 0rem !important;
    height: calc(100vh - 70px) !important;
}

#reset-password-confirm .content {
    margin-top: 0rem !important;
    height: calc(100vh - 70px) !important;
}

.footer {
    box-sizing: border-box;
    border: 1px solid white;
    width: 100%;
    height: 3.5rem;
    padding: 0.9375rem;
    background-color: var(--white);
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    z-index: 100;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__icon-wrapper {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body#post .character-progress,
body#reply .character-progress,
body#repost .character-progress {
  position: fixed;
  bottom: 3.5rem; /* exactly the height of the footer */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 6px;
  background-color: var(--mid-grey);
  border-radius: 0;
  overflow: hidden;
  z-index: 101; /* higher than footer to sit on top */
}

body#post .character-progress__bar,
body#reply .character-progress__bar,
body#repost .character-progress__bar {
  height: 100%;
  width: 0%;
  border-radius: 0;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.active {
    border-bottom: 2px solid var(--primary);
}

.notification-bubble {
    position: absolute;
    top: -5px;
    left: 9px;
    transform: none; /* No centering */
    background-color: #ff4d4f;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 1rem;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px; /* Allows flexible width */
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notification-bubble.loaded {
    opacity: 1;
}

.admin-notification {
    background-color: #f3e7e0;
}

.user-avatar {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 42%;
    object-fit: cover;
    margin-right: 0.5rem;
    flex-shrink: 0;
    position: relative;
}

#profile .user-avatar {
    visibility: hidden; /* Hides the avatar but reserves space */
}
#profile .user-avatar.loaded {
    visibility: visible; /* Shows the avatar when loaded */
}

#user .user-avatar {
    visibility: hidden;
}
#user .user-avatar.loaded {
    visibility: visible;
}

.avatar-delete-overlay {
    position: absolute;
    top: 11px;
    left: 11px;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 42%;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.avatar-delete-overlay:hover {
    background: rgba(0, 0, 0, 0.8);
}

.avatar-delete-overlay img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1); /* Makes the icon white */
}


.biz-avatar {
    border-radius: 0rem !important;
}

.following-icon {
    height: 0.8rem;
    margin-left: 5px;
}

.connection-icon {
    height: 0.8rem;
    margin-left: 5px;
}

/* Rotating animation for sending icon */
.send-icon.rotating {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


#index .user-avatar {
    margin-right: 0.2rem;
}

#library .user-avatar {
    margin-right: 0.2rem;
}

#profile .user-avatar {
    margin-right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 42%;
    cursor: pointer;
}

#following .user-avatar,
#followers .user-avatar {
    width: 2.5rem;
    height: 2.5rem;
}

#library .post-actions .action-btn {
    padding: 0rem;
}

#library .post-content {
    cursor: pointer;
}

#library .post-header .post-actions {
    margin-left: auto;
}

#library .headerIndex,
#followers .headerIndex {
    flex-direction: column;
    width: 100%;
    padding: 0.9375rem;
    box-sizing: border-box;
    height: 7.5rem;
    background: var(--white);
    margin-top: -2px;
}

#library .header-row,
#followers .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

#library .header__back,
#followers .header__back {
    width: 1.875rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#library .post__title,
#followers .post__title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 1rem;
    width: 70%;
    max-width: 70%;
}

#library .unique-search-container,
#followers .unique-search-container {
    width: 100%;
    margin-top: 0.2rem;
}

#library .post-header {
    display: flex;
    gap: 0.2rem;
    align-items: flex-start;
    justify-content: flex-start;
}

#library .post-header-meta {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

#library .post-header-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.4rem;
    width: 95%; /*To accomodate for the notification dot */
    overflow: hidden;
}

#library .post-header-top span,
#library .post-header-top .post-username,
#library .post-header-top .admin-username,
#library .post-header-top .post-rating,
#library .post-header-top .post-dot,
#library .post-header-top .post-timestamp {
    flex: 0 0 auto;
    white-space: nowrap;
}

#library .post-header-top .post-username,
#library .post-header-top .admin-username {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#library .post-header-top .post-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

#library .post-username-at-wrapper {
    margin-top: 1px;
}

#library .post-username-at {
    font-size: 0.9rem;
    color: var(--black);
    font-weight: 400;
    cursor: pointer;
    display: inline-block;  /* Changed from inline-flex */
    overflow: hidden;        /* Added */
    text-overflow: ellipsis; /* Added */
    white-space: nowrap;     /* Added */
    max-width: 100%;
}

#followers .menu-item-user {
    background-color: var(--grey);
    border-radius: 1rem;
    padding: 0.7rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#followers .followers-menu-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    margin-right: 0.5rem;
}

#followers .followers-real-name {
    color: var(--black);
    font-weight: 700;
    font-size: 0.9375rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

#followers .followers-username-at {
    color: var(--black);
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

#followers .connections-status {
    color: var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
    align-content: center;
    margin-left: auto;
}


#profile #loggedInUser.menu-text {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.4;
    gap: 0rem;
    min-width: 0;
    overflow: hidden;
    max-width: calc(100% - 4rem); /* Account for avatar (~2.5rem) and edit-name-btn (~1.5rem) */
}

#profile #usernameValue {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

#profile #usernameValue .username-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

#profile #realNameValue {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}


#followers .followers-unfollow-btn,
#followers .followers-follow-btn {
    align-self: center;
}

.followers-unfollow-btn,
.followers-follow-btn {
    flex-shrink: 0;
}

.following-unfollow-btn,
.following-follow-btn {
    flex-shrink: 0;
}

#followers .follow-icon,
#profile .follow-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: bottom;
    margin-right: 8px;
}

#profile .header-row,
#settings .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

#profile .header__back,
#settings .header__back {
    width: 1.875rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#profile .post__title,
#settings .post__title {
    position: absolute;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 1rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%; /* Use the same width as the width property */
}

#profile .edit-name-btn {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
}

#profile .edit-icon {
    height: 1rem;
    object-fit: contain;
}

.msg-user-btn {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
    display: none;
}

.msg-user-icon {
    height: 1.3rem;
    object-fit: contain;
}

#profile .check-icon {
    width: 0.75rem;
    height: 0.75rem;
    object-fit: contain;
}

#profile .real-name-input {
    color: var(--slate);
    font-weight: 400;
    font-size: 0.9rem;
    border: none;
    background: transparent;
    padding: 0;
    margin-bottom: 2px;
    margin-top: 1px;
    font-family: "Geist", sans-serif;
    outline: none;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.photo-icon {
    width: 1.875rem;
    height: 1.875rem;
    object-fit: contain;
    margin-left: auto;
}

.footer__icon {
    height: 1.2rem;
    display: block;
}

.footer__icon_style {
    height: 1rem;
    display: block;
}

.footer__icon-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.footer--hidden {
    transform: translateY(100%) translateX(-50%);
}

.post__title {
    text-align: center;
    font-size: 1rem;
    margin: 0;
    flex-grow: 0;
}

.corners {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.max-height35 {
    max-height: 35vh!important;
}
.max-height30 {
    max-height: 30vh!important;
}
.max-height20 {
    max-height: 20vh!important;
}
.max-height15 {
    max-height: 15vh!important;
}


.min-height25 {
    min-height: 25vh!important;
}
.min-height30 {
    min-height: 30vh!important;
}
.min-height35 {
    min-height: 35vh!important;
}


.post__editable {
    width: 100%;
    padding: 1rem;
    background: var(--grey);
    border: none;
    border-radius: 0;
    color: var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
    cursor: text;
    position: relative;
    min-height: 15vh; /* Keep existing min-height */
    height: auto !important; /* Allow dynamic expansion */
    overflow-y: visible !important; /* Prevent clipping */
}

/* Ensure images in post__editable and rendered posts scale with unique class */
img.post-image {
    max-width: calc(100%);
    height: auto; /* Maintain aspect ratio */
    display: block; /* Prevent inline spacing issues */
    margin-bottom: 1rem;
    margin-top: 1rem;
    border-radius: 6px;
}

/* Add styles for title input */
.post__title_editable {
    width: 100%;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    background: var(--grey);
    border: none;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    color: var(--black);
    font-family: "Geist", sans-serif;
    font-size: 1.2rem;
    font-weight: 500; 
    line-height: 1.3;
    min-height: 2rem;
    outline: none;
    box-sizing: border-box;
    cursor: text;
    position: relative;
    margin-bottom: 0.5rem;
    display: none;
}

.post__disclaimer_editable {
    width: 100%;
    padding: 1rem;
    background: var(--grey);
    border: none;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    color: var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.3;
    outline: none;
    box-sizing: border-box;
    cursor: text;
    position: relative;
    margin-top: 0.5rem;
    display: none;

    min-height: 10vh;     /* start height (adjust if you like) */
    max-height: none;     /* remove cap */
    overflow-y: hidden;   /* no scrollbar */
}

/* Placeholder styles for both fields */
.post__title_editable.empty:before {
    content: attr(data-placeholder);
    color: var(--slate);
    pointer-events: none;
    position: absolute;
    left: 1rem;
}

.post__disclaimer_editable.empty:before {
    content: attr(data-placeholder);
    color: var(--slate);
    pointer-events: none;
    position: absolute;
    left: 1rem;
}

/* Placeholder styles for both fields */
.post__editable.empty:before {
    content: attr(data-placeholder);
    color: var(--slate);
    pointer-events: none;
    /*position: absolute;*/
    top: 1rem; /* Align with padding */
    left: 1rem;
}

/* Ensure placeholder is hidden when not empty */
.post__editable:not(.empty):before {
    content: none;
}

/* Ensure placeholder is hidden when not empty */
.post__title_editable:not(.empty):before {
    content: none;
}

.post__disclaimer_editable:not(.empty):before {
    content: none;
}

#resetBtn {
    display: none; /* Hide the reset button */
}

/* Add styles for title display in posts */
.post-content-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.post-content-disclaimer {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--dark-slate);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.inline-placeholder {
    color: var(--slate);
    pointer-events: none;
}

.post__editable ul,
.post-content ul {
    margin: 0.5rem 0;
    padding: 0;
    list-style-position: outside;
    margin-left: 0.9375rem;
    font-size: 0.9375rem;
}

.post__editable ol,
.post-content ol {
    margin: 0.5rem 0;
    padding: 0;
    list-style-position: outside;
    margin-left: 0.9375rem;
    font-size: 0.9375rem;
}

.post__editable li,
.post-content li {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    margin-bottom: 10px;
}

.post__editable ol.numbered,
.post-content ol.numbered {
    margin: 0.5rem 0;
    padding: 0;
    list-style: none;
    margin-left: 1rem;
    font-size: 0.9375rem;
    counter-reset: list-counter;
}

.post__editable ol.numbered li,
.post-content ol.numbered li {
    margin: 0;
    padding: 0 0 0 1.5rem;
    position: relative;
    counter-increment: list-counter;
    line-height: 1.6;
}

.post__editable ol.numbered li::before,
.post-content ol.numbered li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--black);
    font-size: 0.9375rem;
}

.numbered {
    list-style: none;
    margin-left: 0rem;
    font-size: 0.9375rem;
    counter-reset: list-counter;
}

.numbered li {
    counter-increment: list-counter;
    position: relative;
    padding-left: 1.2rem;
    line-height: 1.6;
}

.numbered li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--black);
    font-size: 0.875rem;
}

.post__editable blockquote {
    position: relative;
    margin: 0.5rem 0;
    padding-left: 1ch;
}

.post__editable blockquote:before {
    content: '\201C';
    position: absolute;
    left: 0;
    font-size: 1.5rem;
    color: var(--slate);
}

.post__editable blockquote:after {
    content: '\201D';
    font-size: 1.5rem;
    color: var(--slate);
}

.text-style-buttons {
    /*display: flex;*/
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.style-buttons-left {
    display: flex;
    gap: 0.5rem;
}

.lock-icon {
    height: 1rem;
    width: auto;
    margin-left: auto;
    cursor: pointer;
}

.style-btn {
    width: 1.8rem;
    height: 1.8rem;
    background-color: var(--grey);
    border: none;
    border-radius: 0.25rem;
    font-family: "Geist", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.style-btn .material-symbols-rounded {
    font-size: 1.25rem;
}

.style-btn--active {
    background-color: var(--black);
    color: var(--white);
}


.styling-btn {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--white);
    border-radius: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    background-color: var(--white);
}

.styling-btn--active {
    border-radius: 0.6rem;
    border: 1px solid var(--black);
    filter: invert(100%);
}

.style-btn--reset {
    background-color: var(--grey);
    color: var(--black);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    width: auto;
}

.style-btn--type {
    background-color: var(--grey);
    color: var(--black);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    width: auto;
}

.app-msg {
    background: #141413;
    /*background: linear-gradient(18deg, #002aff, #267eff 70%, #49a0f9);*/
    border-radius: 1rem;
    /*border: 1px solid var(--green);*/
    padding: 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #ebebeb;
    z-index: 50;
}

#fetch-hint-msg {
    display: none;
}

/*#fetch-hint-msg::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
    width: 1rem;
    height: 1rem;
    background-image: url('./img/arrow-up.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#fetch-hint-msg {
    position: relative;
}*/

.fi {
    border-radius: 4px!important;
}

.msg-container {
    position: relative; 
    background-color: var(--grey);
    border-radius: 1rem;
    border: none;
    padding: 0.8rem;
    margin-bottom: 0.8rem; /* Adds 0.8rem gap between msg-container elements */
}

/* Optional: Remove margin-bottom from the last msg-container to avoid extra space at the bottom */
.msg-container:last-child {
    margin-bottom: 0;
}

.msg-container-user {
    background-color: var(--grey);
    border-radius: 1rem;
    border: none;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
    position: relative;
}

.msg-container-user .msg-read-icon {
    position: absolute;
    bottom: 10px; /* slightly higher so it doesn’t overlap text */
    right: 10px;
    width: 13px;
    height: 13px;
    opacity: 0.8;
    pointer-events: none; /* makes sure it doesn't block clicks */
}

.app-msg.animate {
    animation: bounce-in 0.6s ease-out; /* Less bouncy than cubic-bezier */
}


@keyframes bounce-in {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.8;
    }
    70% {
        transform: scale(0.98);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

body.notifications-page .post-container {
    margin-top: 0.8rem!important;
}

body.notifications-page .post-container.no-results {
    margin-top: 0rem!important;
}

.post-container {
    background-color: var(--grey);
    border-radius: 1rem;
    border: none;
    padding: 0.8rem;
    position: relative;
}

.post-container.unviewed {
    position: relative;
}


.post-container::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1.4rem;
    background-color: var(--blue);
    border-radius: 5px;
    width: 0.6rem;
    height: 0.6rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.post-container.unviewed::before {
    opacity: 1;
}

.post-container.unread-24h::before {
    background-color: var(--dark-grey);
}

.msg-container::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1.4rem;
    background-color: var(--blue);
    border-radius: 5px;
    width: 0.6rem;
    height: 0.6rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.msg-container.unviewed::before {
    opacity: 1;
}



.msg-container.empty-messages {
    text-align: center;
    padding: 20px;
    font-family: 'Geist', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--black);
    background-color: var(--grey);
    border-radius: 1rem;
}

.msg-container.no-results {
    text-align: center;
    padding: 20px;
    font-family: 'Geist', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--black);
    background-color: var(--grey);
    border-radius: 1rem;
}


.post-container.no-results {
    text-align: center;
    padding: 20px;
    font-family: 'Geist', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--black);
    background-color: var(--grey);
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.no-results-icon {
    display: block;
    margin: 0 auto 0 auto;
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
}

.pro-icon-message {
    display: block;
    width: 40px;
}
.app-icon-message {
    display: block;
    height: 1rem;
    margin-bottom: 0.3rem;
}

.menu-item.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    font-family: 'Geist', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--black);
    background-color: var(--grey);
    border-radius: 1rem;
    text-align: center;
}

.post-header {
    display: flex;
    align-items: flex-start;
    gap: 0.2rem;
    margin-bottom: 1rem;
}

.post-header-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.post-header-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
    width: 100%;
    overflow: hidden;
}

.post-header-top .post-username {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: default;
}

.post-username {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: default;
}

.admin-username {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
    color: var(--primary) !important;
}

.post-rating,
.post-dot,
.post-timestamp {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--black);
    font-size: 0.8rem !important;
    align-self: end;
}

.post-username-at-wrapper {
    margin-top: 0.1rem;
    line-height: 1.3;
}

.post-username-at,
#library .post-username-at {
    font-size: 0.9rem;
    color: var(--black);
    font-weight: 400;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 100%;
    /*gap: 4px;*/
}

.post-username-at .username-text,
#library .post-username-at .username-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
    cursor: pointer;
}

.post-container.reply .post-header {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #414141;
    position: relative;
}

/*.post-container.reply .post-header::before {
    content: 'Comment';
    position: absolute;
    top: 1.4rem;
    left: 0.5rem;
    height: 2.9rem;
    width: 0.3rem;
    border-left: 1px solid #000;
    border-bottom-left-radius: 0.5rem;
    transform: translateY(-50%);
}*/


.edited-label {
    font-size: 0.75rem;
    color: var(--slate);
}

.post-timestamp .edited-label {
    /*margin-left: 0.5rem;*/
}

.post-more-icon {
    margin-right: -0.5rem;
    height: 1rem;
    cursor: pointer;
}

.admin-more-icon {
    margin-right: 0rem;
    height: 0.8rem;
    cursor: pointer;
}

.post-content {
    font-size: 0.9375rem;
    margin-bottom: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reply-count {
    font-size: 0.75rem;
    color: var(--black);
    cursor: pointer;
}

.reply-count:hover {
    text-decoration: underline;
}

.post-actions {
    display: flex;
    align-items: baseline !important;
}

.action-btn {
    background-color: transparent;
    border: none;
    font-family: "Geist", sans-serif;
    font-size: 0.8rem;
    color: var(--black);
    cursor: pointer;
    padding: 0rem 0.8rem;
}

.voice-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 0.625rem;
    display: inline-flex;
    align-items: center;
}

.reply-btn {
    background-color: transparent;
    border: none;
    font-family: "Geist", sans-serif;
    font-size: 0.75rem;
    color: var(--black);
    cursor: pointer;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 0rem;
}

.post-actions .action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

.post-actions .material-symbols-rounded {
    font-variation-settings: 'FILL' 1;
    font-size: 0.85rem;
}

.icon-img {
    width: 0.8rem;
    height: 0.8rem;
}

.bookmark-img {
    display: block !important;
}

.icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.upvote-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.action-btn:hover {
    color: var(--dark-blue);
}

.upvote-count {
    color: var(--black);
    font-weight: 500;
}

.action-btn.upvote-btn.upvoted .upvote-count {
    color: var(--primary);
    font-weight: 500;
}

.comment {
    font-size: 0.75rem;
    color: var(--black);
    margin-bottom: 0.5rem;
}

#register .header,
#signin .header,
#reset-password .header,
#reset-password-confirm .header {
    height: 3.5rem;
    position: static;
    transform: none;
    left: auto;
}

#register .content,
#signin .content,
#reset-password .content,
#reset-password-confirm .content {
    margin-top: 0rem !important;
}

#register h1,
#signin h1,
#reset-password h1,
#reset-password-confirm h1 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: left;
}

#register h2,
#signin h2,
#reset-password h2,
#reset-password-confirm h2 {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--slate);
    margin-bottom: 1rem;
    text-align: left;
}

#registerForm,
#loginForm,
#resetRequestForm,
#resetConfirmForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#registerForm input::placeholder,
#loginForm input::placeholder,
#resetRequestForm input::placeholder,
#resetConfirmForm input::placeholder {
    color: var(--slate);
}


/* NEW STYLE FOR RESET PASSWORD FORM */
#resetRequestForm button,
#registerForm button,
#resetConfirmForm button,
#loginForm button {
    margin-top: 0rem !important;
}

#resetRequestForm .input-wrapper,
#resetConfirmForm .input-wrapper,
#register .input-wrapper,
#loginForm .input-wrapper {
    margin-bottom: 0rem !important;
}

/* end */

.formButton-link {
    text-decoration: none;
    display: inline-block;
    width: 100%;
}

.formButton-link .formButton {
    width: 100%;
    margin-top: 0 !important;
    background-color: var(--white) !important;
    border: 1px solid var(--black) !important;
    color: var(--black) !important;
    box-sizing: border-box;
}


#register a,
#signin a,
#reset-password a,
#reset-password-confirm a {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--black);
    text-align: left;
    text-decoration: none;
    font-weight: 700;
}

#register a:hover,
#signin a:hover,
#reset-password a:hover,
#reset-password-confirm a:hover {
    text-decoration: none;
}

#registerMessage,
#loginMessage,
#resetMessage,
#resetConfirmMessage {
    font-size: 0.875rem;
    text-align: left;
}

#registerMessage.error,
#loginMessage.error,
#resetMessage.error,
#resetConfirmMessage.error {
    color: var(--red);
    margin-top: 0rem;
    padding: 0.5rem 1rem;
    background-color: #fff2f4;
    border-radius: 1rem;
    border: 1px solid var(--red);
    font-weight: 500;
}

#registerMessage.success,
#loginMessage.success,
#resetMessage.success,
#resetConfirmMessage.success {
    color: var(--green);
    margin-top: 0rem;
    padding: 0.5rem 1rem;
    background-color: #f2fff6;
    border-radius: 1rem;
    border: 1px solid var(--green);
    font-weight: 500;
}

#registerMessage a,
#loginMessage a,
#resetMessage a,
#resetConfirmMessage a {
    color: var(--black);
    text-decoration: underline;
}

#registerMessage a:hover,
#loginMessage a:hover,
#resetMessage a:hover,
#resetConfirmMessage a:hover {
    color: var(--primary);
}

#profile .header__back,
#settings .header__back {
    flex-shrink: 0;
}

#profile .profile__title,
#settings .profile__title {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    flex-grow: 0;
    padding: 0 1.875rem;
    width: auto;
}

#profile .profile__title #loggedInUser {
    display: inline;
}

#profile .content {
    padding: 0.9375rem;
    margin-top: 3.5rem;
    padding-top: 0.3rem;
    padding-bottom: 0.9375rem;
}

#settings .content {
    padding: 0.9375rem;
    margin-top: 3.5rem;
    padding-top: 0.3rem;
    padding-bottom: 0.9375rem;
}

.footer-spacer {
    background-color: transparent;
    padding: 2rem;
    display: flex;
    align-items: center;
    width: 100%;
}

.menu-item-spacer {
    background-color: transparent;
    padding: 1rem;
    display: flex;
    align-items: center;
    width: 100%;
}

.menu-item {
    background-color: var(--grey);
    border-radius: 1rem;
    padding: 0.7rem;
    margin-bottom: 1rem;
    display: flex;
    width: 100%;
    cursor: pointer;
}

.encryption-menu-item {
    background-color: var(--mid-grey);
    border-radius: 1rem;
    padding: 0.7rem;
    margin-bottom: 1rem;
    display: flex;
    width: 100%;
    cursor: pointer;
    position: relative;
    height: 50px;
}

.menu-item-user {
    background-color: var(--grey);
    border-radius: 1rem;
    padding: 0.7rem;
    margin-bottom: 1rem;
    display: flex;
    width: 100%;
    position: relative;
}

.menu-item-user .menu-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    flex-grow: 1;
    margin-right: 2.5rem;
}

.menu-item-user .real-name {
    color: var(--black);
    font-weight: 700;
    font-size: 0.9375rem;
}

.menu-item-user .username-at {
    color: var(--black);
    font-weight: 400;
    font-size: 0.9rem;
}

#followBtn {
    position: static;
    transform: none;
    flex: 1;
    margin-right: 0.5rem;
}

.button-container {
    border-radius: 1rem;
    /*padding-top: 0.7rem;*/
    padding-bottom: 0.7rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.button-container-notifications {
    border-radius: 1rem;
    padding-top: 0rem;
    padding-bottom: 0.5rem;
    /*margin-bottom: 0.5rem;*/
    display: flex;
    justify-content: space-between;
    width: 100%;

}

.connect-btn {
    background-color: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.7rem;
    border-radius: 1rem;
    flex: 1;
    margin-left: 0.5rem;
}

.connect-pending {
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.7rem;
    border-radius: 1rem;
    flex: 1;
    margin-left: 0.5rem;
}

.connect-connected {
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.7rem;
    border-radius: 1rem;
    flex: 1;
    margin-left: 0.5rem;
}

.connection-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.connection-accept,
.connection-accept:hover,
.connection-accept:visited,
.connection-accept:active,
.connection-accept:focus {
    color: var(--white)!important;
    background-color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid #002aff;
    border-radius: 1rem;
}


.connection-decline {
    color: var(--black);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid #000000;
    border-radius: 1rem;
}

.connection-decline,
.connection-decline:hover,
.connection-decline:visited,
.connection-decline:active,
.connection-decline:focus {
    color: var(--black);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid #000000;
    border-radius: 1rem;
}

.menu-icon {
    width: auto;
    height: 1.875rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.8rem;
}

.small-menu-icon {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #f5f5f5;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.menu-icon-svg {
    height: 1.3rem;
    object-fit: contain;
}

.small-menu-icon-svg {
    height: 1.1rem;
    object-fit: contain;
}

.menu-link-svg {
    height: 1rem;
    object-fit: contain;
    margin-bottom: 1rem;
}

.reg-icon-svg {
    height: 1.3rem;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    margin-left: 0.5rem;
}

.menu-text {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.small-menu-text {
    font-size: 0.8rem!important;
    font-weight: 600!important;
    color: var(--black);
    display: flex;
    align-items: center;
    line-height: 1.2;
    margin-left: 50px;
}

#loggedInUser.menu-text {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.4;
    gap: 0rem;
}

.menu-welcome {
    color: var(--black);
    font-weight: 700;
    font-size: 1.2rem;
}

.menu-label {
    color: var(--black);
    font-weight: 400;
}

.menu-label.bold {
    color: var(--black);
    font-weight: 700;
}

.menu-label.red {
    color: var(--red);
}

.menu-value {
    color: var(--black);
    font-weight: 700;
    display: flex;
    align-items: center;
}

.weight400 {
    font-weight: 400!important;
}

.real-name {
    color: var(--slate);
    font-weight: 400;
    font-size: 0.9rem;
}

.sign-out-btn {
    padding: 0.75rem 1.5rem;
    background-color: var(--black);
    color: var(--white);
    border: none;
    border-radius: 0rem;
    font-family: "Geist", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: auto;
}

.sign-out-btn .material-symbols-rounded {
    font-size: 1.25rem;
}

.sign-out-btn:hover {
    background-color: var(--slate);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 1000;
}

.modal-overlay.centered {
    align-items: center;
}

.modal-content {
    background-color: var(--grey);
    border-top-left-radius: 1.3rem;
    border-top-right-radius: 1.3rem;
    padding-top: 1.7rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    max-width: 600px;
    text-align: center;
    box-sizing: border-box;
}

.modal-option-btn {
    background-color: var(--white);
    color: var(--black);
    border: none;
    padding: 0.8rem 1rem;
    font-family: "Geist", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease;
}

.peer-review-info {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background-color: var(--white);
    color: var(--black);
    border: none;
    padding: 1.5rem 1rem;
    font-family: "Geist", sans-serif;
    width: 100%;
    border-bottom: 1px solid var(--grey);
}

.modal-option-btn.divider {
    border-bottom: 1px solid var(--grey);
}

.modal-option-btn.top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.modal-option-btn.mid {
    border-top: 1px solid var(--grey);
}

.modal-option-btn.bottom {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top: 1px solid var(--grey);
}

.modal-option-btn.red {
    color: var(--red);
}

.modal-option-btn.blue {
    color: var(--primary);
}

.modal-option-btn.black {
    color: var(--black);
}

.modal-option-btn.darkBlue {
    color: var(--dark-blue);
}

.modal-option-btn:last-child {
    margin-bottom: 0.5rem;
}

.modal-option-btn.padding {
    padding: 1.2rem 1rem !important;
}

#resetConfirmMessage.success a.success-link {
    color: var(--green);
    text-decoration: none;
}

#resetConfirmMessage.success a.success-link:hover {
    text-decoration: underline;
}

#resetConfirmMessage.success a.success-link:visited,
#resetConfirmMessage.success a.success-link:active {
    text-decoration: none;
}

.post-container.collapsed .replies-container {
    display: none;
}

.post-container.reply {
    margin-top: 0;
    width: 100%;
    padding: 0;
}

.replies-container {
    padding: 0;
    width: 100%;
}

.post-container + .post-container:not(.reply) {
    margin-top: 1.5rem;
}

.toggle-replies {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--slate);
    cursor: pointer;
}

.toggle-replies:hover {
    text-decoration: none;
}

.post-container .toggle-replies {
    color: var(--black);
    font-weight: 700;
}

.post-container:not(.collapsed) > .post-footer > .toggle-replies {
    color: var(--black);
    font-weight: 700;
}

.post-container.reply .post-content span.username {
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
}

.repost-text {
    color: var(--black);
    font-weight: 400;
    padding: 1rem 1.3rem;
    border-radius: 1rem;
    background-color: #ebebeb;
    display: inline-block;
    margin-bottom: 0.7rem;
    margin-top: 0.5rem;
    width: 100%;
    position: relative; /* Add this to support absolute positioning of ::before */
}


.repost-text::before {
    content: "";
    position: absolute;
    top: -21px;
    right: 0px;
    width: 1rem;
    height: 1rem;
    background-image: url(./img/repost-white.svg);
    background-color: #002aff;
    background-repeat: no-repeat;
    background-size: 0.6rem 0.6rem;
    background-position: center;
    /* border-top-right-radius: 1rem; */
    /* border-bottom-left-radius: 0.6rem; */
    border-radius: 7px;
}


.repost-text,
.repost-text ul,
.repost-text li {
    color: var(--black);
}

.repost-link {
    color: var(--black);
    text-decoration: none;
}

.repost-link:hover {
    text-decoration: underline;
}

.post-username.admin-username {
    color: var(--primary) !important;
}

.bold-username {
    font-weight: 700;
}

a.username, a.post-username {
    text-decoration: none;
    color: inherit;
}

a.username:hover, a.post-username:hover {
    text-decoration: none;
    color: inherit;
}

.following-label {
    color: var(--white);
    background-color: var(--black);
    font-size: 0.6em;
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.1rem 0.3rem;
    height: 1.1rem;
    margin-top: 0.1rem;
}

.peer-labels {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
    justify-content: flex-start;
    background-color: #ebebeb;
    padding: 0.5rem;
    border-radius: 0.7rem;
}

.peer-label {
    color: var(--white);
    background-color: var(--black);
    font-size: 0.7em;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.2rem 0.4rem;
    align-self: center;
}

.peer-labels:empty {
    display: none;
}

.post-content blockquote {
    quotes: "“" "”" "‘" "’";
    position: relative;
    margin: 1em 0;
    padding: 0.5em 1em;
}

.post-content blockquote:before {
    content: open-quote;
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: 0;
}

.post-content blockquote:after {
    content: close-quote;
    font-size: 1.5em;
    position: absolute;
    right: 0;
    bottom: 0;
}

.load-more {
    display: flex; /* Changed to flex for image and text alignment */
    align-items: center; /* Vertically center image and text */
    justify-content: center; /* Horizontally center content */
    padding: 0.8rem; /* Adjusted padding for better spacing with image */
    color: var(--white);
    cursor: pointer;
    font-weight: 600;
    width: fit-content;
    margin: 2rem auto; /* Combined margin-top and margin-bottom */
    background-color: var(--black);
    font-size: 0.875rem;
    border-radius: 1rem;
}

.load-more-icon {
    width: 16px; /* Smaller size to fit button */
    height: 16px;
    margin-right: 0.5rem; /* Space between icon and text */
}

.goto-connections {
    display: flex; /* Changed to flex for image and text alignment */
    align-items: center; /* Vertically center image and text */
    justify-content: center; /* Horizontally center content */
    padding: 0.8rem; /* Adjusted padding for better spacing with image */
    color: var(--white);
    cursor: pointer;
    font-weight: 600;
    width: fit-content;
    margin: 2rem auto; /* Combined margin-top and margin-bottom */
    background-color: var(--black);
    font-size: 0.875rem;
    border-radius: 1rem;
}

.post-container.highlight-post {
    outline: 1px solid var(--dark-blue);
    animation: fadeOutOutline 2s ease forwards;
    animation-delay: 8s;
}

.highlighted-text {
    background-color: var(--primary);
    color: var(--white);
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}


@keyframes fadeOutOutline {
    0% { outline-color: var(--dark-blue); }
    100% { outline-color: transparent; }
}

#registerMessage.success .signin-link {
    color: var(--green);
    font-weight: 700;
    text-decoration: underline;
}

#registerMessage.success .signin-link:hover,
#registerMessage.success .signin-link:active,
#registerMessage.success .signin-link:focus,
#registerMessage.success .signin-link:visited {
    color: var(--green);
    font-weight: 700;
    text-decoration: underline;
    outline: none;
}

@keyframes spinClockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(720deg); }
}

.footer__icon.spin {
    animation: spinClockwise 0.6s ease-in-out;
}

.loader {
    width: 25px;
    aspect-ratio: .75;
    --c: no-repeat linear-gradient(var(--black) 0 0);
    background: 
        var(--c) 0% 50%,
        var(--c) 50% 50%,
        var(--c) 100% 50%;
    background-size: 20% 50%;
    animation: l6 0.5s infinite linear;
    margin: 2rem auto;
}

@keyframes l6 {
    20% { background-position: 0% 0%, 50% 50%, 100% 50%; }
    40% { background-position: 0% 100%, 50% 0%, 100% 50%; }
    60% { background-position: 0% 50%, 50% 100%, 100% 0%; }
    80% { background-position: 0% 50%, 50% 50%, 100% 100%; }
}

#loader {
    display: none;
    width: 25px;
    aspect-ratio: .75;
    --c: no-repeat linear-gradient(var(--black) 0 0);
    background: 
        var(--c) 0% 50%,
        var(--c) 50% 50%,
        var(--c) 100% 50%;
    background-size: 20% 50%;
    animation: l6 0.5s infinite linear;
    margin: 2rem auto;
    text-align: center;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0rem;
}

.header-top-index {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: -1px;
    margin-bottom: 0rem;
}

.header-top .logo {
    width: 150px;
    height: auto;
    align-self: center;
}

.header-top .menu__icon {
    height: 1.2rem;
    align-self: center;
    cursor: pointer;
}

.unique-search-container {
    width: 100%;
    padding-top: 0.8rem;
    box-sizing: border-box;
}

.padding-top-045 {
    padding-top: 0.45rem !important;
}

.unique-search-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.search-margin-top {
    margin-top: 10px;
}

.unique-search-wrapper input#uniqueSearchInput {
    width: 100%;
    padding: 10px 15px 10px 32px;
    border: 1px solid transparent;
    border-radius: 1rem;
    font-size: 0.9375rem;
    font-family: "Geist", sans-serif;
    outline: none;
    box-sizing: border-box;
    background-color: var(--grey);
    transition: border-color 0.3s ease;
}

.unique-search-wrapper input#uniqueSearchInput::placeholder {
    color: var(--black);
}

.unique-search-wrapper .unique-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.unique-search-wrapper input#uniqueSearchInput:focus {
    border-color: var(--black) !important;
}

.repost-original {
    display: block;
    color: var(--slate);
    contenteditable: false;
}

.repost-breaks {
    display: block;
}

.repost-commentary {
    display: block;
    color: var(--black);
}

.notification {
    position: fixed;
    border-radius: 0rem;
    bottom: 0rem;
    max-width: 600px;
    margin: 0 auto;
    padding: 1.2rem 1rem;
    background-color: var(--black);
    color: var(--white);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    text-align: left;
    z-index: 101;
    display: none;
    left: 0;
    right: 0;
    line-height: 1.2;
}

.bad-notification {
    position: fixed;
    border-radius: 0rem;
    bottom: 0rem;
    max-width: 600px;
    margin: 0 auto;
    padding: 1.2rem 1rem;
    background-color: var(--red);
    color: var(--white);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    text-align: left;
    z-index: 101;
    display: none;
    left: 0;
    right: 0;
    line-height: 1.2;
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    margin-left: 1.5rem;
}

.notification-content .icon {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0rem;
    flex-shrink: 0;
}

.peer-review-content {
    text-align: left;
}

.peer-review-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
}

.peer-review-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
}

.peer-review-description {
    font-size: 0.85rem;
    color: var(--black);
    text-align: center;
}

.peer-review-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.peer-review-option-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.peer-review-option-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.peer-review-option-text {
    font-size: 0.85rem;
    color: var(--slate);
    font-weight: 500;
}

.peer-review-option-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.peer-review-checkbox {
    pointer-events: auto !important;
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    outline: none;
    cursor: pointer;
    position: relative;
    background-color: var(--grey);
    border-radius: 8px;
}

.peer-review-checkbox::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('./img/rated.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 0px;
    
    /* Animation properties */
    transform: scale(0);
    opacity: 0;
    transition: 
        transform 0.4s cubic-bezier(0.2, 1.8, 0.3, 1),
        opacity 0.2s ease;
}

.peer-review-checkbox:checked::before {
    transform: scale(1);
    opacity: 1;
}

.peer-review-checkbox.force-repaint {
    animation: forceRepaint 0.01s linear;
}

@keyframes forceRepaint {
    0% { opacity: 0.99; }
    100% { opacity: 1; }
}

.modal-description {
    padding-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.profile-about-container {
    width: 100%;
    box-sizing: border-box;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.interests-container {
    width: 100%;
    box-sizing: border-box;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 0.5rem;
}

.profile-about-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    min-height: 1.105rem;
}

.profile-about-input {
    width: 100%;
    padding: 0px;
    border: none;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: "Geist", sans-serif;
    color: var(--black);
    outline: none;
    box-sizing: border-box;
    background-color: var(--grey);
    transition: border-color 0.3s ease;
    resize: none;
    overflow: hidden;
    line-height: 1.3;
    padding-left: 1px;
}

.profile-about-input::placeholder {
    color: #999;
    font-style: italic;
    opacity: 1;
    font-weight: 400!important;
}

.profile-about-input:focus {
    color: var(--slate);
    outline: none;
    font-weight: 500!important;
}

.input-wrapper.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem; /* space between input and button */
}

.chatbox {
    width: 100%;
    border-radius: 1rem;
    border: none;
    font-size: 1.1rem;
    font-family: "Geist", sans-serif;
    color: var(--black);
    outline: none;
    box-sizing: border-box;
    background-color: var(--grey);
    transition: border-color 0.3s ease;
    resize: none;
    overflow-y: auto; /* allow scrolling like contact form */
    height: 3rem;      /* match contact form */
    line-height: 1.4;
    padding: 0.75rem 1rem;
    flex: 1; /* Allows textarea to grow */
    margin: 0; /* Reset margin if needed */
}

#sendMessageBtn {
  width: 44px!important;           
  height: 44px!important;
  padding: 0;
  flex-shrink: 0;        /* don't let it shrink */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  background-color: var(--black);
  border: none;
  cursor: pointer;
}

#sendMessageBtn .send-icon {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

#fetchMessageBtn {
  width: 44px!important;           
  height: 44px!important;
  padding: 0;
  flex-shrink: 0;        /* don't let it shrink */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  background-color: var(--black);
  border: none;
  cursor: pointer;
  display: none;
}

#fetchMessageBtn .send-icon {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

#chatInput {
  flex: 1 1 auto;         /* allow to grow and shrink */
  min-width: 0;           /* prevent overflow */
  height: 44px;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border-radius: 0.9rem;
  background-color: var(--grey);
  border: none;
  resize: none;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
  overflow: hidden;
}

.chatButton {
    width: 4rem!important;
}

.profile-about-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.followers-username {
    font-weight: 700;
    color: var(--black);
    flex-grow: 1;
    cursor: pointer;
}

.followers-unfollow-btn {
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.7rem;
    margin-left: auto;
    border-radius: 1rem;
    min-width: 6rem;
    height: 44px;
    box-sizing: border-box;
}

.followers-follow-btn {
    background-color: transparent;
    color: var(--black);
    border: 1px solid var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.7rem;
    margin-left: auto;
    border-radius: 1rem;
    min-width: 6rem;
    height: 44px;
    box-sizing: border-box;
}

#followers .followers-status {
    background-color: transparent;
    color: var(--black);
    border: 1px solid var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.8rem;
    margin-left: auto;
    border-radius: 15px;
    width: 6rem;
    text-align: center;
}

.followers-empty {
    text-align: center;
    color: var(--slate);
    font-size: 1rem;
}

.following-username {
    font-weight: 700;
    color: var(--black);
    flex-grow: 1;
    cursor: pointer;
}

.following-unfollow-btn {
    background-color: transparent;
    color: var(--black);
    border: 1px solid var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.7rem;
    margin-left: auto;
    border-radius: 1rem;
    width: 6rem;
    height: 44px;
    box-sizing: border-box;
}

.following-empty {
    text-align: center;
    color: var(--slate);
    font-size: 1rem;
}


.notifications-btn {
    background-color: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.8rem;
    margin-left: auto;
    border-radius: 1rem;
    width: 5.5rem;
    position: static;
    transform: none;
    flex: 1;
    display: block;
    height: 44px;
    box-sizing: border-box;
    
}

.inactive-btn {
    background-color: var(--grey);
    color: var(--black);
    border: 1px solid var(--grey);
    font-family: "Geist", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.8rem;
    margin-left: auto;
    border-radius: 1rem;
    width: 6rem;
    position: static;
    transform: none;
    flex: 1;
    margin-right: 0.5rem;
    display: block;
    height: 44px;
    box-sizing: border-box;
}

.button-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: text-top;
}


.connections-status {
    color: var(--black);
    font-family: "Geist", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    align-content: center;
}

.menu-arrow {
    height: 1rem;
    margin-left: auto;
    object-fit: contain;
    align-self: center;
    flex-shrink: 0; 
}

.rating-diff {
    font-size: 0.9em;
}

.rating-diff-positive {
    color: var(--black);
    font-weight: 500;
    font-size: 0.7rem;
    margin-left: 6px;
    border-radius: 8px;
    padding-left: 5px;
    padding-right: 5px;
    /*border: 1px solid var(--black);*/
    background-color: #d9d9d9;
}

.rating-diff-negative {
    color: var(--black);
    font-weight: 500;
    font-size: 0.7rem;
    margin-left: 6px;
    border-radius: 8px;
    padding-left: 5px;
    padding-right: 5px;
    /*border: 1px solid var(--black);*/
    background-color: #d9d9d9;
}

.rating-diff-positive,
.rating-diff-negative {
    display: none !important;
}

.rating-date {
    font-weight: 400 !important;
    font-size: 0.9375rem;
    color: var(--black);
    margin-left: 1rem;
}

/* Only apply to rating-history page */
#settings .rating-date {
    opacity: 0;
}

#settings .rating-date.pop-in {
    animation: bouncePop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bouncePop {
    0% { 
        opacity: 0; 
        transform: scale(0.3); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    }
    70% { 
        transform: scale(0.9); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
    }
}

.action-text {
    font-weight: 600;
    line-height: 1.4!important;
}
.admin-notification .action-text {
    font-weight: 600;
    line-height: 1.5em!important;
}

.chat-text {
    font-weight: 400;
    font-size: 1rem;
    white-space: pre-wrap; /* Preserves whitespace and wraps text */
    line-height: 1.5em; /* Explicit line height for consistency */
    word-break: break-word; /* Prevents long words from breaking layout */
}

.content-text {
    font-weight: 400;
    white-space: nowrap !important; /* Force prevents text from wrapping to new lines */
    overflow: hidden !important; /* Force hides content that extends beyond container */
    text-overflow: ellipsis !important; /* Force adds ellipsis (...) for overflow */
    display: inline-block !important; /* Inline-block works better in flex containers */
    width: 100% !important; /* Force takes full available width */
    max-width: 100% !important; /* Prevent width from exceeding container */
    line-height: 1.5em; /* Explicit line height for consistency */
    /*max-height: 1.5em; /* Limits height to exactly one line */
    min-width: 0; /* Allow shrinking in flex containers */
    flex-shrink: 1; /* Allow shrinking in flex layouts */
    word-break: normal; /* Don't break words when using nowrap */
}

.admin-notification .content-text {
    white-space: normal !important; /* Allow text to wrap normally */
    overflow: visible !important; /* Show all content */
    text-overflow: unset !important; /* Remove ellipsis */
    display: block !important; /* Use block display for proper wrapping */
    max-height: none !important; /* Remove height restriction */
    -webkit-line-clamp: unset !important; /* Remove line limit */
    word-break: break-word !important; /* Allow long words to break */
    line-height: 1.5em; /* Keep consistent line height */
    margin-top: 1rem;
}


.trend-arrow {
    height: 1rem;
    vertical-align: middle;
    margin-left: 0px;
    padding-bottom: 1px;
}

.menu-item:has(.settings-description) .menu-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.settings-description {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.4;
    margin: 0;
}

.pro-disclaimer {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.4;
    margin: 0;
}

.menu-item:has(.analytics-promote) .menu-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.analytics-promote {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.4;
    margin: 0;
}




.settings-welcome {
    font-size: 1rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.4;
    margin: 0;
    margin-bottom: 0rem;
}

.welcome-link {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    color: var(--black) !important;
    line-height: 1.4 !important;
    text-decoration: underline !important;
    transition: text-decoration 0.3s ease !important;
}


.profile-description {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.4;
    margin-bottom: 1rem;
}

#profile .input-wrapper,
#settings .input-wrapper,
#reset-password .input-wrapper,
#signin .input-wrapper,
#register .input-wrapper,
#reset-password-confirm .input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

#profile .input-wrapper input,
#settings .input-wrapper input,
#reset-password .input-wrapper input,
#signin .input-wrapper input,
#register .input-wrapper input,
#reset-password-confirm .input-wrapper input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border-radius: 1rem;
    border: none;
    font-size: 0.9375rem;
    font-weight: 400;
    outline: none;
    box-sizing: border-box;
    background-color: var(--grey);
    transition: border-color 0.3s ease;
    border: 1px solid transparent;
}

#settings .input-wrapper .icon,
#profile .input-wrapper .icon,
#reset-password .input-wrapper .icon,
#signin .input-wrapper .icon,
#register .input-wrapper .icon,
#reset-password-confirm .input-wrapper .icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3rem !important;
    height: 1.3rem !important;
    pointer-events: none;
}

#profile .input-wrapper input:focus,
#settings .input-wrapper input:focus,
#reset-password .input-wrapper input:focus,
#signin .input-wrapper input:focus,
#register .input-wrapper input:focus,
#reset-password-confirm .input-wrapper input:focus {
    border-color: var(--black) !important;
}

.formButton {
    width: 100%;
    height: 55px;
    padding: 18px 28px;
    background-color: var(--black);
    color: var(--white);
    border: none;
    border-radius: 1rem;
    font-family: "Geist", sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    gap: 0.25rem;
    box-sizing: border-box!important;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.formButton.red {
    background-color: var(--red);
}

.formButton.black {
    background-color: var(--black);
}

body#settings .dmca-list {
    list-style-type: disc;
    padding-left: 1rem;
    margin: 1em 0;
}

body#settings .dmca-list li {
    margin-bottom: 0.5em;
    font-size: 0.9375rem;
    line-height: 1.4;
}

#editOptionBtn.modal-option-btn:disabled {
    color: var(--mid-grey);
}

.tag-delete-icon {
    width: 1.2rem;
    margin-left: 0.5rem;
}

.pro-icon {
    height: 0.8rem;
    margin-left: 5px;
}

.peer-icon {
    height: 0.8rem;
    margin-left: 5px;
}

.verified-icon {
    height: 0.8rem;
    margin-left: 5px;
}

.business-icon {
    height: 0.8rem;
    margin-left: 5px;
}

.verified-icon-profile {
    height: 0.9rem;
    margin-left: 5px;
    vertical-align: middle;
    /*margin-bottom: 2px;*/
}

.peer-icon-profile {
    height: 0.9rem;
    margin-left: 5px;
    vertical-align: middle;
    /*margin-bottom: 2px;*/
}
.pro-icon-profile {
    height: 0.9rem;
    margin-left: 5px;
    vertical-align: middle;
    /*margin-bottom: 2px;*/
}
.business-icon-profile {
    height: 0.9rem;
    margin-left: 5px;
    vertical-align: middle;
    /*margin-bottom: 2px;*/
}

.dropmenu-spacer {
    margin-bottom: 1rem;
}

.intro-msg {
    margin-bottom: 0.8rem;
    font-weight: 700 !important;
}

.custom-select-trigger.selected {
    font-weight: 600;
}


.settings-icon {
    height: 0.8rem;
    margin-left: 5px;
    vertical-align: middle;
    margin-bottom: 3px;
}

#settings .input-wrapper select {
    width: 100%;
    padding: 1rem 1rem 1rem 0.7rem;
    border-radius: 1rem;
    border: none;
    font-size: 0.9375rem;
    font-weight: 400;
    outline: none;
    box-sizing: border-box;
    background-color: var(--grey);
    transition: border-color 0.3s ease;
    border: 1px solid transparent;
    font-family: "Geist", sans-serif;
    color: var(--black);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('./img/dropdown-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

#settings .input-wrapper select:focus {
    border-color: var(--black) !important;
}

#settings .input-wrapper select:invalid {
    color: var(--black);
}

#settings .input-wrapper select:not(:invalid),
#profile .input-wrapper select:not(:invalid) {
    font-weight: 700;
}

#settings #contactMessageFeedback,
#settings #reportMessageFeedback,
#settings #joinMessageFeedback {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    text-align: left;
}

#settings #contactMessageFeedback.error,
#settings #reportMessageFeedback.error,
#settings #joinMessageFeedback.error {
    color: var(--red);
    margin-top: 0rem;
    padding: 0.5rem 1rem;
    background-color: #fff2f4;
    border-radius: 1rem;
    border: 1px solid var(--red);
    font-weight: 500;
}

#settings #contactMessageFeedback.success,
#settings #reportMessageFeedback.success,
#settings #joinMessageFeedback.success {
    color: var(--green);
    margin-top: 0rem;
    padding: 0.5rem 1rem;
    background-color: #f2fff6;
    border-radius: 1rem;
    border: 1px solid var(--green);
    font-weight: 500;
}

#profile .input-wrapper select,
#register .input-wrapper select {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border-radius: 1rem;
    border: none;
    font-size: 0.9375rem;
    font-weight: 400;
    outline: none;
    box-sizing: border-box;
    background-color: var(--grey);
    transition: border-color 0.3s ease;
    border: 1px solid transparent;
    font-family: "Geist", sans-serif;
    color: var(--black);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('./img/dropdown-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

#profile .input-wrapper select:focus,
#register .input-wrapper select:focus {
    border-color: var(--black) !important;
}

#profile .input-wrapper select:invalid,
#register .input-wrapper select:invalid {
    color: var(--black);
}


/* Custom Select Styles */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    background-color: var(--grey);
    color: var(--black);
    padding: 1rem 0.7rem;
    font-size: 0.9375rem;
    font-weight: 400;
    border-radius: 1rem;
    border: 1px solid transparent;
    font-family: "Geist", sans-serif;
    text-align: left;
    cursor: pointer;
    appearance: none;
    background-image: url('../home/img/dropdown-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

.custom-select-trigger-icon {
    width: 100%;
    background-color: var(--grey);
    color: var(--black);
    padding: 1rem 1rem 1rem 3rem;
    font-size: 0.9375rem;
    font-weight: 400;
    border-radius: 1rem;
    border: 1px solid transparent;
    font-family: "Geist", sans-serif;
    text-align: left;
    cursor: pointer;
    appearance: none;
    background-image: url('../home/img/dropdown-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

.custom-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    font-weight: 500;
    background-color: var(--white);
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    margin-top: 0.25rem;
    z-index: 1000;
    list-style: none;
    padding: 0.5rem;
    max-height: 255px;
    overflow-y: auto;
    /*border: 1px solid #818181;*/
}

.custom-select-options li {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: var(--black);
    cursor: pointer;
    transition: background 0.2s ease;
}

.custom-select-options li:hover {
    background-color: var(--grey);
    border-radius: 1rem;
}

.custom-select-options {
    /* existing styles... */
    overflow-y: scroll;

    /* Hide scrollbar (cross-browser) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.custom-select-options::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.ttl-settings {
    margin-bottom: 0.5rem !important;
    font-size: 1.3rem!important;
    font-weight: 600!important;
    line-height: 1.2;
}

.notif-header {
    margin-bottom: 0.5rem !important;
}

.notif-content {
    margin-bottom: 0.5rem !important;
}

.connection-likes {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 0.5rem;
    padding: 0rem;
    width: 100%;
    overflow: hidden;
}

.connection-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 40%;
    object-fit: cover;
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

.connection-text {
    font-size: 0.8rem;
    color: var(--black);
    font-weight: 400;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.connection-name {
    font-weight: 700;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%; /* Matches post-username max-width */
    margin-right: 0.2rem;
}

.connection-likes-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.connection-likes-link:hover .connection-text,
.connection-likes-link:hover .connection-name {
    color: var(--black);
}




/* Toggle Button Styles */
.toggle-container {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: none;
}

.toggle-label {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 28px;
    margin-right: 0.5rem;
}

.toggle-label input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--mid-grey);
    border-radius: 12px;
    border: 1px solid var(--mid-grey);;
    transition: background-color 0.3s ease;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: var(--white);
    border-radius: 9px;
    transition: transform 0.3s ease;
}

.toggle-label input:checked + .toggle-slider {
    background-color: var(--black);
    border: 1px solid var(--black); /* Change border when checked */
}

.toggle-label input:checked + .toggle-slider:before {
    transform: translateX(16px);
    background-color: var(--white); /* Change sliding circle to white */
}

.toggle-text {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--black);
}

.rating-header-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    /*margin-bottom: 1rem;*/
}

.toggle-rating-container {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.toggle-rating-label {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 26px;
    margin-left: 0.5rem;
}
.toggle-rating-label input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-rating-label input:checked + .toggle-slider {
    background-color: var(--black);
    border: 1px solid var(--black); /* Change border when checked */
}

.toggle-rating-label input:checked + .toggle-slider:before {
    transform: translateX(16px);
    background-color: var(--white); /* Change sliding circle to white */
}


/* Update .character-count to ensure it supports child animations */
.character-count {
    width: auto;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--black);
    display: flex;
    gap: 1rem;
    align-items: center;
    position: relative;
    margin-top: 1rem;
}

#charCount {
    display: inline-block; /* Required for transform */
    will-change: transform; /* Optimize animation performance */
    min-width: 180px; /* Prevent width changes from affecting wordCount */
    text-align: left; /* Ensure consistent text alignment */
}

#wordCount {
    flex-shrink: 0; /* Prevent wordCount from shrinking */
}


/* Pop animation for new messages */
.msg-pop-in {
    animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

#charCount.shake {
    animation: shake 0.5s ease 1;
    -webkit-animation: shake 0.5s ease 1; /* Browser compatibility */
}

.character-progress {
    width: 100%;
    height: 6px;
    background-color: var(--gray-light);
    border-radius: 3px;
    margin-top: 0.4rem;
    margin-left: 0rem;
    margin-right: 0rem;
    overflow: hidden;
}

.character-progress__bar {
    height: 100%;
    width: 0%;
    background-color: var(--primary);
    transition: width 0.3s ease;
}

.hyperlink {
    color: var(--black)!important; 
    text-decoration: underline!important;
    font-weight: 600!important;
    cursor: pointer;
    word-break: break-all; /* Prevent long URLs from overflowing */
}

.hyperlink:hover {
    color: var(--black)!important; /* Slightly darker blue on hover */
    text-decoration: underline!important;
    font-weight: 600!important;
}

.hyperlink:active {
    color: var(--black)!important; /* Lighter blue on click */
    font-weight: 600!important;
}

.hyperlink.no-click {
    color: var(--black);
    text-decoration: underline;
    cursor: default;
    pointer-events: none; /* disables clicks */
}

/* Avatar Modal */
.avatar-modal {
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.avatar-modal-content {
    background-color: transparent; /* No background for the modal content */
    padding: 0; /* Remove padding to fit image tightly */
    border-radius: 0; /* No border radius for a clean look */
    width: auto; /* Fit content */
    max-width: 100%; /* Prevent overflow */
    text-align: center;
}

.modal-avatar {
    width: 15rem;
    height: 15rem;
    object-fit: cover; /* Ensure image covers the area without distortion */
    border-radius: 35%; /* Match user-avatar border-radius */
    display: block;
    max-width: 100%; /* Ensure responsiveness on smaller screens */
    max-height: 100vh; /* Prevent overflow on smaller viewports */
}

.padding_08 {
    padding: 0.8rem!important;
}
.padding_07 {
    padding: 0.7rem!important;
}

.margin-right_1rem {
    margin-right: 1rem;
}

.margin-bottom_1rem {
    margin-bottom: 1rem;
}

.forgot-password-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* space between icon and text */
    text-decoration: none;
    color: inherit; /* optional: inherit text color */
    font-weight: 500; /* optional */
}

.forgot-password-icon {
    width: 16px;  /* or adjust to your preferred size */
    height: 16px;
}


/* Pro subscription copy */
.post-container-pro {
    text-align: center;
    padding: 40px 20px;
    font-family: 'Geist', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    color: var(--black);
    background-color: var(--grey);
    border-radius: 1rem;
    /*flex: 1; /* Allow it to grow and fill available space */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    /*min-height: 100%;*/
}

    .pro-headline {
        font-family: 'Geist', sans-serif;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--black);
        margin: 0.5rem 0;
        line-height: 1.3;
        text-align: center; /* Keep headline centered */
    }

.pro-coming-soon {
    width: 100%;
    padding: 18px 28px;
    background-color: transparent;
    color: var(--black);
    border: 1px solid #000;
    border-radius: 1rem;
    font-family: "Geist", sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    display: flex; 
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

    /* New styles for benefits list */
    .pro-benefits-list {
        list-style: none;
        padding: 0;
        margin: 1rem 1rem;
        font-family: 'Geist', sans-serif;
    }

    .pro-benefit-item {
        display: flex;
        align-items: flex-start;
        font-size: 1rem;
        font-weight: 400;
        color: var(--black);
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .pro-benefit-icon {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 1rem;
        margin-top: 0.3rem; /* Align icon with text */
        flex-shrink: 0;
    }

    .header-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.edited-indicator {
    opacity: 0.6;
    font-size: 0.75em;
    font-style: italic;
    color: #666;
    margin-left: 4px;
}


/* Slider for index page */

    .wrapper {
      margin-bottom: 1.3rem;

    }

    .index-toggle-container {
      width: 100%;
      height: 44px;
      position: relative;
    }

    .index-toggle-container input {
      display: none;
    }

    .index-toggle-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      width: 100%;
      height: 100%;
      background: #f6f6f6;
      border-radius: 1rem;
      cursor: pointer;
      overflow: hidden;
      user-select: none;
      outline: none;
    }

    .index-toggle-label:focus {
      outline: none;
    }

    .index-toggle-slider {
      position: absolute;
      width: 50%;     
      height: 100%;  
      top: 0px;
      left: 0px;
      background: var(--black);
      border: 1px solid #000;
      border-radius: 1rem;
      box-sizing: border-box;
      transition: left 0.3s ease;
      z-index: 1;
    }

    input:checked + .index-toggle-label .index-toggle-slider {
      left: 50%;
    }

    .index-toggle-text {
      flex: 1;
      text-align: center;
      z-index: 2;
      font-weight: 600;
      font-size: 0.875em;
      transition: color 0.3s ease;
      color: var(--white);
    }

    .index-toggle-label .focused {
      color: var(--black);
      font-weight: 600;
    }

    input:checked + .index-toggle-label .trending {
      color: var(--black);
      font-weight: 600;
    }

    input:checked + .index-toggle-label .focused {
      color: var(--white);
      font-weight: 600;
    }


/* Beta Notification Carousel Styles */
.beta-notification {
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0.8rem;
    height: calc(100vh - 3.8rem);
    height: calc(100dvh - 3.8rem);
    background-color: var(--black);
    color: #ebebeb;
    font-family: "Geist", sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    text-align: center;
    z-index: 101;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.beta-notification.show {
    transform: translateY(0);
    opacity: 1;
    background: var(--black);
    z-index: 1000;
}

.beta-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* This is crucial - hides the adjacent slides */
    touch-action: pan-y;
    cursor: grab;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.beta-carousel-track {
    display: flex;
    transition: transform 0.3s ease;
    width: 500%; /* 5 slides = 500% */
    will-change: transform;
    /* Remove any gaps between slides */
    gap: 0;
    margin: 0;
    padding: 0;
}

.beta-carousel-slide {
    width: 20%; /* Exactly 100%/5 = 20% */
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    /* Ensure no margins or padding create gaps */
    margin: 0;
    padding: 0;
    /* Add padding inside the slide instead */
    padding: 0 1rem;
}

.beta-notification-content {
    display: flex;
    flex-direction: column;
    justify-content: left; 
    align-items: left;
    width: 100%;
    gap: 1.5rem;
    text-align: left;
    /* Add padding here instead of on the slide */
    padding: 0;
}

/* Rest of your carousel styles remain the same */
.beta-notification-content span {
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 300;
}

.beta-notification-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.beta-notification-logo {
    width: 55px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}
.beta-notification-link {
    color: var(--white);
    font-weight: 600;
    text-decoration: underline;
}

.beta-bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.beta-carousel-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
}

.beta-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.beta-carousel-dot.active {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.2);
    color: transparent !important;
    text-decoration: none !important;
    border: none !important;
}

.beta-carousel-dot:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.beta-notification-close {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    margin: 0;
    width: fit-content;
}

.beta-close-icon {
    width: 1.1rem;
    display: block;
}

.beta-title {
    color: var(--white);
    font-size: 1.5rem!important;
    font-weight: 600!important;
    line-height: 1.4!important;
    text-align: left;
}

.beta-arrow-icon {
    right: 2rem;
    top: 50%;
    height: 30px;
    margin-top: 1rem;
}

.beta-action {
    color: var(--white);
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: block;
    margin-top: 2rem;
    text-align: center;
    border: 1px solid #fff;
    padding: 1rem;
    border-radius: 1rem;
}


.status-card {
  background-color: var(--grey);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: "Geist", sans-serif;
}

.status-label {
  font-weight: 600;
  color: var(--black);
  font-size: 0.85rem;
}

.status-value {
  color: var(--black);
  font-size: 0.9rem;
  text-align: right;
  max-width: 60%;
}

.status-active {
  color: var(--black);
  font-weight: 700;
}

.status-planned {
  color: var(--black);
  font-weight: 700;
}

.status-completed {
  color: var(--primary);
  font-weight: 700;
}

.subscription-card {
  background-color: var(--grey);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.subscription-info {
  background-color: var(--grey);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  display: inline;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.subscription-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.subscription-btn {
  background-color: var(--white);
  border: 1px solid var(--black);
  border-radius: 1rem;
  padding: 0.7rem 1.2rem;
  font-family: "Geist", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
}

.subscription-btn.cancel {
  background-color: var(--black);
  color: var(--white);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.6s ease-in-out;
}

/* Search section headers */
.search-section-header {
    padding: 16px 20px 8px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
    background-color: #fafafa;
    margin-bottom: 0;
}

.search-section-header:first-child {
    margin-top: 0;
}

.search-section-header + .menu-item {
    border-top: none;
}

/* Bouncing load-more arrow */
.bouncing-arrow {
    width: 1rem;
    height: 1rem;
}

.arrow-animate .arrow-line {
    transform-origin: 50% 0%;
    animation: arrow-drop 0.2s ease-in-out;
}

.arrow-animate .arrow-head {
    transform-origin: 50% 75%;
    animation: arrow-drop 0.2s ease-in-out;
}

.arrow-animate .bottom-bar {
    transform-origin: 50% 100%;
    animation: bar-impact 0.2s ease-in-out;
}

@keyframes arrow-drop {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(3px);
    }
    65% {
        transform: translateY(3px);
    }
    75% {
        transform: translateY(-1px);
    }
    85% {
        transform: translateY(0.5px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes bar-impact {
    0% {
        transform: translateY(0px) scaleY(1);
    }
    50% {
        transform: translateY(0px) scaleY(1);
    }
    65% {
        transform: translateY(1px) scaleY(0.85);
    }
    75% {
        transform: translateY(0.5px) scaleY(0.95);
    }
    85% {
        transform: translateY(-0.2px) scaleY(1.02);
    }
    100% {
        transform: translateY(0px) scaleY(1);
    }
}

.video-background-item {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 100%; /* Creates square by making height equal to width */
}

.menu-item-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border-radius: 1rem;
}

/* Video overlay styles */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.video-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.play-button {
    width: 60px;
    height: 60px;
    filter: brightness(0) invert(1); /* Makes SVG white */
    transition: transform 0.2s ease;
}

.play-button:hover {
    transform: scale(1.1);
}

/* Cropper.js Modal Styles - Fixed */
.crop-modal-content {
    background: var(--white);
    border-radius: 1rem;
    padding: 20px;
    max-width: 90vw;
    max-height: 60vh;
    width: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.crop-container {
    max-width: 100%;
    height: 400px; /* Fixed height instead of max-height */
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.crop-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    width: auto;
    height: auto;
}

.crop-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
    flex-shrink: 0; /* Prevent shrinking */
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.zoom-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--black);
    flex-shrink: 0;
}

.zoom-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--mid-grey);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--black);
    cursor: pointer;
    border: none;
}

.zoom-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--black);
    cursor: pointer;
    border: none;
}

.crop-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 10px;
}

.crop-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 1rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    min-width: 90px;
}

.crop-btn.save {
    background-color: var(--black);
    color: var(--white);
}

.crop-btn.cancel {
    background-color: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
}

/* Encryption Info Modal - extends crop-modal-content */
.encryption-modal-content {
    background: var(--grey);
    border-radius: 1.3rem;
    padding: 1.5rem;
    max-width: 90vw;
    width: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.encryption-modal-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 700;
    color: var(--black);
}

.encryption-modal-text {
    text-align: left;
    line-height: 1.5;
    font-size: 0.8rem;
    color: var(--black);
}

.encryption-modal-paragraph {
    margin-bottom: 1rem;
}

.encryption-modal-paragraph:last-child {
    margin-bottom: 0;
}

/* CSS Badge table */
.badge-table {
    width: 100%;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.badge-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.badge-row:last-child {
    border-bottom: none;
}

.badge-icon-cell {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--grey);
    border-radius: 0.5rem;
    font-size: 0.8rem;
}

.badge-table-icon {
    height: 1rem;
    object-fit: contain;
}

.badge-table-icon-review {
    height: 1.3rem;
    object-fit: contain;
}

.badge-desc-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.badge-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--black);
    line-height: 1.3;
}

.badge-description {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.4;
    opacity: 0.8;
}

.index-toggle-text.loading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 3;
}

.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

/* Image Viewer Modal */
.image-viewer-modal {
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 1000;
}

.image-viewer-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}

.image-viewer-container.dragging {
    cursor: grabbing;
}

.viewer-image {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 5px;
}

.image-viewer-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 103;
    background: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.image-viewer-close:hover {
    background: rgba(0, 0, 0, 0.9);
}

.image-viewer-close .close-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

/* Data contribution meter */
.data-meter-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
}

.data-meter-bar {
    flex: 1;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.data-meter-fill {
    height: 100%;
    background-color: #000;
    border-radius: 4px;
    transition: width 0.5s ease-out;
    position: relative;
}

.data-meter-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    min-width: 60px;
    text-align: right;
}

/* Limit layout adjustments ONLY to the dataset menu item */
.menu-item:has(.menu-icon-svg[src*="dataset.svg"]) .menu-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.menu-item:has(.menu-icon-svg[src*="dataset.svg"]) .data-meter-container {
    width: 100%;
    flex: 1;
    margin-top: 4px;
}

.menu-item:has(.menu-icon-svg[src*="dataset.svg"]) .data-meter-bar {
    flex: 1;
    width: 100%;
    min-width: 120px; /* ensures visible bar even in tight layout */
}

.menu-item:has(.menu-icon-svg[src*="dataset.svg"]) .data-meter-fill {
    min-width: 4px; /* ensures always visible */
}

/* Multi-step Registration Form Styles */
/* Add these styles to your existing styles.css file */

.step-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--mid-grey);
    transition: all 0.3s ease;
}

.step-dot.current-step {
    width: 24px;
    border-radius: 4px;
    background-color: var(--black);
}

.form-step {
    display: none;
}

.form-step.current-step {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Ensure input-wrapper margins work inside form-step */
#register .form-step .input-wrapper {
    margin-bottom: 1rem !important;
}

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

.step-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.step-buttons button {
    flex: 1;
}

.back-button {
    background-color: var(--grey) !important;
    color: var(--black) !important;
}

.back-button:hover {
    background-color: var(--mid-grey) !important;
}

/* Match original error/success message styling */
#step1Message.error,
#step2Message.error,
#registerMessage.error {
    color: var(--red);
    margin-top: 0rem;
    padding: 0.5rem 1rem;
    background-color: #fff2f4;
    border-radius: 1rem;
    border: 1px solid var(--red);
    font-weight: 500;
}

#step1Message.success,
#step2Message.success,
#registerMessage.success {
    color: var(--green);
    margin-top: 0rem;
    padding: 0.5rem 1rem;
    background-color: #f2fff6;
    border-radius: 1rem;
    border: 1px solid var(--green);
    font-weight: 500;
}

/* ============================================ */
/* TICKER STYLES - START */
/* ============================================ */

.ticker-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000;
  overflow: hidden;
  height: 35px;
  display: flex;
  align-items: center;
  z-index: 1000;
}

.ticker {
  display: flex;
  flex-shrink: 0;
  width: 100%;
}

.ticker-track {
  display: flex;
  gap: 0.5rem;
  animation: ticker-scroll 15s linear infinite;
  will-change: transform;
}

/* Pause animation on hover */
.ticker-container:hover .ticker-track {
  animation-play-state: paused;
}

.ticker-item {
  display: flex;
  align-items: center;
  background-color: #000;
  color: #fff;
  font-size: 0.8rem;
  font-family: "Geist", sans-serif;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease;
  border: 1px solid #000;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 9px;
}

.ticker-item:hover {
  opacity: 1;
  border: 1px solid #ffffff;
}

.ticker-item .hashtag {
  color: #fff;
  text-decoration: none;
}

.ticker-item .count {
  display: flex;
  align-items: center;
  padding-left: 4px;
}

.ticker-item .count img.ticker-icon {
  width: 10px;
  height: auto;
  display: inline-block;
  margin-right: 0.2rem;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Adjust header and content to account for ticker */
body:has(.ticker-container) .headerIndex {
  margin-top: 35px;
}

body:has(.ticker-container) .content {
  /* Content is already positioned with margin-9rem, no change needed */
}

/* Fetching notification toast */
.fetching-notification {
    position: fixed;
    top: -60px; /* Start hidden above viewport */
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: top 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.fetching-notification.show {
    top: 40px;
    opacity: 1;
}

/* Animated dots for fetching notification */
.fetching-notification .dots span {
    animation: blink 1.4s infinite;
    animation-fill-mode: both;
}

.fetching-notification .dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.fetching-notification .dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 20% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* ========================================
   REPLY FUNCTIONALITY STYLES
   ======================================== */

/* Reply icon styling */
.msg-reply-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 13px;
    height: 13px;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.2s;
}

.msg-reply-icon:hover {
    opacity: 1;
}

/* Reply bubble (quoted message) styling */
.chat-text-reply {
    font-weight: 400;
    font-size: 1rem;
    white-space: pre-wrap;
    line-height: 1.5em;
    word-break: break-word;
    background-color: #000;
    color: #fff;
    padding: 6px 10px;
    border-radius: 12px;
    align-self: flex-start;
    display: block;
    margin-bottom: 0.4rem;
}

/* Reply preview above input */
.reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5;
    border-left: 3px solid #000;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.reply-preview-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.reply-preview-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #000;
}

.reply-preview-text {
    font-size: 0.875rem;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-preview-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reply-preview-close:hover {
    color: #000;
}

/* Reply mode indicator for input */
.chatbox.reply-mode {
    border-left: 3px solid #000;
}
/* Reply indicator in message previews */
.reply-indicator {
    color: #666;
    font-weight: 600;
    margin-right: 2px;
}