/**
 * Naybr Pages Extended CSS
 * Single listing, chat room, profile views
 */

/* ========================================
   Single Listing View
   ======================================== */
.naybr-single-listing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--naybr-space-md);
}

.listing-breadcrumb {
    margin-bottom: var(--naybr-space-lg);
}

.listing-breadcrumb a {
    font-size: 0.9375rem;
    color: var(--naybr-gray-500);
}

.listing-breadcrumb a:hover {
    color: var(--naybr-primary);
}

.listing-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--naybr-space-xl);
}

.listing-main {
    background: var(--naybr-white);
    border-radius: var(--naybr-radius-lg);
    padding: var(--naybr-space-xl);
    box-shadow: var(--naybr-shadow-sm);
}

.listing-header-full {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    margin-bottom: var(--naybr-space-md);
}

.pinned-badge {
    font-size: 0.8125rem;
    color: var(--naybr-accent-dark);
}

.status-badge {
    padding: var(--naybr-space-xs) var(--naybr-space-sm);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--naybr-radius-sm);
    text-transform: uppercase;
}

.listing-title-full {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--naybr-gray-900);
    margin-bottom: var(--naybr-space-lg);
}

.listing-photos {
    margin-bottom: var(--naybr-space-xl);
}

.photo-main {
    border-radius: var(--naybr-radius-lg);
    overflow: hidden;
    margin-bottom: var(--naybr-space-sm);
}

.photo-main img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    background: var(--naybr-gray-100);
}

.photo-thumbs {
    display: flex;
    gap: var(--naybr-space-sm);
}

.photo-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--naybr-radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
}

.photo-thumb.active {
    border-color: var(--naybr-primary);
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-price-full {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--naybr-success);
    margin-bottom: var(--naybr-space-lg);
}

.listing-price-full .price-type {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--naybr-gray-500);
    margin-left: var(--naybr-space-sm);
}

.listing-event-full {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    font-size: 1rem;
    color: var(--naybr-gray-600);
    margin-bottom: var(--naybr-space-lg);
}

.event-location {
    color: var(--naybr-gray-500);
}

.listing-content-full {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--naybr-gray-700);
    margin-bottom: var(--naybr-space-xl);
}

.listing-actions {
    display: flex;
    gap: var(--naybr-space-md);
    padding-top: var(--naybr-space-lg);
    border-top: 1px solid var(--naybr-gray-200);
    margin-bottom: var(--naybr-space-xl);
}

.listing-replies h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--naybr-space-lg);
}

.reply-form {
    margin-bottom: var(--naybr-space-xl);
}

.reply-form textarea {
    width: 100%;
    padding: var(--naybr-space-md);
    border: 1px solid var(--naybr-gray-300);
    border-radius: var(--naybr-radius-md);
    font-size: 0.9375rem;
    resize: vertical;
    min-height: 100px;
}

.reply-form textarea:focus {
    outline: none;
    border-color: var(--naybr-primary);
}

.reply-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--naybr-space-sm);
}

.private-toggle {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    font-size: 0.875rem;
    color: var(--naybr-gray-600);
    cursor: pointer;
}

.no-replies {
    color: var(--naybr-gray-500);
    font-style: italic;
}

.reply-item {
    padding: var(--naybr-space-md);
    background: var(--naybr-gray-50);
    border-radius: var(--naybr-radius-md);
    margin-bottom: var(--naybr-space-md);
}

.reply-item.private {
    background: #FEF3C7;
    border-left: 3px solid var(--naybr-warning);
}

.reply-header {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    margin-bottom: var(--naybr-space-sm);
}

.reply-author {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    color: inherit;
    text-decoration: none;
}

.reply-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--naybr-radius-full);
}

.reply-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: var(--naybr-radius-full);
    background: var(--naybr-primary-light);
    color: var(--naybr-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.reply-name {
    font-weight: 500;
    color: var(--naybr-gray-900);
}

.private-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--naybr-warning);
    color: white;
    border-radius: var(--naybr-radius-sm);
}

.reply-time {
    font-size: 0.8125rem;
    color: var(--naybr-gray-400);
    margin-left: auto;
}

.reply-content {
    font-size: 0.9375rem;
    color: var(--naybr-gray-700);
    line-height: 1.5;
}

/* Listing Sidebar */
.listing-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-lg);
}

.author-card {
    background: var(--naybr-white);
    border-radius: var(--naybr-radius-lg);
    padding: var(--naybr-space-lg);
    box-shadow: var(--naybr-shadow-sm);
    text-align: center;
}

