@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/*
CSS взят из сайта flirb.net. 
Это - старый Twitter. 
Будем его использовать для создания embr.lol
Ember
*/

body {
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    color: #333;
    background: radial-gradient(circle at top right, #3C1518, #2D0B0E);
    background-color: #2D0B0E;
    background-attachment: fixed;
    min-height: 100vh;
    font-family: "Helvetica Neue", Arial, sans-serif;
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
}

.top-nav {
    width: 100%;
    height: 46px;
    background: linear-gradient(180deg, #323232 0%, #1C1C1C 100%);
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.50);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: 980px;
    max-width: calc(100% - 20px);
    margin: 0 auto;
}

.nav-logo {
    background: linear-gradient(180deg, #69140E 0%, #3C1518 100%);
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item {
    color: rgba(255, 255, 255, 0.60);
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 100%;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    transition: 300ms;
}

.nav-item:hover {
    box-shadow: inset 0 0 15px rgb(0, 0, 0);
    color: rgba(255, 255, 255, 0.75);
}

.nav-item.selected {
    box-shadow: inset 0 0 15px rgb(0, 0, 0);
    color: #fff;
}

.nav-notifications-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: #D32828;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    box-sizing: border-box;
}

.nav-logo img {
    height: 28px;
    width: auto;
    display: block;
}

.nav-right-items {
    margin-left: auto;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
}

.nav-user-link {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-search-item input {
    background-color: rgba(255, 255, 255, 0.75);
    width: 120px;
    height: 14px;
    font-size: 12px;
    border: none;
    padding: 6px 10px;
    border-radius: 15px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    transition: 450ms;
}

.nav-search-item input:focus {
    background-color: rgb(255, 255, 255);
    box-shadow: none;
    width: 155px;
    border: none;
    outline: none;
}

/* Search Dropdown Styles */
.nav-search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 175px; /* Match the expanded input width + padding */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 2px;
}

.search-results {
    padding: 0;
}

.search-group-title {
    padding: 6px 10px;
    font-size: 11px;
    color: #666;
    background: #f6f6f6;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-weight: bold;
}

.search-group-title:first-child {
    border-top: none;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-decoration: none;
    color: #333;
}

.search-result-item:hover {
    background-color: #f8f8f8;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item.search-result-item-simple {
    padding-left: 12px;
}

.search-result-avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-username {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-verified {
    width: 14px;
    height: 14px;
    margin-left: 4px;
    flex-shrink: 0;
}

.search-loading {
    padding: 15px;
    text-align: center;
    color: #666;
    font-size: 12px;
}

.search-no-results {
    padding: 15px;
    text-align: center;
    color: #666;
    font-size: 12px;
}

.nav-post-button {
    color: rgba(255, 255, 255, 1);
    background: linear-gradient(180deg, #69140E 0%, #3C1518 100%);
    display: flex;
    align-items: center;
    padding: 6px 10px;
    height: 100%;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
    border: 1px solid #992135;
}

.nav-post-button:hover {
    background: linear-gradient(180deg, #8A1A12 0%, #4D1B1F 100%);
}

.nav-post-button:active {
    background: linear-gradient(180deg, #3C1518 0%, #69140E 100%);
}

.container {
    width: 865px;
    margin: 0 auto;
    display: flex;
    padding-top: 46px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #ffffff40;
}

.main-content {
    width: 548px;
    margin-top: 15px;
    margin-right: 15px;
}

.sidebar {
    width: 302px;
    margin-top: 15px;
    position: sticky;
    top: 61px;
    height: calc(100vh - 61px);
    overflow-y: auto;
}

.module {
    position: relative;
    border-radius: 5px;
    border: 1px solid rgb(230, 230, 230);
    margin-bottom: 10px;
    background-color: #fff;
}

.profile-header {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    position: relative;
}

.profile-picture {
    width: 128px;
    height: auto;
    border-radius: 4px;
}

.profile-info {
    margin-left: 15px;
    flex-grow: 1;
}

.profile-info h1 {
    margin-top: 2px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    font-size: 22px;
}

.verified-large {
    margin-left: 6px;
    width: 20px;
    height: 20px;
    position: relative;
}

.verified-large.clickable:hover {
    opacity: 0.8;
}

.verified-small {
    margin-left: 4px;
    width: 16px;
    height: 16px;
}

.badge-color-picker {
    position: absolute;
    top: calc(100% + 8px);
    left: 60%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
}

.badge-color-picker::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #e1e8ed;
}

.badge-color-picker::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}

.badge-color-picker.show {
    display: block;
}

.badge-color-picker-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #14171a;
    text-align: center;
}

.badge-color-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.badge-color-option {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.badge-color-option:hover {
    border-color: #D32828;
}

.badge-color-option.selected {
    border-color: #D32828;
    background-color: rgba(211, 40, 108, 0.1);
}

.badge-color-option img {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.profile-info .username {
    margin-top: 2px;
    margin-bottom: 8px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 15px;
}

.profile-info .bio {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
}

.profile-info .bio a {
    color: #D32828;
    text-decoration: none;
}

.profile-info .bio a:hover {
    text-decoration: underline;
}

.profile-info .location {
    margin-top: 5px;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.6);
}

.profile-info .website {
    margin-top: 5px;
    margin-bottom: 5px;
}

.profile-info .website a {
    color: #D32828;
    text-decoration: none;
}

.profile-info .website a:hover {
    text-decoration: underline;
}

.profile-info .join-date {
    margin-top: 5px;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.6);
}

.follow-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    border-radius: 4px;
    color: #333;
    font-weight: bold;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.follow-button:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

.follow-button:disabled,
.follow-button[disabled=disabled] {
    background: #CDCDCD;
    color: #999;
    cursor: not-allowed;
}

.follow-button.disabled,
.suggestion-follow.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Notification styles */
.status.notification {
    padding: 13px;
    position: relative;
    min-height: 56px;
    box-sizing: border-box;
}

.status.notification:hover {
    background-color: #f3f3f3;
}

.notification-content {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Make all notification links appear above the overlay */
.notification-content a:not(.post-link-overlay),
.notification-profile, 
.notification-more-profiles {
    position: relative;
    z-index: 2;
}

.notification-icon {
    width: 16px;
    height: 16px;
    margin-right: 0;
    margin-top: 2px;
    flex: 0 0 16px;
    vertical-align: middle;
}

.notification-summary {
    margin-bottom: 10px;
}

.notification-text {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.35;
    font-size: 14px;
    color: #999;
}

.notification-message {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
}

.notification-text a {
    color: #333;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    z-index: 99;
}

.notification-text a:hover {
    text-decoration: underline;
    color: #D32828;
}

.status.notification .status-time {
    color: #999;
    font-size: 12px;
    white-space: nowrap;
    margin-left: auto;
    padding-left: 8px;
    line-height: 1.35;
}

.notification-post-text {
    color: #999;
    font-size: 13px;
    margin: -5px 0 8px 22px;
}

.notification-profiles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 22px;
}

.notification-profile {
    margin-right: 8px;
    position: relative;
    z-index: 3;
}

.notification-avatar {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

.notification-more-profiles {
    font-size: 12px;
    color: #999;
    padding: 3px 6px;
    background-color: #f2f2f2;
    border-radius: 3px;
    margin-left: 5px;
    position: relative;
    z-index: 3;
}

.notification-post-preview {
    background-color: #f9f9f9;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
    font-size: 13px;
    color: #555;
}

.notification-post-preview .status-media {
    margin-top: 10px;
}

.notification-post-preview .media-image img,
.notification-post-preview .media-video img {
    max-height: 150px;
}

.notification-actions {
    margin-top: 8px;
    display: flex;
}

.notifications-list {
    padding: 0;
}

.notification.verify .notification-content .notification-summary {
    margin-bottom: 10px;
}

.notification.verify .notification-content .notification-summary .notification-text .notification-message {
    color: #333;
    font-weight: bold;
}

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

.notifications-mark-read {
    font-size: 12px;
    color: #D32828;
    font-weight: 600;
    text-decoration: none;
}

.notifications-mark-read:hover {
    text-decoration: underline;
}

.notification-card {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
    border-left: 3px solid transparent;
}

.notification-card.notification-unread {
    border-left-color: #D32828;
    background: linear-gradient(180deg, #fff7f9 0%, #fff 100%);
}

.notification-card .notification-content {
    gap: 8px;
}

.notification-actor {
    font-weight: 700;
}

.notification-date-pill {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3f3f4;
    color: #777;
    font-size: 11px;
    line-height: 1.45;
    white-space: nowrap;
}

.notification-post-link {
    margin-left: 22px;
    display: block;
    text-decoration: none;
    color: #4a4a4a;
    background: #f8f8f9;
    border: 1px solid #e8e8ea;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.35;
}

.notification-post-link:hover {
    color: #D32828;
    border-color: #f0c5d1;
    background: #fff;
}

.profile-stats {
    display: flex;
    border-top: 1px solid #e6e6e6;
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-right: 1px solid #e6e6e6;
    text-decoration: none;
    display: block;
}

.stat-item:hover {
    background-color: #f5f5f5;
}

.stat-item.selected {
    background-color: #f5f5f5;
}

.stat-item:last-child {
    border-right: none;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.stat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
}

.statuses-list {
    padding: 0;
}

.status {
    padding: 12px;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
    min-height: 60px;
    display: flex;
    flex-direction: column;
}

.statuses-list .status:last-child {
    border-bottom: none;
}

.status:hover {
    background-color: #f3f3f3;
}

.status:target {
    background-color: #eef7ff;
    border-left: 3px solid #1da1f2;
}

.status .post-content-wrapper {
    display: flex;
    width: 100%;
}

.avatar-container {
    flex-shrink: 0;
    align-self: flex-start;
    z-index: 2;
}

.status-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    margin-right: 10px;
}

.status-content {
    flex-grow: 1;
    position: relative;
}

.post-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Ensure links and interactive elements are above the overlay */
.status-content a:not(.post-link-overlay),
.status-content .status-actions,
.status-content .reply-form {
    position: relative;
    z-index: 2;
}

.status-content:hover {
    cursor: pointer;
}

.status-header {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.status-name {
    font-weight: 700;
    font-size: 15px;
    color: #14171a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.status-name:hover {
    text-decoration: underline;
    color: #D32828;
}

.status-username {
    color: #657786;
    text-decoration: none;
    font-size: 14px;
}

.status-time {
    margin-left: auto;
    color: #657786;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-time a {
    color: #657786;
    text-decoration: none;
}

.status-time a:hover {
    text-decoration: underline;
}

.status-time-icon {
    font-size: 12px;
    opacity: 0.8;
}

.status-text {
    font-size: 15px;
    line-height: 1.5;
    color: #14171a;
    margin-bottom: 10px;
}

.status-text iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    margin-top: 5px;
    border: 0;
}

/* Media display styles */
.status-media {
    margin: 0 0 6px 0;
    border-radius: 4px;
    overflow: hidden;
    max-width: 100%;
    display: grid;
    gap: 2px;
}

/* Single image - full width */
.status-media.media-count-1 {
    grid-template-columns: 1fr;
}

/* Two images - side by side */
.status-media.media-count-2 {
    grid-template-columns: 1fr 1fr;
}

/* Three images - large left, two stacked right */
.status-media.media-count-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.status-media.media-count-3 .media-item-0 {
    grid-row: 1 / 3;
}

/* Four images - 2x2 grid */
.status-media.media-count-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* More than 4 images - show first 4 in 2x2 grid */
.status-media.media-count-5,
.status-media.media-count-6,
.status-media.media-count-7,
.status-media.media-count-8,
.status-media.media-count-9 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.media-image,
.media-video {
    margin-bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 150px;
}

.media-image a,
.media-video a {
    display: block;
    width: 100%;
    height: 100%;
}

.media-image img,
.media-video img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    max-height: none;
    border-radius: 0;
    display: block;
    object-fit: cover;
}

/* Single image gets better height */
.status-media.media-count-1 .media-image img,
.status-media.media-count-1 .media-video img {
    max-height: 350px;
    min-height: 200px;
}

.media-video {
    position: relative;
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-play-icon:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid white;
    margin-left: 4px;
}

.repost-indicator {
    color: #999;
    font-size: 12px;
    margin-bottom: 2px;
    margin-top: -4px;
    display: flex;
    align-items: center;
    margin-left: 58px;
    width: calc(100% - 58px);
}

.repost-indicator img {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.repost-indicator i {
    width: 14px;
    text-align: center;
    margin-right: 4px;
    color: #657786;
}

.repost-indicator a {
    color: #999;
    text-decoration: none;
    margin-left: 3px;
}

.repost-indicator a:hover {
    text-decoration: underline;
}

.repost-indicator span {
    margin-left: 4px;
}

.reply-indicator {
    color: #657786;
    font-size: 12px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.reply-indicator a {
    color: #D32828;
    text-decoration: none;
}

.reply-indicator a:hover {
    text-decoration: underline;
}

.status-text a {
    color: #D32828;
    text-decoration: none;
}

.status-text a:hover {
    text-decoration: underline;
}

.status-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 8px;
}

.status-action {
    color: #657786;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    margin-right: 0;
    white-space: nowrap;
    line-height: 1;
}

.status-action:hover {
    color: #D32828;
}

.status-actions .status-action:last-child {
    margin-right: 0;
}

.status-action i {
    min-width: 16px;
    text-align: center;
    margin-right: 0;
}

.status-action .action-label {
    font-size: 13px;
    color: #657786;
    margin-right: 2px;
}

.status-action .count {
    color: #536471;
    font-weight: 600;
    min-width: 10px;
    margin-left: 2px;
}

.action-link {
    margin-right: 10px;
    color: #999;
    font-size: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.action-link:hover {
    color: #D32828;
}

.status-action img {
    margin-right: 3px;
    width: 16px;
    height: 16px;
}

.sidebar-module {
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
}

.sidebar-module-header {
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
}

/* Refresh button styles */
.refresh-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10%;
}

.refresh-button:hover {
    background-color: rgba(241, 241, 241, 1);
}

.refresh-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.refresh-icon.spinning {
    animation: spin 0.6s ease-in-out;
}

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

.sidebar-module-content {
    padding: 10px;
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-list li {
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
}

.sidebar-list li:last-child {
    border-bottom: none;
}

.sidebar-list.with-borders li:last-child {
    border-bottom: 1px solid #e6e6e6;
}

.sidebar-list.no-borders li {
    border-bottom: none;
}

.sidebar-list a {
    text-decoration: none;
    color: #333;
    display: block;
}

.sidebar-list a:hover {
    color: #D32828;
}

.sidebar-list a.selected {
    color: #D32828;
    font-weight: bold;
}

.sidebar-list li {
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
}

.suggestion-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    margin-right: 10px;
}

.suggestion-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.suggestion-name {
    font-weight: bold;
    color: #333;
    display: flex !important;
    align-items: center !important;
}

.suggestion-username {
    color: #999;
    font-size: 12px;
}

.suggestion-follow {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    border-radius: 4px;
    color: #333;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.suggestion-follow:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

.footer {
    margin-top: 15px;
    padding: 10px;
    font-size: 11px;
    color: #a8a8a8;
}

.footer a {
    color: #a8a8a8;
    text-decoration: none;
    margin-right: 8px;
}

.footer a:hover {
    color: #a8a8a8;
    text-decoration: underline;
}

/* Loading indicator styles */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #999;
    border-top: 1px solid #e6e6e6;
}

/* Sidebar profile styles */
.sidebar-profile {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
}

.sidebar-profile:hover {
    background-color: #f5f5f5;
}

.sidebar-profile-picture {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    margin-right: 10px;
}

.sidebar-profile-info {
    flex-grow: 1;
}

.sidebar-profile-info .username {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    margin: 0;
}

.sidebar-profile-info h2 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: #333;
}

/* Trending hashtags styles */
.trending-hashtag {
    display: flex;
    flex-direction: column;
}

.hashtag-name {
    font-weight: bold;
    color: #333;
}

.hashtag-count {
    font-size: 12px;
    color: #999;
}

/* New post module styles */
.new-post-module {
    display: flex;
    padding: 12px;
    gap: 10px;
}

.new-post-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
}

.new-post-input-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.new-post-input {
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 10px;
    resize: none;
    min-height: 60px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
    transition: all 200ms;
}

.new-post-input:focus {
    border-color: #D32828;
    outline: none;
    box-shadow: 0 0 3px rgba(211, 40, 108, 0.3);
}

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

.char-count {
    color: #666;
    font-size: 13px;
    margin-right: 10px;
}

.new-post-button {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    color: #333;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.new-post-button:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

.new-post-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Media icon button styles */
.media-icon-button {
    background: none;
    border: none;
    padding: 0px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.media-icon-button img {
    width: 16px;
    height: 16px;
    display: block;
}

.media-icon-button:hover:not(:disabled) {
    opacity: 0.7;
}

.media-icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Remove image button styles */
.remove-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s;
}

.remove-image-btn:hover {
    background: rgba(0, 0, 0, 0.85);
}

.new-post-button.remove-photo {
    background: linear-gradient(180deg, #EE3131 0%, #C32929 100%);
    color: white;
    border: 1px solid #981F1F;
}

.new-post-button.remove-photo:hover {
    background: linear-gradient(360deg, #EE3131 0%, #C32929 100%);
}

/* Edit profile page styles */
.edit-profile-form {
    padding: 15px;
    max-width: 515px;
    margin: 0 auto;
}

.username-note {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.edit-profile-picture-section {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    gap: 15px;
    padding: 15px;
}

.edit-avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    flex-shrink: 0;
}

.file-upload-container {
    flex-grow: 1;
}

.file-upload-container label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.file-upload-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-upload-actions input[type="file"] {
    flex-grow: 1;
    font-size: 12px;
}

.upload-button {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    color: #333;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

.upload-button:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

/* Banner edit styles */
.edit-profile-banner-section {
    padding: 15px;
    margin-bottom: 0;
}

.edit-banner-preview-container {
    margin-bottom: 15px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
    height: 167px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.edit-banner-placeholder {
    height: 100px;
    background-color: #f5f8fa;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.edit-banner-placeholder p {
    color: #999;
    margin: 0;
}

.banner-note {
    font-size: 12px;
    color: #999;
    margin: 5px 0 10px;
}

/* Success message alert */
.alert {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.alert-error {
    background-color: #fde2e2;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.alert-success {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

.edit-profile-field {
    margin-bottom: 15px;
}

.edit-profile-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.edit-profile-field input,
.edit-profile-field textarea,
.edit-profile-field select {
    width: 100%;
    padding: 8px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
}

.edit-profile-field textarea {
    height: 80px;
    resize: vertical;
}

.edit-profile-field input:focus,
.edit-profile-field textarea:focus,
.edit-profile-field select:focus {
    border-color: #D32828;
    outline: none;
    box-shadow: 0 0 3px rgba(211, 40, 108, 0.3);
}

.timezone-note {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.char-counter {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    text-align: right;
}

.edit-profile-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 10px;
}

.cancel-button,
.save-button {
    padding: 8px 16px;
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    border-radius: 4px;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.cancel-button:hover,
.save-button:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

/* Remove the old unused styles */
.edit-profile-picture,
.edit-picture-overlay {
    display: none;
}

/* Single post page styles */
.sidebar-module-header {
    display: flex;
    align-items: center;
}

.back-link {
    color: #D32828;
    text-decoration: none;
    margin-right: 10px;
}

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

.post-detail {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
}

.post-stats {
    color: #999;
    font-size: 12px;
    margin: 10px 0;
}

.post-actions {
    display: flex;
    padding: 10px 0;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    margin-top: 10px;
}

.post-action {
    display: flex;
    align-items: center;
    margin-right: 20px;
    color: #666;
    font-size: 12px;
}

.post-action img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    opacity: 0.6;
}

.reply-box {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
    gap: 10px;
}

.reply-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
}

.reply-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.reply-input {
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 10px;
    resize: none;
    min-height: 60px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
}

.reply-input:focus {
    border-color: #D32828;
    outline: none;
    box-shadow: 0 0 3px rgba(211, 40, 108, 0.3);
}

.reply-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reply-button {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    color: #333;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: bold;
    cursor: pointer;
}

.reply-button:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

.replies-header {
    padding: 10px 15px;
    font-weight: bold;
    border-bottom: 1px solid #e6e6e6;
}

.related-post {
    display: flex;
    flex-direction: column;
}

.related-post-text {
    font-size: 13px;
    color: #333;
}

.related-post-user {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}

/* Login and Register page styles */
.login-form,
.register-form {
    padding: 20px;
    margin: 0 auto;
}

.login-form h1,
.register-form h1 {
    text-align: center;
    margin-bottom: 20px;
}

.login-buttons,
.register-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.login-module,
.register-module {
    margin-bottom: 15px;
}

.separator {
    text-align: center;
    margin: 15px 0;
    color: #999;
    position: relative;
}

.separator:before,
.separator:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background-color: #e6e6e6;
}

.separator:before {
    left: 0;
}

.separator:after {
    right: 0;
}

.social-login {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.social-button {
    padding: 8px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* New Post Page Styles */
.new-post-page {
    padding: 20px;
}

.post-area {
    display: flex;
    gap: 15px;
}

.post-input-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.post-input {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    resize: none;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.post-input:focus {
    border-color: #D32828;
    outline: none;
    box-shadow: 0 0 3px rgba(211, 40, 108, 0.3);
}

.post-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.post-attachments {
    display: flex;
    gap: 10px;
}

.attachment-button {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    color: #666;
    font-size: 13px;
}

.attachment-button:hover {
    background-color: #f9f9f9;
    color: #d32828;
}

.post-button {
    background: linear-gradient(180deg, #be2525 0%, #D32828 100%);
    color: white;
    border: 1px solid #c62c6a;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: bold;
    cursor: pointer;
}

.post-button:hover {
    background: linear-gradient(360deg, #be2525 0%, #D32828 100%);
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tip-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
    align-items: center;
    gap: 15px;
}

.tip-item:last-child {
    border-bottom: none;
}

.tip-icon {
    width: 36px;
    height: 36px;
}

.tip-content h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
}

.tip-content p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Alpha Notice Banner */
.alpha-notice {
    background-color: rgb(255, 235, 60);
    width: 100%;
    padding-top: 46px;
}

.alpha-notice-content {
    max-width: 865px;
    margin: 0 auto;
    padding: 10px 0;
    font-size: 13px;
    color: #000000;
    text-align: center;
}

/* Remove top padding from container when alpha notice is shown */
body.has-alpha-notice .container {
    padding-top: 0;
}

/* Avatar Dropdown Styles */
.nav-avatar-container {
    position: relative;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 14px;
}

.nav-avatar-container::before,
.nav-avatar-container::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%);
    top: 50%;
    transform: translateY(-50%);
}

.nav-avatar-container::before {
    left: 0;
}

.nav-avatar-container::after {
    right: 0;
}

.nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
    display: block;
}

.avatar-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 46px;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    z-index: 100;
    overflow: hidden;
    border: 1px solid #e6e6e6;
}

.avatar-dropdown.show {
    display: block;
}

.dropdown-user-info {
    padding: 12px 15px;
    border-bottom: 1px solid #e6e6e6;
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
}

.dropdown-user-info h3 {
    margin: 0 0 3px 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.dropdown-user-info p {
    margin: 0;
    font-size: 12px;
    color: #999;
}

.dropdown-link {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid #e6e6e6;
}

.dropdown-link:hover {
    background-color: #f5f8fa;
}

.dropdown-link.danger {
    color: #D32828;
    border-bottom: none;
}

.dropdown-link.danger:hover {
    background-color: #ffebee;
}

/* Post action styles */
.post-action.disabled,
.status-action.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.status-action.favorited {
    color: #E5A000;
}

.status-action.liked {
    color: #ff3535;
}

.status-action.reposted {
    color: #4AB10B;
}

.post-action:hover,
.status-action:hover {
    text-decoration: none;
}

.reply-form {
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 8px;
}

.reply-input-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.reply-input {
    width: 100%;
    height: 36px;
    padding: 8px;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    resize: none;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.reply-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reply-attachments {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reply-char-count {
    font-size: 14px;
    color: #999;
    margin-right: 10px;
}

.reply-button {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    color: #333;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.reply-button:hover {
    background-color: #b32059;
}

.reply-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Search page styles */
.search-toggle {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    background-color: #fff;
}

.search-toggle-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
}

.search-toggle-item:hover {
    background-color: #f8f8f8;
}

.search-toggle-item.active {
    border-bottom: 2px solid #D32828;
    background-color: #f5f5f5;
    color: #D32828;
}

.reply-box {
    display: flex;
}

.verification-status {
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 14px;
    border: 1px solid;
}

.verification-status.pending {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.verification-status.verified {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.verification-status.rejected {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.verification-status.expired {
    background: #f8f9fa;
    border-color: #6c757d;
    color: #495057;
}

.verification-status h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
}

.verification-intro {
    margin-bottom: 20px;
}

.verification-intro h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.verification-intro p {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

.verification-required {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
}

.verification-active,
.verification-expired,
.verification-start,
.verification-generated {
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.verification-expired {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.verification-active h4,
.verification-expired h4,
.verification-start h4,
.verification-generated h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
}

.verification-code-display {
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
}

.qr-code-container {
    margin: 15px 0;
    text-align: center;
}

.qr-code {
    max-width: 200px;
    height: auto;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
}

.verification-url {
    margin: 15px 0;
}

.url-display {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.url-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: #f8f9fa;
}

.copy-button {
    padding: 8px 16px;
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    border-radius: 4px;
    color: #333;
    font-weight: bold;
    cursor: pointer;
}

.copy-button:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

.verification-code {
    margin: 10px 0;
    padding: 10px;
    background: #e3f2fd;
    border-radius: 4px;
    border: 1px solid #bbdefb;
}

.verification-code code {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: #1976d2;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 6px;
    border-radius: 2px;
}

.verification-expiry {
    margin: 10px 0;
    padding: 10px;
    background: #fff3e0;
    border-radius: 4px;
    border: 1px solid #ffe0b2;
    color: #e65100;
    font-size: 14px;
}

.verification-details {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0;
}

.verification-details p {
    margin: 5px 0;
    font-size: 14px;
}

.verification-actions {
    margin-top: 15px;
}

.verification-info {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 4px;
    padding: 15px;
    margin-top: 20px;
}

.verification-info h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.verification-info ol {
    margin: 0;
    padding-left: 20px;
}

.verification-info li {
    margin-bottom: 8px;
    color: #666;
}

/* Single Post View Styles */
.single-post {
    padding: 12px;
}

.single-post-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.single-post-avatar {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    margin-right: 10px;
}

.single-post-user-info {
    display: flex;
    flex-direction: column;
}

.single-post-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.single-post-name:hover {
    color: #D32828;
    text-decoration: underline;
}

.single-post-username {
    font-size: 14px;
    color: #999;
    text-decoration: none;
}

.single-post-text {
    font-size: 22px;
    line-height: 1.35;
    margin-bottom: 10px;
    color: #14171a;
}

.single-post-text a {
    color: #D32828;
    text-decoration: none;
}

.single-post-text a:hover {
    text-decoration: underline;
}

.single-post-media {
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
    display: grid;
    gap: 2px;
}

/* Single image - full width */
.single-post-media.media-count-1 {
    grid-template-columns: 1fr;
}

/* Two images - side by side */
.single-post-media.media-count-2 {
    grid-template-columns: 1fr 1fr;
}

/* Three images - large left, two stacked right */
.single-post-media.media-count-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.single-post-media.media-count-3 .media-item-0 {
    grid-row: 1 / 3;
}

/* Four images - 2x2 grid */
.single-post-media.media-count-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* More than 4 images */
.single-post-media.media-count-5,
.single-post-media.media-count-6,
.single-post-media.media-count-7,
.single-post-media.media-count-8,
.single-post-media.media-count-9 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Single post media items should have better sizing */
.single-post-media .media-image,
.single-post-media .media-video {
    min-height: 200px;
}

.single-post-media .media-image img,
.single-post-media .media-video img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
}

.single-post-media.media-count-1 .media-image img,
.single-post-media.media-count-1 .media-video img {
    max-height: 450px;
    min-height: 250px;
}

.single-post-date {
    color: #657786;
    font-size: 13px;
    padding-top: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.single-post-stats {
    display: flex;
    padding: 10px 0;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    align-items: center;
    justify-content: flex-start;
}

.single-post-text iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    margin-top: 7px;
    border: 0;
}

.inline-stat {
    margin-right: 20px;
    color: #999;
    font-size: 14px;
}

.single-post-actions {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-bottom: 10px;
}

.single-post-actions .status-action {
    font-size: 13px;
}

.single-post-actions .status-action .action-label {
    font-size: 13px;
}

/* Reply Item Styles */

.post-permalink {
    color: #999;
    text-decoration: none;
}

.post-permalink:hover {
    color: #D32828;
    text-decoration: underline;
}

.reply-to-link {
    color: #999;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.reply-to-link:hover {
    color: #D32828;
    text-decoration: underline;
}

.reply-context-card {
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid #e1e8ed;
    border-left: 3px solid #d32828;
    border-radius: 8px;
    background: #f8fbfd;
    text-decoration: none;
}

.reply-context-author {
    font-size: 12px;
    font-weight: 600;
    color: #536471;
    margin-bottom: 2px;
}

.reply-context-text {
    font-size: 13px;
    line-height: 1.35;
    color: #14171a;
}

.reply-context-card:hover .reply-context-text {
    text-decoration: underline;
}

/* Post stats link style */
.post-stat-link {
    color: inherit;
    text-decoration: none;
}

.post-stat-link:hover {
    color: #D32828;
    text-decoration: underline;
}

/* Post source styling */
.post-source {
    margin-left: 4px;
}

.post-source a {
    color: #999;
    text-decoration: none;
}

.post-source a:hover {
    color: #D32828;
    text-decoration: underline;
}

/* Translation Styles */
.translate-container {
    margin-top: -5px;
    margin-bottom: 6px;
}

.translate-link {
    color: #D32828;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

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

.translate-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.translation-result {
    margin-top: 6px;
    color: #333;
    line-height: 1.4;
}

.translation-text {
    color: #333;
    line-height: 1.4;
    margin-bottom: 4px;
}

.translation-source {
    color: #999;
    font-size: 11px;
}

.translation-error {
    color: #999;
    font-size: 12px;
    font-style: italic;
}

/* Email Verification Styles - 2012 era design */
.email-verification-content {
    padding: 12px;
}

.verification-status {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid;
    background: linear-gradient(180deg, #fefefe 0%, #f8f8f8 100%);
}

.verification-status.verified {
    border-color: #c3e6cb;
    background: linear-gradient(180deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.verification-status.unverified {
    border-color: #f5c6cb;
    background: linear-gradient(180deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

.verification-status.success {
    border-color: #c3e6cb;
    background: linear-gradient(180deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.verification-status.error {
    border-color: #f5c6cb;
    background: linear-gradient(180deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

.verification-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: bold;
}

.verification-icon.warning {
    color: #856404;
}

.verification-icon.success {
    color: #155724;
}

.verification-text {
    flex: 1;
    line-height: 1.3;
}

.verification-email {
    font-family: monospace;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
}

.verification-section {
    padding: 0 12px 15px 12px;
    border-top: 1px solid #e6e6e6;
    margin-top: 0;
}

.verification-section:first-child {
    border-top: none;
    padding-top: 0;
}

.verification-description {
    margin: 12px 0 15px 0;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
}

.verification-button {
    border: 1px solid;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
    margin-right: 8px;
    transition: all 0.2s ease;
}

.verification-button.primary {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border-color: #CDCDCD;
    color: #333;
}

.verification-button.primary:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

.verification-button.primary:disabled {
    background: #CDCDCD;
    color: #999;
    cursor: not-allowed;
}

.verification-button.secondary {
    background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
    border-color: #ccc;
    color: #666;
}

.verification-button.secondary:hover {
    background: linear-gradient(180deg, #e8e8e8 0%, #d8d8d8 100%);
}

.verification-code-container {
    margin: 15px 0;
}

.verification-label {
    display: block;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    font-size: 13px;
}

.verification-code-input {
    width: 160px;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-family: "Courier New", monospace;
    font-size: 18px;
    text-align: center;
    letter-spacing: 3px;
    background: linear-gradient(180deg, #fff 0%, #f8f8f8 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.verification-code-input:focus {
    border-color: #D32828;
    outline: none;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 3px rgba(211, 40, 108, 0.3);
}

.verification-note {
    font-size: 11px;
    color: #999;
    margin: 5px 0 0 0;
    font-style: italic;
}

.verification-buttons {
    margin: 15px 0 0 0;
}

/* Message styling when shown dynamically */
.verification-status.message {
    margin: 0 0 15px 0;
}

/* Danger Zone Styles */
.danger-header {
    background-color: #dc3545 !important;
    color: white !important;
}

.delete-account-field {
    padding: 15px 0;
}

.danger-label {
    color: #dc3545;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
}

.danger-warning {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px;
    border-radius: 4px;
    margin: 10px 0;
}

.delete-account-button {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.delete-account-button:hover {
    background-color: #c82333;
}

/* Delete Account Modal Styles */
.post-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.post-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.post-modal-header {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.post-modal-close:hover {
    color: #333;
}

.post-modal-body {
    padding: 20px;
}

.delete-warning-section {
    margin-bottom: 20px;
}

.delete-warning-title {
    color: #dc3545;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}

.delete-warning-text {
    margin-bottom: 10px;
}

.delete-data-list {
    margin: 10px 0 10px 20px;
    color: #666;
}

.delete-data-list li {
    margin: 5px 0;
}

.delete-confirmation-text {
    font-weight: 500;
    margin-top: 15px;
}

.delete-confirm-button {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.delete-confirm-button:hover {
    background-color: #c82333;
}

/* Direct Messages Styles */
/* Messages List Page Styles */
.messages-list {
    padding: 0;
}

/* New count styles for activity module */
.new-count {
    display: inline-block;
    color: #be2525;
    margin-left: 5px;
    font-weight: bold;
}

.message-item {
    padding: 12px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: stretch;
    transition: background-color 0.2s;
    text-decoration: none;
    color: inherit;
}

.message-item:hover {
    background-color: #f8f8f8;
}

.message-item.unread {
    background-color: #f0f8ff;
}

.message-item.unread:hover {
    background-color: #e6f2ff;
}

.new-conversation-item {
    border-bottom: 1px solid #e6e6e6;
    background-color: #fafafa;
}

.new-conversation-item:hover {
    background-color: #f0f0f0;
}

.new-conversation-item .message-name {
    color: #D32828;
    font-weight: 600;
}

.new-conversation-item .message-preview {
    font-style: italic;
}

.message-avatar {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    margin-right: 10px;
}

.message-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.unread-badge {
    background-color: #D32828;
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    margin-left: 8px;
}

.message-preview.unread {
    font-weight: 600;
    color: #333;
}

.message-name {
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
}

.message-username {
    font-weight: normal;
    color: #999;
    font-size: 12px;
    margin-left: 5px;
    text-decoration: none;
}

.message-time {
    color: #999;
    font-size: 12px;
}

.message-preview {
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 350px;
}

.message-arrow {
    margin-left: 10px;
    align-self: center;
    width: 16px;
    height: 16px;
    position: relative;
}

.message-arrow:after {
    content: "";
    border: solid #999;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -1px;
}

/* Conversation Page Styles */
.conversation-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 250px);
    min-height: 400px;
    max-height: 650px;
}

.conversation-header {
    padding: 10px 15px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
}

.conversation-header a {
    margin-right: 10px;
    color: #D32828;
    text-decoration: none;
}

.conversation-header a:hover {
    text-decoration: underline;
}

.conversation-partner {
    display: flex;
    align-items: center;
}

.conversation-partner-avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin-right: 8px;
}

.conversation-partner-name {
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.messages-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

.message {
    padding: 12px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    position: relative;
}

.message:last-child {
    border-bottom: none;
}

.message-received {
    background-color: #ffffff;
}

.message-sent {
    background-color: #fcfcfc;
}

.message-text {
    font-size: 14px;
    margin-bottom: 5px;
    word-wrap: break-word;
}

.message-text a {
    color: #D32828;
    text-decoration: none;
}

.message-text a:hover {
    text-decoration: underline;
}

.message-direction {
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    color: #D32828;
    font-size: 12px;
    font-weight: normal;
}

.new-message-form {
    border-top: 1px solid #e6e6e6;
    padding: 15px;
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    flex-shrink: 0;
}

.new-message-input {
    flex-grow: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 10px;
    resize: none;
    height: 18px;
    margin-right: 10px;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

.new-message-input:focus {
    border-color: #D32828;
    outline: none;
    box-shadow: 0 0 3px rgba(211, 40, 108, 0.3);
}

.send-message-button {
    background: linear-gradient(180deg, #be2525 0%, #D32828 100%);
    border: 1px solid #c62c6a;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.send-message-button:hover {
    background: linear-gradient(360deg, #be2525 0%, #D32828 100%);
}

.empty-state {
    padding: 30px;
    text-align: center;
    color: #999;
}

.conversation-container {
    position: relative;
}


/* Styles for the new message modal */
.new-message-button {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    color: #333;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    margin-left: auto;
    transition: 0.2s;
}

.new-message-button:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

/* Message Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    overflow: auto;
}

.modal-content {
    background-color: #fff;
    margin: 60px auto;
    width: 565px;
    max-width: 90%;
    border-radius: 5px;
    border: 1px solid rgb(230, 230, 230);
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.50);
    animation: modalFadeIn 0.2s ease-out;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 18px;
    font-weight: bold;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
}

.modal-close {
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    color: #999;
    border: none;
    background: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #666;
}

.modal-body {
    padding: 12px;
}

.modal-search {
    width: 100%;
    padding: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-size: 14px;
    transition: all 300ms;
}

.modal-search:focus {
    border-color: #D32828;
    outline: none;
    box-shadow: 0 0 3px rgba(211, 40, 108, 0.3);
}

.user-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-item:hover {
    background-color: #f8f8f8;
}

.user-item:last-child {
    border-bottom: none;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    margin-right: 15px;
}

.user-info {
    flex-grow: 1;
}

.user-name {
    font-weight: bold;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    color: #333;
}

.user-username {
    color: #999;
    font-size: 14px;
}

.empty-following {
    text-align: center;
    color: #999;
    padding: 20px;
    font-size: 14px;
    line-height: 1.4;
}

.empty-following p {
    margin: 5px 0;
}

/* Profile background color picker styles */
.color-picker-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.color-picker-container input[type="text"] {
    flex-grow: 1;
}

.color-picker-container input[type="color"] {
    width: 40px;
    height: 40px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
}

.color-preview-container {
    margin-bottom: 10px;
}

.color-preview {
    width: 100%;
    height: 60px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    margin-bottom: 5px;
}

.color-preview-text {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.color-note {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

/* Radio group styles for settings page */
.radio-group {
    margin-top: 10px;
}

.radio-group label {
    display: flex !important;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.radio-group input[type="radio"] {
    margin: 0 8px 0 0;
    width: auto;
    flex: none;
}

.radio-group img {
    margin-left: 5px;
    vertical-align: middle;
    height: 16px;
    width: auto;
}

/* Post Modal Styles */
.post-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    overflow: auto;
}

.post-modal-content {
    background-color: #fff;
    margin: 60px auto;
    width: 565px;
    max-width: 90%;
    border-radius: 5px;
    border: 1px solid rgb(230, 230, 230);
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.50);
}

.post-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 18px;
    font-weight: bold;
}

.post-modal-header h2 {
    margin: 0;
    font-size: 18px;
}

.post-modal-close {
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    color: #999;
    border: none;
    background: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-modal-close:hover {
    color: #666;
}

.post-modal-body {
    padding: 12px;
}

.post-modal .new-post-module {
    padding: 0;
}

.post-modal .new-post-input {
    min-height: 60px;
    transition: all 200ms;
}

.post-modal .new-post-input:focus {
    border-color: #D32828;
    outline: none;
    box-shadow: 0 0 3px rgba(211, 40, 108, 0.3);
}

.post-modal .new-post-button {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    color: #333;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.post-modal .new-post-button:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

.post-modal .new-post-button.remove-photo {
    background: linear-gradient(180deg, #EE3131 0%, #C32929 100%);
    color: white;
    border: 1px solid #981F1F;
}

.post-modal .new-post-button.remove-photo:hover {
    background: linear-gradient(360deg, #EE3131 0%, #C32929 100%);
}

.post-modal .new-post-button[type="submit"] {
    background: linear-gradient(180deg, #be2525 0%, #D32828 100%);
    border: 1px solid #c62c6a;
    color: white;
}

.post-modal .new-post-button[type="submit"]:hover {
    background: linear-gradient(180deg, #E62D77 0%, #B9235E 100%);
}

.post-modal .new-post-button[type="submit"]:active {
    background: linear-gradient(180deg, #D32828 0%, #be2525 100%);
}

.new-post-module .new-post-button[type="submit"] {
    background: linear-gradient(180deg, #be2525 0%, #D32828 100%);
    border: 1px solid #c62c6a;
    color: white;
}

.new-post-module .new-post-button[type="submit"]:hover {
    background: linear-gradient(180deg, #E62D77 0%, #B9235E 100%);
}

.new-post-module .new-post-button[type="submit"]:active {
    background: linear-gradient(180deg, #D32828 0%, #be2525 100%);
}

.post-modal .new-post-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.post-modal .modal-error-message {
    color: red;
    font-size: 12px;
    margin: 0 0 10px 0;
}

/* Animation for modal */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.post-modal-content {
    animation: modalFadeIn 0.2s ease-out;
}

.modal-char-count {
    color: #666;
    font-size: 13px;
    margin-right: 10px;
}

/* Delete Account Danger Zone Styles */
.danger-header {
    color: #e74c3c;
}

.danger-label {
    color: #e74c3c !important;
    font-weight: bold;
}

.danger-warning {
    color: #e74c3c;
}

.delete-account-button {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border: 1px solid #b91c1c;
    color: white;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 10px;
}

.delete-account-button:hover {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
}

/* Delete Account Modal Styles */
.delete-warning-section {
    margin-bottom: 20px;
}

.delete-warning-title {
    color: #e74c3c;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 0;
    font-size: 16px;
}

.delete-warning-text {
    margin-bottom: 15px;
    color: #333;
}

.delete-data-list {
    margin-bottom: 20px;
    padding-left: 20px;
    color: #333;
}

.delete-data-list li {
    margin-bottom: 5px;
}

.delete-confirmation-text {
    margin-bottom: 0;
    color: #333;
    font-weight: 500;
}

.delete-confirm-button {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border: 1px solid #b91c1c;
    color: white;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.delete-confirm-button:hover {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
}

/* Delete Account Field - Custom styling without bottom padding */
.delete-account-field {
    margin-bottom: 0;
}

.delete-account-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

/* Talkoo Promotional Banner Styles */
.talkoo-banner {
    background-color: #020617;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.talkoo-banner-content {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 80px;
}

.talkoo-banner-image {
    flex-shrink: 0;
    padding-left: 10px;
}

.talkoo-banner-image img {
    height: 100px;
    opacity: 1;
    display: block;
}

.talkoo-banner-text {
    flex-grow: 1;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    padding: 15px;
    font-family: 'Inter', sans-serif;
}

.talkoo-banner-button {
    flex-shrink: 0;
    padding: 20px 15px 20px 0;
}

.talkoo-button {
    background-color: #020617;
    border: 1px solid #374151;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 500;
    padding: 8px 16px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
}

.talkoo-button:hover {
    background-color: #1f2937;
    border-color: #6b7280;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Admin Invite Code Modal Styles */
.admin-invite-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.admin-invite-modal .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 0;
    border: 1px solid #888;
    width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: modalFadeIn 0.2s ease-out;
}

.admin-invite-modal .edit-profile-field {
    margin-bottom: 15px;
}

.admin-invite-modal .edit-profile-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.admin-invite-modal .edit-profile-field span {
    color: #666;
    font-size: 14px;
}

.admin-invite-modal .edit-profile-field input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
    background-color: #f9f9f9;
}

.admin-invite-modal .edit-profile-field input:focus {
    outline: none;
    border-color: #D32828;
    box-shadow: 0 0 0 2px rgba(211, 40, 108, 0.1);
}

/* Button loading state */
.save-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* View posts anyway button - styled like edit profile but for inline use */
.view-posts-button {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    border-radius: 4px;
    color: #333;
    font-weight: bold;
    padding: 8px 16px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    margin-top: 10px;
}

.view-posts-button:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
    color: #333;
    text-decoration: none;
}

/* Admin actions collapsible styles */
.admin-actions-header {
    user-select: none;
    transition: background-color 0.2s ease;
}

.admin-actions-header:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#admin-actions-list {
    transition: all 0.3s ease;
    overflow: hidden;
}

#admin-toggle-icon {
    opacity: 0.6;
}

#admin-toggle-icon:hover {
    opacity: 0.8;
}

/* Image Lightbox Styles */
.image-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    animation: fadeIn 0.2s ease;
}

.image-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    cursor: default;
    animation: zoomIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* ============================================
   EMBER CUSTOM STYLES
   ============================================ */

/* Compose Box */
.compose-box {
    padding: 10px;
}

.compose-header {
    display: flex;
    gap: 10px;
}

.compose-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
}

.compose-input-wrapper {
    flex: 1;
}

.compose-input {
    width: 100%;
    min-height: 60px;
    padding: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
}

.compose-input:focus {
    outline: none;
    border-color: #D32828;
}

.compose-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e6e6e6;
}

.compose-actions {
    display: flex;
    gap: 5px;
}

.compose-action {
    background: none;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
    color: #D32828;
    opacity: 0.7;
}

.compose-action:hover {
    opacity: 1;
}

.compose-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.char-counter {
    color: #999;
    font-size: 13px;
}

/* Landing Page */
.landing-hero {
    padding: 40px 30px;
    text-align: center;
}

.landing-content h1 {
    font-size: 28px;
    margin: 0 0 10px;
    color: #333;
}

.landing-content h1 .fa {
    color: #D32828;
}

.landing-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0 0 30px;
}

.landing-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #555;
}

.feature-icon {
    font-size: 24px;
    color: #D32828;
}

.landing-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, #be2525 0%, #D32828 100%);
    border: 1px solid #992135;
}

.btn-primary:hover {
    background: linear-gradient(180deg, #E62D77 0%, #B9235E 100%);
}

.btn-secondary {
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    color: #333;
}

.btn-secondary:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

.btn-large {
    padding: 12px 30px;
    font-size: 16px;
}

.btn-block {
    display: block;
    width: 100%;
}

/* Sidebar Profile */
.sidebar-profile {
    display: flex;
    align-items: center;
    padding: 15px;
    gap: 10px;
}

.sidebar-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
}

.sidebar-profile-info {
    display: flex;
    flex-direction: column;
}

.sidebar-username {
    color: #999;
    font-size: 13px;
}

/* Module Header */
.module-header {
    padding: 10px 15px;
    border-bottom: 1px solid #e6e6e6;
}

.module-header h3 {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.module-header h3 .fa {
    margin-right: 6px;
    color: #999;
}

/* Empty States */
.empty-state {
    padding: 30px;
    text-align: center;
    color: #999;
}

.empty-state.small {
    padding: 15px;
}

.empty-state p {
    margin: 0;
}

.empty-state .fa {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* Flash Messages */
.flash-stack {
    position: relative;
    width: 865px;
    max-width: calc(100% - 20px);
    margin: 58px auto 12px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flash {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px 12px;
    border-radius: 4px;
    border: 1px solid #cfcfcf;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    animation: flashEnter 180ms ease-out;
    background: linear-gradient(180deg, #fcfcfc 0%, #f1f1f1 100%);
    color: #333;
}

.flash.is-leaving {
    animation: flashExit 180ms ease-in forwards;
}

.flash-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    font-size: 12px;
    border: 1px solid transparent;
    margin-top: 1px;
}

.flash-content {
    min-width: 0;
    flex: 1 1 auto;
}

.flash-title {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flash-message {
    font-size: 13px;
    line-height: 1.3;
    color: #444;
}

.flash-close {
    appearance: none;
    background: transparent;
    border: none;
    color: #888;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.flash-close:hover {
    color: #333;
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.5);
}

.flash-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left center;
    animation: flashProgress 4.8s linear forwards;
}

.flash-success .flash-icon {
    background: #e8f4e8;
    border-color: #bfd7bf;
    color: #2f6b2f;
}

.flash-success {
    background: linear-gradient(180deg, #f7fff7 0%, #ebf7eb 100%);
    border-color: #bfd7bf;
}

.flash-success .flash-progress {
    background: #67a867;
}

.flash-error .flash-icon {
    background: #fbecee;
    border-color: #efc1c8;
    color: #9f3547;
}

.flash-error {
    background: linear-gradient(180deg, #fff9fa 0%, #fcecef 100%);
    border-color: #efc1c8;
}

.flash-error .flash-progress {
    background: #d57a8b;
}

.flash-warning .flash-icon {
    background: #fff6e7;
    border-color: #f0d4a0;
    color: #9a6a1e;
}

.flash-warning {
    background: linear-gradient(180deg, #fffdf6 0%, #fff4de 100%);
    border-color: #f0d4a0;
}

.flash-warning .flash-progress {
    background: #d8a24f;
}

.flash-info .flash-icon,
.flash-default .flash-icon {
    background: #eef4fa;
    border-color: #c8d7e7;
    color: #3e5f80;
}

.flash-info,
.flash-default {
    background: linear-gradient(180deg, #f9fbfd 0%, #eef3f8 100%);
    border-color: #c8d7e7;
}

.flash-info .flash-progress,
.flash-default .flash-progress {
    background: #7ba0c8;
}

@keyframes flashEnter {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flashExit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@keyframes flashProgress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.flash + .container {
    padding-top: 0;
}

/* Auth Forms */
.auth-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
}

.auth-header h1 {
    margin: 0 0 10px;
    font-size: 24px;
    color: #333;
}

.auth-header p {
    margin: 0;
    color: #666;
}

.auth-header a {
    color: #D32828;
    text-decoration: none;
}

.auth-header a:hover {
    text-decoration: underline;
}

.auth-form {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-control:focus {
    border-color: #D32828;
    outline: none;
    box-shadow: 0 0 0 2px rgba(211, 40, 40, 0.1);
}

.form-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #999;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check label {
    display: inline;
    margin: 0;
    font-weight: normal;
}

.form-check-input {
    margin: 0;
}

.form-errors {
    background-color: #fee;
    border: 1px solid #fcc;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
}

.form-errors ul {
    margin: 0;
    padding: 0 0 0 20px;
    color: #c00;
}

/* ============================================
   MODULE CONTENT
   ============================================ */
.module-content {
    padding: 15px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.module-content p {
    margin: 0 0 10px;
}

.module-content p:last-child {
    margin-bottom: 0;
}

.settings-sessions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.session-item {
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 11px 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.session-item-current {
    border-color: #b9d8b9;
    background: linear-gradient(180deg, #f8fff8 0%, #eef9ee 100%);
}

.session-item-main {
    min-width: 0;
    flex: 1 1 auto;
}

.session-device {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.session-device i {
    width: 14px;
    text-align: center;
    color: #555;
}

.session-device-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

.session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    color: #666;
}

.session-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.session-meta i {
    width: 12px;
    text-align: center;
    color: #777;
}

.session-current-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 10px;
    background: #dff0d8;
    color: #2f6b2f;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.session-item-actions {
    display: flex;
    align-items: flex-start;
}

.session-action-btn {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.session-action-danger {
    color: #fff;
    background: linear-gradient(180deg, #d55b5b 0%, #b33f3f 100%);
    border: 1px solid #9f3636;
}

.session-action-danger:hover {
    background: linear-gradient(180deg, #c94d4d 0%, #a63737 100%);
}

/* Why Items */
.why-item {
    margin-bottom: 12px;
}

.why-item:last-child {
    margin-bottom: 0;
}

.why-item strong {
    display: block;
    color: #333;
    font-size: 13px;
    margin-bottom: 2px;
}

.why-item p {
    margin: 0;
    font-size: 12px;
    color: #999;
}

/* ============================================
   AUTH FORMS (Flirb style)
   ============================================ */
.auth-form {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 13px;
}

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.form-label-row label {
    margin-bottom: 0;
}

.form-link {
    color: #D32828;
    font-size: 12px;
    text-decoration: none;
}

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

.form-control {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-control:focus {
    border-color: #D32828;
    outline: none;
    box-shadow: 0 0 0 2px rgba(211, 40, 40, 0.1);
}

.form-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #999;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check label {
    display: inline;
    margin: 0;
    font-weight: normal;
}

.auth-footer {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #e6e6e6;
    margin-top: 15px;
    font-size: 13px;
    color: #666;
}

.auth-footer a {
    color: #D32828;
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    background: linear-gradient(180deg, #FCF8FC 0%, #EBEAEB 100%);
    border: 1px solid #CDCDCD;
    color: #333;
}

.btn:hover {
    background: linear-gradient(180deg, #EBEAEB 0%, #DEDEDE 100%);
}

.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, #be2525 0%, #D32828 100%);
    border: 1px solid #992135;
}

.btn-primary:hover {
    background: linear-gradient(180deg, #E62D77 0%, #B9235E 100%);
}

.btn-block {
    display: block;
    width: 100%;
}

/* ============================================
   SIDEBAR FOOTER (Flirb style)
   ============================================ */
.sidebar-footer {
    padding: 12px 15px;
}

.sidebar-footer-links {
    font-size: 11px;
    color: #999;
    line-height: 1.8;
}

.sidebar-footer-links a {
    color: #666;
    text-decoration: none;
}

.sidebar-footer-links a:hover {
    color: #D32828;
    text-decoration: underline;
}

/* ============================================
   Responsive Layout
   ============================================ */
@media (max-width: 1200px) {
    .nav-container {
        width: 100%;
        max-width: calc(100% - 24px);
    }

    .container {
        width: auto;
        max-width: 100%;
    }

    .main-content {
        width: calc(100% - 320px);
    }
}

@media (max-width: 920px) {
    .container {
        flex-direction: column;
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        background-color: transparent;
    }

    .main-content {
        width: 100%;
        margin-right: 0;
        margin-top: 10px;
    }

    .sidebar {
        width: 100%;
        margin-top: 0;
        position: static;
        top: auto;
        height: auto;
        overflow: visible;
    }

    .flash {
        max-width: calc(100% - 20px);
    }
}

@media (max-width: 768px) {
    .top-nav {
        position: static;
        height: auto;
    }

    .nav-container {
        height: auto;
        width: auto;
        max-width: none;
        flex-wrap: wrap;
        align-items: center;
        padding: 6px 8px;
        gap: 4px;
    }

    .nav-logo {
        height: 34px;
        padding: 0 10px;
        border-radius: 4px;
    }

    .nav-container > .nav-item {
        height: 34px;
        padding: 0 10px;
        border-radius: 4px;
        margin-top: 0;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .nav-item:hover,
    .nav-item.selected {
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.35);
    }

    .nav-right-items {
        margin-left: auto;
        gap: 6px;
        min-height: 34px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .nav-search-item input {
        width: 96px;
        height: 16px;
        padding: 5px 10px;
    }

    .nav-search-item input:focus {
        width: 124px;
    }

    .search-dropdown {
        left: auto;
        right: 0;
        width: min(90vw, 320px);
    }

    .nav-post-button {
        height: auto;
        padding: 6px 10px;
        font-size: 12px;
    }

    .container {
        padding-top: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .flash-stack {
        margin: 10px auto 8px;
        width: calc(100% - 16px);
        gap: 8px;
    }

    .flash {
        border-radius: 8px;
        padding: 11px 12px 12px;
    }

    .module {
        margin-bottom: 8px;
    }

    .sidebar-module-header {
        font-size: 16px;
        padding: 9px 10px;
    }

    .status {
        padding: 10px;
    }

    .status-avatar {
        width: 40px;
        height: 40px;
        margin-right: 8px;
    }

    .status-header {
        gap: 6px;
    }

    .status-name {
        font-size: 14px;
    }

    .status-username {
        font-size: 13px;
    }

    .status-time {
        margin-left: 0;
        width: 100%;
        font-size: 12px;
    }

    .status-text {
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 8px;
    }

    .status-actions {
        gap: 8px 12px;
    }

    .status-action {
        font-size: 12px;
        column-gap: 6px;
    }

    .status-action .action-label,
    .status-action .count {
        font-size: 12px;
    }

    .profile-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }

    .profile-picture {
        width: 96px;
        height: 96px;
    }

    .profile-info {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }

    .profile-info h1 {
        font-size: 20px;
        flex-wrap: wrap;
    }

    .follow-button {
        position: static;
        margin-top: 10px;
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .profile-stats {
        flex-wrap: wrap;
    }

    .stat-item {
        flex: 0 0 50%;
        box-sizing: border-box;
        border-bottom: 1px solid #e6e6e6;
    }

    .stat-item:nth-child(2n) {
        border-right: none;
    }

    .single-post-text {
        font-size: 18px;
    }

    .single-post-date {
        font-size: 12px;
        gap: 6px;
        flex-wrap: wrap;
    }

    .single-post-stats {
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .inline-stat {
        margin-right: 0;
        font-size: 13px;
    }

    .single-post-media .media-image,
    .single-post-media .media-video,
    .single-post-media .media-image img,
    .single-post-media .media-video img {
        min-height: 150px;
    }

    .sidebar-list li {
        padding: 9px;
    }

    .suggestion-avatar {
        width: 42px;
        height: 42px;
    }

    .suggestion-follow {
        font-size: 11px;
        padding: 4px 7px;
    }

    .message-item {
        padding: 10px;
    }

    .message-preview {
        max-width: 190px;
    }

    .notification-text {
        flex-wrap: wrap;
    }

    .notification-date-pill {
        margin-left: 0;
        margin-top: 4px;
    }

    .notification-post-link {
        margin-left: 0;
    }

    .settings-sessions-header {
        flex-direction: column;
        align-items: stretch;
    }

    .session-item {
        flex-wrap: wrap;
    }

    .session-item-actions {
        align-items: stretch;
        margin-left: 0;
    }

    .conversation-container {
        height: calc(100vh - 180px);
        min-height: 300px;
    }

    .new-message-form {
        padding: 10px;
    }

    .new-message-input {
        height: 36px;
        padding: 8px;
    }

    .send-message-button {
        padding: 6px 10px;
    }

    .modal-content,
    .post-modal-content {
        width: calc(100% - 14px);
        max-width: calc(100% - 14px);
        margin: 12px auto;
    }
}

@media (max-width: 520px) {
    .nav-container {
        gap: 3px;
    }

    .nav-container > .nav-item {
        font-size: 12px;
        padding: 0 8px;
    }

    .nav-right-items {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .nav-search-item {
        flex: 1 1 100%;
    }

    .nav-search-container {
        width: 100%;
    }

    .nav-search-item input,
    .nav-search-item input:focus {
        width: 100%;
    }

    .nav-user-link {
        display: none;
    }

    .container {
        padding-left: 6px;
        padding-right: 6px;
    }

    .profile-picture {
        width: 84px;
        height: 84px;
    }

    .stat-item {
        flex: 1 0 100%;
        border-right: none;
    }

    .message-preview {
        max-width: 140px;
    }

    .auth-header h1 {
        font-size: 21px;
    }

    .auth-form,
    .module-content {
        padding: 12px;
    }

    .notification-text {
        font-size: 13px;
    }

    .session-meta {
        flex-direction: column;
        gap: 6px;
    }

    .flash-stack {
        margin: 8px auto 8px;
        width: calc(100% - 12px);
    }

    .flash-title {
        font-size: 12px;
    }

    .flash-message {
        font-size: 12px;
    }
}