/* ==============================================
   USER PROFILE PAGE STYLES
   ============================================== */

/* Loading State */
.user-profile-loading {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.user-profile-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 180, 255, 0.2);
    border-top-color: #00b4ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

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

.user-profile-loading-text {
    color: #64748b;
    font-size: 0.95rem;
}

/* Error State */
.user-profile-error {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.user-profile-error-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.user-profile-error-icon i {
    font-size: 2.5rem;
    color: #dc3545;
}

.user-profile-error-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.user-profile-error-text {
    color: #64748b;
    margin: 0 0 1.5rem 0;
}

.user-profile-error-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #00b4ff;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.user-profile-error-button:hover {
    background: var(--brand-secondary, #0174B1);
}

/* Page Container */
/* `clip`, not `hidden`: ancestor of .user-profile-tabs-container, which is `position: sticky`.
   `hidden` coerces the other axis to `auto` and makes this a non-scrolling scroll container, so
   the tab bar never pins. Same fix as .library-content / .social-content; paired declaration is
   the WebKit < 16 fallback (see home.css html/body).
   NOTE: this swap is what finally ACTIVATES that sticky, so it must ship together with the
   top/z-index correction on .user-profile-tabs-container below -- see the comment there. */
.user-profile-page {
    background: #f8fafc;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden; /* fallback: WebKit < 16 has no `clip` */
    overflow-x: clip;   /* modern: clips without creating a scroll container */
}

body.dark-mode .user-profile-page {
    background: #0f172a;
}

/* ==============================================
   HERO SECTION
   ============================================== */

.user-profile-hero {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.user-profile-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #00b4ff 0%, #0066cc 100%);
}

.user-profile-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}

.user-profile-hero-container {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    padding: calc(80px + 3rem) 1rem 2rem; /* Top padding = nav height + extra space */
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* Avatar Section */
.user-profile-avatar-section {
    flex-shrink: 0;
}

.user-profile-avatar-wrapper {
    position: relative;
}

.user-profile-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    object-fit: cover;
}