.author-link {
    display: block;
    color: inherit;
    text-decoration: none;
    margin-bottom: var(--naybr-space-md);
}

.author-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: var(--naybr-radius-full);
    margin: 0 auto var(--naybr-space-sm);
}

.author-avatar-placeholder-lg {
    width: 64px;
    height: 64px;
    border-radius: var(--naybr-radius-full);
    background: var(--naybr-primary-light);
    color: var(--naybr-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 auto var(--naybr-space-sm);
}

.author-name-lg {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--naybr-gray-900);
}

.author-trust {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--naybr-space-xs);
}

.author-neighborhood {
    font-size: 0.8125rem;
    color: var(--naybr-gray-500);
    margin-bottom: var(--naybr-space-md);
}

.author-actions {
    margin-top: var(--naybr-space-md);
}

.listing-info-card {
    background: var(--naybr-white);
    border-radius: var(--naybr-radius-lg);
    padding: var(--naybr-space-lg);
    box-shadow: var(--naybr-shadow-sm);
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--naybr-space-sm) 0;
    border-bottom: 1px solid var(--naybr-gray-100);
}

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

.info-label {
    color: var(--naybr-gray-500);
}

.info-value {
    font-weight: 500;
    color: var(--naybr-gray-900);
}

/* ========================================
   Chat Room View
   ======================================== */
.naybr-chat-room-page {
    height: calc(100vh - var(--naybr-header-height));
    height: calc(100dvh - var(--naybr-header-height));
    background: var(--naybr-gray-100);
    padding: var(--naybr-space-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hide footer when in chat room */
body:has(.naybr-chat-room-page) .naybr-footer {
    display: none;
}

/* Prevent body scroll when in chat room */
body:has(.naybr-chat-room-page) {
    overflow: hidden;
}

body:has(.naybr-chat-room-page) .naybr-main {
    overflow: hidden;
    height: calc(100vh - var(--naybr-header-height));
    height: calc(100dvh - var(--naybr-header-height));
    padding: 0;
}

.chat-room-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    background: var(--naybr-white);
    border-radius: var(--naybr-radius-lg);
    box-shadow: var(--naybr-shadow-sm);
    overflow: hidden;
    flex: 1;
    min-height: 0; /* Important for flex child with overflow */
}

.chat-main {
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for nested flex with overflow */
}

.chat-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--naybr-space-md) var(--naybr-space-lg);
    border-bottom: 1px solid var(--naybr-gray-200);
}

.room-info {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-md);
}

.back-link {
    color: var(--naybr-gray-500);
}

.back-link:hover {
    color: var(--naybr-gray-700);
}

.room-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--naybr-gray-900);
    display: flex;
    align-items: center;
    gap: var(--naybr-space-xs);
}

.official-icon {
    color: var(--naybr-accent);
}

.private-icon {
    color: var(--naybr-gray-400);
}

.room-details {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-xs);
}

.participant-count {
    font-size: 0.8125rem;
    color: var(--naybr-gray-500);
}

.room-actions {
    display: flex;
    gap: var(--naybr-space-sm);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--naybr-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-sm);
}

.date-separator {
    text-align: center;
    margin: var(--naybr-space-md) 0;
}

.date-separator span {
    padding: var(--naybr-space-xs) var(--naybr-space-md);
    background: var(--naybr-gray-100);
    color: var(--naybr-gray-500);
    font-size: 0.75rem;
    border-radius: var(--naybr-radius-full);
}

.system-message {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--naybr-gray-500);
    font-style: italic;
    padding: var(--naybr-space-sm) 0;
}

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

.chat-message.mine {
    margin-left: auto;
}

.chat-message.theirs {
    margin-right: auto;
}

.message-header {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    margin-bottom: var(--naybr-space-xs);
}

.message-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--naybr-radius-full);
}

.message-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: var(--naybr-radius-full);
    background: var(--naybr-primary-light);
    color: var(--naybr-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.message-author {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--naybr-gray-700);
}

.chat-message .message-bubble {
    padding: var(--naybr-space-sm) var(--naybr-space-md);
    border-radius: var(--naybr-radius-lg);
}

.chat-message.mine .message-bubble {
    background: var(--naybr-primary);
    color: var(--naybr-white);
    border-bottom-right-radius: var(--naybr-radius-sm);
}

.chat-message.theirs .message-bubble {
    background: var(--naybr-gray-100);
    color: var(--naybr-gray-800);
    border-bottom-left-radius: var(--naybr-radius-sm);
}

.chat-message .message-time {
    display: block;
    font-size: 0.7rem;
    margin-top: var(--naybr-space-xs);
    opacity: 0.7;
}

.no-messages-chat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--naybr-gray-400);
}

.chat-compose {
    display: flex;
    gap: var(--naybr-space-sm);
    padding: var(--naybr-space-md) var(--naybr-space-lg);
    border-top: 1px solid var(--naybr-gray-200);
}

.chat-compose textarea {
    flex: 1;
    padding: var(--naybr-space-sm) var(--naybr-space-md);
    border: 1px solid var(--naybr-gray-300);
    border-radius: var(--naybr-radius-lg);
    resize: none;
    font-size: 0.9375rem;
    max-height: 120px;
}

.chat-compose textarea:focus {
    outline: none;
    border-color: var(--naybr-primary);
}

.chat-compose .send-btn {
    padding: var(--naybr-space-sm) var(--naybr-space-md);
    background: var(--naybr-primary);
    color: var(--naybr-white);
    border: none;
    border-radius: var(--naybr-radius-lg);
    cursor: pointer;
    transition: background var(--naybr-transition);
}

.chat-compose .send-btn:hover {
    background: var(--naybr-primary-hover);
}

.chat-compose-disabled {
    padding: var(--naybr-space-md) var(--naybr-space-lg);
    text-align: center;
    color: var(--naybr-gray-500);
    background: var(--naybr-gray-50);
    border-top: 1px solid var(--naybr-gray-200);
}

/* Chat Participants Sidebar */
.chat-participants {
    border-left: 1px solid var(--naybr-gray-200);
    display: flex;
    flex-direction: column;
}

.participants-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--naybr-space-md) var(--naybr-space-lg);
    border-bottom: 1px solid var(--naybr-gray-200);
}

.participants-header h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.close-sidebar {
    display: none;
    background: none;
    border: none;
    color: var(--naybr-gray-400);
    cursor: pointer;
}

.participants-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--naybr-space-sm);
}

.participant-item {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    padding: var(--naybr-space-sm);
    border-radius: var(--naybr-radius-md);
    color: inherit;
    text-decoration: none;
}

.participant-item:hover {
    background: var(--naybr-gray-50);
}

.participant-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--naybr-radius-full);
}

.participant-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: var(--naybr-radius-full);
    background: var(--naybr-primary-light);
    color: var(--naybr-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.participant-name {
    flex: 1;
    font-size: 0.875rem;
    color: var(--naybr-gray-700);
}

.participant-role {
    font-size: 0.875rem;
}

.invite-section {
    padding: var(--naybr-space-md);
    border-top: 1px solid var(--naybr-gray-200);
}

/* ========================================
   Profile View & Editor
   ======================================== */
.naybr-profile-page,
.naybr-profile-editor {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--naybr-space-md);
}

.profile-layout,
.editor-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--naybr-space-xl);
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--naybr-space-xl);
}

.editor-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-lg);
}

.profile-header-card {
    display: flex;
    gap: var(--naybr-space-xl);
    padding: var(--naybr-space-xl);
    background: var(--naybr-white);
    border-radius: var(--naybr-radius-lg);
    box-shadow: var(--naybr-shadow-sm);
}

.profile-avatar-section {
    position: relative;
}

.profile-avatar-lg {
    width: 120px;
    height: 120px;
    border-radius: var(--naybr-radius-full);
    object-fit: cover;
}

.profile-avatar-placeholder-lg {
    width: 120px;
    height: 120px;
    border-radius: var(--naybr-radius-full);
    background: var(--naybr-primary-light);
    color: var(--naybr-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 600;
}

.verified-badge-lg {
    position: absolute;
    bottom: 4px;
    right: 4px;
}

.profile-info-section {
    flex: 1;
}

.profile-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--naybr-gray-900);
    margin-bottom: var(--naybr-space-xs);
}

.profile-neighborhood {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-xs);
    color: var(--naybr-gray-500);
    margin-bottom: var(--naybr-space-sm);
}

.profile-trust {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: var(--naybr-space-xs);
}

.trust-score-display {
    font-weight: 400;
    color: var(--naybr-gray-500);
}

.profile-member-since {
    font-size: 0.8125rem;
    color: var(--naybr-gray-400);
}

.profile-actions-section {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-md);
    align-items: flex-end;
}