.user-profile-avatar-edit {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00b4ff;
    color: white;
    border: 3px solid white;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.user-profile-avatar-edit:hover {
    background: var(--brand-secondary, #0174B1);
}

/* Info Section */
.user-profile-info-section {
    flex: 1;
    color: white;
}

.user-profile-name-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.user-profile-name {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.user-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.user-profile-badge.premium {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.user-profile-meta {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.user-profile-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.user-profile-meta-item i {
    font-size: 1rem;
}

/* Stats */
.user-profile-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.user-profile-stat {
    text-align: center;
}

.user-profile-stat .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: white;
}

.user-profile-stat .stat-label {
    font-size: 0.8rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.user-profile-private-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    backdrop-filter: blur(8px);
    font-size: 0.9rem;
}

/* Actions */
.user-profile-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.user-profile-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-profile-action-btn.primary {
    background: white;
    color: #00b4ff;
}

.user-profile-action-btn.primary:hover {
    background: #f0f9ff;
}

.user-profile-action-btn.secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.user-profile-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

.user-profile-action-btn.following {
    background: #10b981;
    color: white;
}

.user-profile-action-btn.following:hover {
    background: #059669;
}

/* ==============================================
   TABS
   ============================================== */

/* top/z-index MUST match the sibling sticky bars (.library-controls-section, library.css, and
   .social-controls-section, social.css -- both a 70px base offset at z-index 40). These were
   `top: 0; z-index: 10`, harmless only for as long as the sticky never engaged: the wrapper
   above was a scroll container, so this bar never pinned at all.

   Repairing that wrapper activates this rule, and at the old values it pinned WRONG in two ways.
   The global nav (.unqbd-topnav-sticky, navigation.css) is `position: fixed; z-index: 1002`.
   Above 600px it draws a floating pill inset ~1rem from the top and capped at 1300px wide; at
   600px and below navigation.css takes it edge-to-edge with no margin or radius. At `top: 0`
   this full-bleed white bar parked underneath it at every scroll position, and at `z-index: 10`
   against the nav's 1002 the tab buttons sat under the fixed header, invisible and unclickable.
   z-index 40 puts it above page content but below the nav, which is the point.

   On 70px, honestly: it is the value BOTH sibling bars already ship, and matching them is the
   whole reason it is here -- it is not a computed clearance. It does NOT fully clear the nav
   above 600px. Measured from navigation.css, the nav's bottom edge is ~91px past 900px wide and
   ~79px between 601 and 900px; only at 600px and below does it come in under 70. shared.js
   measures the real thing at runtime (`getTopNavOffset` reads getBoundingClientRect().bottom),
   and its hardcoded FALLBACK for when the nav has never been measured is
   `innerWidth <= 768 ? 64 : 85` -- not the same numbers, but the same ballpark, and independent
   confirmation that 70 is not the true clearance. So at desktop width a sliver of this bar still
   passes behind the pill's side gutters. That gap is
   pre-existing and shared by all three bars; closing it means one shared nav-height token
   applied to all three, which is a deliberate design change and not this fix's job. Do not
   "correct" this number here alone -- it would only desynchronise the three.

   This rule is HALF the offset. The mobile half lives in the `@media (max-width: 768px)` block
   at the foot of this file, which drops it to 60px to match the same override both siblings
   already carry. Change one and you must change the other.

   The + var(--topnav-inset-top) term is separate from all of the above and is NOT a convention
   question. The fixed nav clears the status bar with `padding-top: var(--topnav-inset-top)`
   (navigation.css), so on a notched iOS device or an edge-to-edge Android WebView its bottom
   edge moves down by the whole inset; without this term the bar parks that far behind a nav at
   z-index 1002 while this one is at 40. It resolves to 0 on web and desktop, so it changes
   nothing there. Same idiom as navigation.css's own
   `top: calc(var(--topnav-inset-top) + 64px)` for the profile dropdown. All three sibling bars
   carry it. */
.user-profile-tabs-container {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: calc(var(--topnav-inset-top) + 70px);
    z-index: 40;
}

body.dark-mode .user-profile-tabs-container {
    background: #1e293b;
    border-bottom-color: #334155;
}

.user-profile-tabs {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.user-profile-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-profile-tab:hover {
    background: #f1f5f9;
    color: #334155;
}

.user-profile-tab.active {
    background: #00b4ff;
    color: white;
}

body.dark-mode .user-profile-tab {
    color: #94a3b8;
}

body.dark-mode .user-profile-tab:hover {
    background: #334155;
    color: #e2e8f0;
}

body.dark-mode .user-profile-tab.active {
    background: #00b4ff;
    color: white;
}

/* ==============================================
   CONTENT AREA
   ============================================== */

.user-profile-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* ==============================================
   READING ACTIVITY COMPONENT
   ============================================== */

.user-reading-activity {
    width: 100%;
}

.activity-loading,
.activity-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.activity-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 180, 255, 0.2);
    border-top-color: #00b4ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

.activity-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.activity-empty-icon i {
    font-size: 1.75rem;
    color: #64748b;
}

.activity-empty h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.activity-empty p {
    color: #64748b;
    margin: 0 0 1.5rem 0;
}

.activity-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #00b4ff;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.activity-empty-btn:hover {
    background: var(--brand-secondary, #0174B1);
}

body.dark-mode .activity-empty-icon {
    background: #334155;
}

body.dark-mode .activity-empty h3 {
    color: #f1f5f9;
}

body.dark-mode .activity-empty p {
    color: #94a3b8;
}

/* Activity Sections */
.activity-section {
    margin-bottom: 2.5rem;
}

.activity-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.activity-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.activity-section-title i {
    color: #00b4ff;
}

.activity-section-count {
    background: #e2e8f0;
    color: #64748b;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
}

body.dark-mode .activity-section-title {
    color: #f1f5f9;
}

body.dark-mode .activity-section-count {
    background: #334155;
    color: #94a3b8;
}

/* Books Grid */
.activity-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
}

.activity-book-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.activity-book-card:hover,
.activity-book-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    outline: 2px solid var(--brand-primary, #00B4FF);
    outline-offset: 2px;
}

body.dark-mode .activity-book-card {
    background: #1e293b;
}

.activity-book-cover {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 120px;
    border-radius: 0.5rem;
    overflow: hidden;
}

.activity-book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-progress-ring {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-progress-text {
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
}

.activity-completed-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
}

.activity-book-info {
    flex: 1;
    min-width: 0;
}

.activity-book-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-book-author {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0 0 0.75rem 0;
}

.activity-progress-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.activity-progress-fill {
    height: 100%;
    background: #00b4ff;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.activity-time-spent {
    font-size: 0.75rem;
    color: #94a3b8;
}

.activity-book-rating {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 0.5rem;
}

.activity-book-rating i {
    font-size: 0.75rem;
    color: #fbbf24;
}

.activity-completion-date {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

body.dark-mode .activity-book-title {
    color: #f1f5f9;
}

body.dark-mode .activity-book-author {
    color: #94a3b8;
}

body.dark-mode .activity-progress-bar {
    background: #334155;
}

/* Load More */
.activity-load-more {
    text-align: center;
    margin-top: 1.5rem;
}

.activity-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: #00b4ff;
    border: 2px solid #00b4ff;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.activity-load-more-btn:hover {
    background: #00b4ff;
    color: white;
}

/* ==============================================
   SOCIAL FEED COMPONENT
   ============================================== */

.user-social-feed {
    width: 100%;
}

.social-loading,
.social-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.social-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 180, 255, 0.2);
    border-top-color: #00b4ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

.social-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.social-empty-icon i {
    font-size: 1.75rem;
    color: #64748b;
}

.social-empty h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.social-empty p {
    color: #64748b;
    margin: 0;
}

.social-empty-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #00b4ff;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 0.5rem;
}

.social-empty-action-btn:hover {
    background: var(--brand-secondary, #0174B1);
}

body.dark-mode .social-empty-icon {
    background: #334155;
}

body.dark-mode .social-empty h3 {
    color: #f1f5f9;
}

body.dark-mode .social-empty p {
    color: #94a3b8;
}

/* Social Posts */
.social-posts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ==============================================
   SOCIAL TAB - ACTIVITY FEED
   ============================================== */

.user-social-feed {
    padding: 1.5rem 0;
}

/* Loading/Empty States */
.social-loading,
.social-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.social-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e9ecef;
    border-top-color: #00b4ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

.social-empty svg {
    opacity: 0.6;
    margin-bottom: 1rem;
    stroke: #94a3b8;
}

.social-empty h4 {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-weight: 700;
    font-size: 1.25rem;
}

body.dark-mode .social-empty h4 {
    color: #f1f5f9;
}

.social-empty p {
    margin: 0 0 1rem 0;
    color: #64748b;
}

.social-empty-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #00b4ff;
    color: white !important;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.social-empty-action-btn:hover {
    background: var(--brand-secondary, #0174B1);
}

/* Posts List */
.social-posts-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Post Card */
.social-post-card {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.2s;
}

.social-post-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.dark-mode .social-post-card {
    background: #1e293b;
    border-color: #334155;
}

.social-post-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.social-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00b4ff, #0174B1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    overflow: hidden;
}

.social-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-post-meta {
    display: flex;
    flex-direction: column;
}

.social-post-author {
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    font-size: 0.95rem;
}

.social-post-author:hover {
    color: #00b4ff;
}

body.dark-mode .social-post-author {
    color: #f1f5f9;
}

.social-post-time {
    font-size: 0.8rem;
    color: #94a3b8;
}

.social-post-content {
    margin-bottom: 0;
}

/* Activity Styles */
.social-post-activity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.social-activity-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.social-activity-icon.reading { background: #e3f2fd; color: #1976d2; }
.social-activity-icon.completed { background: #e8f5e9; color: #388e3c; }
.social-activity-icon.follow { background: #fff3e0; color: #f57c00; }
.social-activity-icon.rating { background: #fffde7; color: #fbc02d; }
.social-activity-icon.comment { background: #f3e5f5; color: #7b1fa2; }
.social-activity-icon.favorite { background: #fce4ec; color: #c2185b; }
.social-activity-icon.audio { background: #e0f7fa; color: #0097a7; }
.social-activity-icon.listening { background: #e0f7fa; color: #0097a7; }
.social-activity-icon.published { background: #e8f5e9; color: #388e3c; }

.social-activity-text {
    font-size: 1rem;
    color: #334155;
}

body.dark-mode .social-activity-text {
    color: #e2e8f0;
}

.social-book-link {
    color: #00b4ff;
    font-weight: 700;
    text-decoration: none;
}

.social-book-link:hover {
    text-decoration: underline;
}

.social-rating-stars {
    color: #f7b500;
    font-weight: 700;
    margin-left: 0.5rem;
}

/* Book Row - Horizontal Layout */
.social-post-book-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 0.75rem;
}

.social-post-cover {
    flex-shrink: 0;
    cursor: pointer;
}

.social-post-cover img {
    width: 100px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.social-post-cover:hover img {
    transform: scale(1.02);
}

.social-post-cover.small img {
    width: 70px;
}

/* Comment/Review Text */
.social-post-comment-text,
.social-post-review {
    flex: 1;
    background: #f8fafc;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334155;
}

body.dark-mode .social-post-comment-text,
body.dark-mode .social-post-review {
    background: #0f172a;
    color: #e2e8f0;
}

.social-post-review {
    font-style: italic;
    border-left: 3px solid #00b4ff;
}

.social-post-usertext {
    background: #f8fafc;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    font-size: 1rem;
    line-height: 1.6;
    color: #334155;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

body.dark-mode .social-post-usertext {
    background: #0f172a;
    color: #e2e8f0;
}

/* Author Follow Card */
.social-author-follow-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    margin-top: 0.75rem;
}

.social-author-follow-card:hover {
    border-color: #00b4ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 180, 255, 0.15);
}

body.dark-mode .social-author-follow-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a2942 100%);
}

.social-author-avatar-large {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #00b4ff, #0174B1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.social-author-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-author-avatar-large svg {
    opacity: 0.8;
}

.social-author-info-large {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.social-author-name-large {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

body.dark-mode .social-author-name-large {
    color: #f1f5f9;
}

.social-author-meta-text {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.social-author-bio {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

body.dark-mode .social-author-bio {
    color: #cbd5e1;
}

.social-author-view-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #00b4ff;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.social-author-view-link svg {
    transition: transform 0.2s;
}

.social-author-follow-card:hover .social-author-view-link svg {
    transform: translateX(3px);
}

/* Load More */
.social-load-more {
    text-align: center;
    padding: 1rem 0;
}

.social-load-more-btn {
    padding: 0.75rem 2rem;
    background: white;
    color: #00b4ff;
    border: 2px solid #00b4ff;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.social-load-more-btn:hover {
    background: #00b4ff;
    color: white;
}

body.dark-mode .social-load-more-btn {
    background: #1e293b;
    color: #00b4ff;
    border-color: #00b4ff;
}

body.dark-mode .social-load-more-btn:hover {
    background: #00b4ff;
    color: white;
}

.social-loading-more {
    text-align: center;
    padding: 1.5rem 0;
}

/* ==============================================
    flex: 1;
}

.social-post-author {
    display: block;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.social-post-time {
    font-size: 0.8rem;
    color: #94a3b8;
}

.social-post-book-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #f1f5f9;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: #64748b;
    text-decoration: none;
    transition: background 0.2s ease;
}

.social-post-book-link:hover {
    background: #e2e8f0;
}

body.dark-mode .social-post-author {
    color: #f1f5f9;
}

body.dark-mode .social-post-book-link {
    background: #334155;
    color: #94a3b8;
}

body.dark-mode .social-post-book-link:hover {
    background: #475569;
}

.social-post-content {
    color: #334155;
    line-height: 1.6;
    margin-bottom: 1rem;
}

body.dark-mode .social-post-content {
    color: #e2e8f0;
}

.social-post-actions {
    display: flex;
    gap: 1.5rem;
}

.social-post-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.social-post-action:hover {
    color: #00b4ff;
}

.social-post-action i.liked {
    color: #ef4444;
}

/* Load More */
.social-load-more {
    text-align: center;
    margin-top: 1.5rem;
}

.social-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: #00b4ff;
    border: 2px solid #00b4ff;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.social-load-more-btn:hover {
    background: #00b4ff;
    color: white;
}

.social-loading-more {
    text-align: center;
    padding: 1rem;
}

.social-loading-more .social-loading-spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto;
}

/* ==============================================
   READING STATS COMPONENT
   ============================================== */

.user-reading-stats {
    width: 100%;
}

.stats-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.stats-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 180, 255, 0.2);
    border-top-color: #00b4ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

/* Stats Cards Grid */
.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stats-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.dark-mode .stats-card {
    background: #1e293b;
}

.stats-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    font-size: 1.5rem;
}

.stats-card-icon.reading {
    background: rgba(0, 180, 255, 0.1);
    color: #00b4ff;
}

.stats-card-icon.time {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.stats-card-icon.chapters {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.stats-card-icon.streak {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stats-card-content {
    flex: 1;
}

.stats-card-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
}

.stats-card-label {
    font-size: 0.85rem;
    color: #64748b;
}

body.dark-mode .stats-card-value {
    color: #f1f5f9;
}

body.dark-mode .stats-card-label {
    color: #94a3b8;
}

/* Stats Sections */
.stats-section {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.dark-mode .stats-section {
    background: #1e293b;
}

.stats-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.25rem 0;
}

.stats-section-title i {
    color: #00b4ff;
}

body.dark-mode .stats-section-title {
    color: #f1f5f9;
}

/* Category Stats */
.stats-category-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stats-category-item {
    /* container */
}

.stats-category-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.stats-category-name {
    font-weight: 500;
    color: #334155;
    font-size: 0.9rem;
}

.stats-category-count {
    font-size: 0.8rem;
    color: #64748b;
}

body.dark-mode .stats-category-name {
    color: #e2e8f0;
}

body.dark-mode .stats-category-count {
    color: #94a3b8;
}

.stats-category-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.stats-category-fill {
    height: 100%;
    background: linear-gradient(90deg, #00b4ff 0%, #0066cc 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

body.dark-mode .stats-category-bar {
    background: #334155;
}

/* Monthly Activity */
.stats-monthly-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

.stats-month-cell {
    padding: 1rem 0.5rem;
    text-align: center;
    border-radius: 0.5rem;
    transition: transform 0.2s ease;
}

.stats-month-cell:hover {
    transform: scale(1.05);
}

.stats-month-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: inherit;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.stats-month-value {
    font-size: 0.9rem;
    font-weight: 700;
}

.stats-month-cell.intensity-0 {
    background: #f1f5f9;
    color: #94a3b8;
}

.stats-month-cell.intensity-1 {
    background: rgba(0, 180, 255, 0.15);
    color: #0284c7;
}

.stats-month-cell.intensity-2 {
    background: rgba(0, 180, 255, 0.3);
    color: #0369a1;
}

.stats-month-cell.intensity-3 {
    background: rgba(0, 180, 255, 0.5);
    color: white;
}

.stats-month-cell.intensity-4 {
    background: #00b4ff;
    color: white;
}

body.dark-mode .stats-month-cell.intensity-0 {
    background: #334155;
    color: #64748b;
}

/* Achievements */
.stats-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.stats-achievement-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

.stats-achievement-card.unlocked {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.stats-achievement-card.locked {
    opacity: 0.6;
}

body.dark-mode .stats-achievement-card {
    border-color: #334155;
}

body.dark-mode .stats-achievement-card.unlocked {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.stats-achievement-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 0.75rem;
    font-size: 1.5rem;
    color: #64748b;
}

.stats-achievement-card.unlocked .stats-achievement-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

body.dark-mode .stats-achievement-icon {
    background: #334155;
}

.stats-achievement-info {
    flex: 1;
}

.stats-achievement-name {
    display: block;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.stats-achievement-desc {
    font-size: 0.8rem;
    color: #64748b;
}

body.dark-mode .stats-achievement-name {
    color: #f1f5f9;
}

body.dark-mode .stats-achievement-desc {
    color: #94a3b8;
}

.stats-achievement-check {
    color: #10b981;
    font-size: 1.25rem;
}

/* ==============================================
   RESPONSIVE
   ============================================== */

@media (max-width: 768px) {
    /* The mobile half of the sticky offset, and it has to travel with the 70px base value --
       both sibling bars drop to 60px at this exact breakpoint (library.css and social.css, each
       inside their own `@media (max-width: 768px)`). Setting only the desktop value would leave
       this bar pinned 10px below the other two on phones, which is the inconsistency this
       override exists to remove.

       60px is the sibling convention, not a clearance, for the same reason 70px is not one at
       the base rule -- see the note there. It only really clears at 600px and below (nav bottom
       ~57px); through the 601-768px part of this same block the nav is ~79px and TALLER than
       either value, so the bar still tucks behind it there. Propagating the existing convention
       is the point; these three offsets are one convention spelled out in three files, so they
       move together or not at all. */
    .user-profile-tabs-container { top: calc(var(--topnav-inset-top) + 60px); }

    .user-profile-hero-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .user-profile-info-section {
        width: 100%;
    }

    .user-profile-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .user-profile-avatar {
        width: 120px;
        height: 120px;
    }

    .user-profile-name {
        font-size: 1.5rem;
    }

    .user-profile-meta {
        justify-content: center;
    }

    .user-profile-stats {
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .user-profile-actions {
        justify-content: center;
    }

    .user-profile-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .user-profile-tab {
        white-space: nowrap;
    }

    .activity-books-grid {
        grid-template-columns: 1fr;
    }

    .stats-monthly-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-achievements-grid {
        grid-template-columns: 1fr;
    }
}