.connection-buttons {
    display: flex;
    gap: var(--naybr-space-sm);
}

.conn-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--naybr-space-xs);
    padding: var(--naybr-space-sm) var(--naybr-space-md);
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--naybr-gray-100);
    color: var(--naybr-gray-600);
    border: none;
    border-radius: var(--naybr-radius-md);
    cursor: pointer;
    transition: all var(--naybr-transition);
}

.conn-btn:hover {
    background: var(--naybr-gray-200);
}

.conn-btn.active {
    background: var(--naybr-primary-light);
    color: var(--naybr-primary-dark);
}

.conn-btn.trust-btn.active {
    background: rgba(34, 197, 94, 0.1);
    color: var(--naybr-success);
}

.profile-card {
    background: var(--naybr-white);
    border-radius: var(--naybr-radius-lg);
    padding: var(--naybr-space-lg);
    box-shadow: var(--naybr-shadow-sm);
}

.profile-card h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--naybr-space-md);
}

.profile-bio {
    color: var(--naybr-gray-700);
    line-height: 1.6;
}

.profile-listings {
    display: flex;
    flex-direction: column;
}

/* Profile Sidebar */
.profile-sidebar,
.editor-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-lg);
}

.sidebar-card {
    background: var(--naybr-white);
    border: 3px solid var(--naybr-gray-200);
    border-radius: var(--naybr-radius-lg);
    padding: var(--naybr-space-md);
}

.sidebar-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: var(--naybr-space-md);
}

/* Trust Score Display */
.trust-score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--naybr-space-md);
    background: var(--naybr-gray-50);
    border-radius: var(--naybr-radius-md);
}

.trust-score-display svg {
    margin-bottom: var(--naybr-space-xs);
}

.trust-score-display .score-percentile {
    font-size: 1.25rem;
    font-weight: 700;
}

.trust-score-display .score-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 2px;
}

/* Legacy - can remove after full migration */
.trust-score-large {
    text-align: center;
    padding: var(--naybr-space-md);
    background: var(--naybr-gray-50);
    border-radius: var(--naybr-radius-md);
    margin-bottom: var(--naybr-space-md);
}

.trust-score-large .score-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
}

.trust-score-large .score-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.trust-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--naybr-space-md);
    text-align: center;
}

.trust-stat .stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--naybr-gray-900);
}

.trust-stat .stat-label {
    font-size: 0.75rem;
    color: var(--naybr-gray-500);
}

.connection-status {
    margin-bottom: var(--naybr-space-md);
}

.conn-indicator {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    padding: var(--naybr-space-sm);
    border-radius: var(--naybr-radius-md);
    font-size: 0.875rem;
    margin-bottom: var(--naybr-space-xs);
}

.conn-indicator.positive {
    background: rgba(34, 197, 94, 0.1);
    color: var(--naybr-success);
}

.conn-indicator.neutral {
    background: var(--naybr-gray-100);
    color: var(--naybr-gray-500);
}

.your-connection {
    padding-top: var(--naybr-space-md);
    border-top: 1px solid var(--naybr-gray-100);
}

.conn-label {
    font-size: 0.75rem;
    color: var(--naybr-gray-500);
    margin-bottom: var(--naybr-space-xs);
}

.conn-value {
    font-size: 0.875rem;
    color: var(--naybr-gray-700);
}

.conn-value.neutral {
    color: var(--naybr-gray-400);
}

/* Profile Editor Form */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-lg);
}

.form-card {
    background: var(--naybr-white);
    border-radius: var(--naybr-radius-lg);
    padding: var(--naybr-space-lg);
    box-shadow: var(--naybr-shadow-sm);
}

.form-card h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--naybr-space-lg);
    padding-bottom: var(--naybr-space-md);
    border-bottom: 1px solid var(--naybr-gray-100);
}

.avatar-editor {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-xl);
}

.current-avatar img,
.avatar-placeholder-lg {
    width: 100px;
    height: 100px;
    border-radius: var(--naybr-radius-full);
}

.avatar-placeholder-lg {
    background: var(--naybr-primary-light);
    color: var(--naybr-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 600;
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-sm);
}

.form-group {
    margin-bottom: var(--naybr-space-lg);
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--naybr-gray-700);
    margin-bottom: var(--naybr-space-xs);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--naybr-space-sm) var(--naybr-space-md);
    border: 1px solid var(--naybr-gray-300);
    border-radius: var(--naybr-radius-md);
    font-size: 0.9375rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--naybr-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.form-hint {
    font-size: 0.8125rem;
    color: var(--naybr-gray-500);
    margin-top: var(--naybr-space-xs);
}

.form-hint-muted {
    color: var(--naybr-gray-400);
    font-style: italic;
}

.form-hint-warning {
    color: var(--naybr-warning);
    display: flex;
    align-items: center;
    gap: var(--naybr-space-xs);
}

/* Read-only field display */
.readonly-value {
    padding: var(--naybr-space-sm) var(--naybr-space-md);
    background: var(--naybr-gray-100);
    border: 1px solid var(--naybr-gray-200);
    border-radius: var(--naybr-radius-md);
    font-size: 0.9375rem;
    color: var(--naybr-gray-600);
}

/* Display name format options */
.display-name-options {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-sm);
    margin-top: var(--naybr-space-sm);
}

.display-name-option {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    padding: var(--naybr-space-sm) var(--naybr-space-md);
    background: var(--naybr-white);
    border: 1px solid var(--naybr-gray-200);
    border-radius: var(--naybr-radius-md);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.display-name-option:hover:not(.disabled) {
    border-color: var(--naybr-primary);
    background: var(--naybr-gray-50);
}

.display-name-option.current {
    border-color: var(--naybr-primary);
    background: var(--naybr-primary-light);
}

.display-name-option.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.display-name-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--naybr-primary);
}

.display-name-option .option-name {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--naybr-gray-800);
}

.display-name-option .option-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--naybr-radius-sm);
}

.display-name-option .current-badge {
    background: var(--naybr-primary);
    color: var(--naybr-white);
}

.display-name-option .taken-badge {
    background: var(--naybr-gray-200);
    color: var(--naybr-gray-500);
}

.checkbox-group,
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-sm);
}

/* Inline checkbox with external link */
.checkbox-group.checkbox-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.checkbox-group.checkbox-inline .checkbox-label {
    margin-right: 0;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    cursor: pointer;
}

.checkbox-text {
    font-size: 0.9375rem;
    color: var(--naybr-gray-700);
}

/* Guidelines link in checkbox group */
.checkbox-group .guidelines-link {
    color: var(--naybr-primary);
    text-decoration: underline;
    font-size: 0.9375rem;
    padding: 0.25rem 0;
    display: inline;
}

.checkbox-group .guidelines-link:hover {
    color: var(--naybr-primary-dark);
}

/* Display Name Picker */
.display-name-picker {
    margin-top: var(--naybr-space-md);
}

.display-name-picker > label {
    font-weight: 600;
    margin-bottom: var(--naybr-space-sm);
    display: block;
}

.display-name-options {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-xs);
}

.display-name-option {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    padding: var(--naybr-space-sm) var(--naybr-space-md);
    border: 2px solid var(--naybr-gray-200);
    border-radius: var(--naybr-radius-md);
    cursor: pointer;
    transition: all var(--naybr-transition);
}

.display-name-option:hover:not(.unavailable) {
    border-color: var(--naybr-primary);
    background: var(--naybr-primary-light);
}

.display-name-option:has(input:checked),
.display-name-option.selected {
    border-color: var(--naybr-primary);
    background: var(--naybr-primary-light);
}

.display-name-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--naybr-primary);
}

.display-name-option .option-name {
    flex: 1;
    font-weight: 500;
    color: var(--naybr-gray-900);
}

.display-name-option .option-status {
    font-size: 0.8125rem;
    color: var(--naybr-success);
    font-weight: 500;
}

.display-name-option.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--naybr-gray-100);
}

.display-name-option.unavailable .option-status {
    color: var(--naybr-gray-500);
}

.display-name-option.unavailable .option-name {
    text-decoration: line-through;
    color: var(--naybr-gray-500);
}

.loading-options {
    padding: var(--naybr-space-md);
    text-align: center;
    color: var(--naybr-gray-500);
    font-style: italic;
}

.all-taken-message {
    padding: var(--naybr-space-sm);
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--naybr-radius-sm);
    color: var(--naybr-error);
    font-size: 0.875rem;
    margin-top: var(--naybr-space-sm);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
}

.verification-status {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    padding: var(--naybr-space-md);
    border-radius: var(--naybr-radius-md);
    margin-bottom: var(--naybr-space-md);
}

.verification-status.verified {
    background: rgba(34, 197, 94, 0.1);
    color: var(--naybr-success);
}

.verification-status.unverified {
    background: #FEF3C7;
    color: var(--naybr-warning);
}

.sidebar-hint {
    font-size: 0.8125rem;
    color: var(--naybr-gray-500);
    margin-bottom: var(--naybr-space-md);
}

.account-links {
    display: flex;
    flex-direction: column;
}

.account-links a {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    padding: var(--naybr-space-sm) 0;
    color: var(--naybr-gray-600);
    border-bottom: 1px solid var(--naybr-gray-100);
}

.account-links a:last-child {
    border-bottom: none;
}

.account-links a:hover {
    color: var(--naybr-primary);
}

/* Alerts */
.alert {
    padding: var(--naybr-space-md) var(--naybr-space-lg);
    border-radius: var(--naybr-radius-md);
    margin-bottom: var(--naybr-space-lg);
}

.alert-success {
    background: #DCFCE7;
    color: #166534;
}

.alert-error {
    background: #FEE2E2;
    color: #991B1B;
}

/* ========================================
   Header/Footer Extended
   ======================================== */
.nav-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--naybr-error);
    color: var(--naybr-white);
    border-radius: var(--naybr-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--naybr-radius-full);
}

.user-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: var(--naybr-radius-full);
    background: var(--naybr-primary-light);
    color: var(--naybr-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: var(--naybr-white);
    border-radius: var(--naybr-radius-md);
    box-shadow: var(--naybr-shadow-lg);
    padding: var(--naybr-space-sm);
    z-index: 200;
}

.user-dropdown a {
    display: flex;
    align-items: center;
    gap: var(--naybr-space-sm);
    padding: var(--naybr-space-sm) var(--naybr-space-md);
    color: var(--naybr-gray-700);
    border-radius: var(--naybr-radius-sm);
}

.user-dropdown a:hover {
    background: var(--naybr-gray-100);
    color: var(--naybr-gray-900);
}

.user-dropdown hr {
    border: none;
    border-top: 1px solid var(--naybr-gray-200);
    margin: var(--naybr-space-sm) 0;
}

.naybr-user-menu {
    position: relative;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1024px) {
    .listing-layout,
    .profile-layout,
    .editor-layout {
        grid-template-columns: 1fr;
    }
    
    .listing-sidebar,
    .profile-sidebar,
    .editor-sidebar {
        order: -1;
    }
    
    .chat-room-layout {
        grid-template-columns: 1fr;
        border-radius: 0; /* Full width on mobile */
    }
    
    .naybr-chat-room-page {
        padding: 0; /* Edge to edge on mobile */
    }
    
    .chat-participants {
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100vh;
        height: 100dvh;
        background: var(--naybr-white);
        z-index: 200;
        transition: right 0.3s ease;
    }
    
    .chat-participants.open {
        right: 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    }
    
    .close-sidebar {
        display: block;
    }
}

@media (max-width: 768px) {
    .profile-header-card {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-actions-section {
        align-items: center;
    }
    
    .avatar-editor {
        flex-direction: column;
        text-align: center;
    }
}


/* ========================================
   Site Footer
   ======================================== */
.naybr-footer {
    background: var(--naybr-gray-900);
    color: var(--naybr-gray-400);
    padding: var(--naybr-space-xl) 0;
    margin-top: auto;
}

.naybr-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--naybr-space-lg);
}

.naybr-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--naybr-space-xs);
}

.naybr-footer-brand .naybr-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--naybr-white);
}

.naybr-footer-brand .naybr-logo-dot {
    color: var(--naybr-primary);
}

.naybr-footer-brand .naybr-tagline {
    font-size: 0.875rem;
    color: var(--naybr-gray-500);
}

.naybr-footer-nav .naybr-footer-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--naybr-space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.naybr-footer-nav .naybr-footer-list a {
    color: var(--naybr-gray-400);
    text-decoration: none;
    padding: var(--naybr-space-sm) var(--naybr-space-xs);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: color var(--naybr-transition);
}

.naybr-footer-nav .naybr-footer-list a:hover {
    color: var(--naybr-white);
}

.naybr-footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--naybr-space-xs);
    font-size: 0.875rem;
}

.naybr-footer-community {
    color: var(--naybr-gray-400);
}

.naybr-footer-stats {
    color: var(--naybr-primary);
    font-weight: 500;
}

@media (max-width: 768px) {
    .naybr-footer-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .naybr-footer-meta {
        align-items: center;
    }
    
    .naybr-footer-nav .naybr-footer-list {
        justify-content: center;
    }
}