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

/* ==========================================================================
   SMOOTH LOADING ANIMATIONS
   ========================================================================== */

/* Initial state - hidden */
.component-loading {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Loaded state - visible */
.component-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Text loaded state - matches search/results pages */
.text-loaded {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Main profile elements - initial hidden state */
.profile-breadcrumb,
.profile-main-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Content sections - hidden until scroll */
.content-section,
.works-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Profile sections loading animation */
.profile-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.profile-section.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Related profiles loading animation */
.related-card,
.people-list-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Staggered loading delays */
.profile-section:nth-child(1) { transition-delay: 0.1s; }
.profile-section:nth-child(2) { transition-delay: 0.2s; }
.profile-section:nth-child(3) { transition-delay: 0.3s; }
.profile-section:nth-child(4) { transition-delay: 0.4s; }

.related-card:nth-child(1) { transition-delay: 0.1s; }
.related-card:nth-child(2) { transition-delay: 0.2s; }
.related-card:nth-child(3) { transition-delay: 0.3s; }
.related-card:nth-child(4) { transition-delay: 0.4s; }

body {
    font-family: 'Helvetica Now Display', sans-serif;
}

/* ==========================================================================
   LOADING SPINNER
   ========================================================================== */

.loading-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-primary, #0A0A0A);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100; /* Lower than header's z-index: 1000 in shared.css */
    pointer-events: none; /* Allow clicks to pass through to header */
}

.loading-spinner.hidden {
    display: none;
}

.loading-spinner-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-logo {
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    filter: brightness(0) invert(1);
}

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

/* Hide edit buttons */
.breadcrumb-right,
.section-header .breadcrumb-right {
    display: none !important;
}

/* ==========================================================================
   RELATED PROFILES
   ========================================================================== */
.related-profiles-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Tablet layout for related profiles */
@media (min-width: 769px) and (max-width: 1400px) {
    .related-profiles-list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}

/* Desktop grid layout for related profiles when width > 1200px */
@media (min-width: 1401px) {
    .related-profiles-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 968px) {
    .related-card {
        padding: 24px;
    }
    
    .related-avatar {
        width: 80px;
        height: 80px;
    }
    
    .related-name {
        font-size: 18px;
    }
    
    .related-title {
        font-size: 14px;
    }
    
    .related-institution {
        font-size: 12px;
    }
}

/* Ensure smooth transitions for related profiles during resize */
.related-profiles-list {
    transition: all 0.3s ease;
}

.related-card {
    transition: all 0.3s ease;
}

.related-avatar {
    transition: all 0.3s ease;
}

/* Profile page separators - grey color */
hr {
    border-color: #3F3F3F;
}

/* ==========================================================================
   SOURCE PILLS
   ========================================================================== */
.source-pill-container {
    position: relative;
    display: inline-block;
}

.source-pill {
    display: inline-block;
    background-color: #424242 !important;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    border: none !important;
    font-size: 10px;
    font-weight: normal;
    margin-left: 8px;
    position: relative;
    top: -2px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    z-index: 1;
}

.source-pill:hover {
    background-color: #DBD9D9 !important;
    color: #424242;
    transition: background-color 0s ease, color 0s ease;
}

.source-popup {
    position: fixed;
    top: 100%;
    left: 0;
    margin-top: 6px;
    z-index: 10000;
    min-width: 200px;
    max-width: 300px;
    background-color: #DBD9D9;
    border-radius: 12px;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.10);
    border: 1px solid #DBD9D9;
    border-image: none;
    padding: 10px 12px 6px 12px;
    font-family: 'Helvetica Now Display', sans-serif;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    word-wrap: break-word;
}

.source-popup .sources-header {
    color: black;
    font-size: 10px;
    font-weight: normal;
    line-height: 10px;
    margin-bottom: 10px;
}

.source-popup .source-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 0;
    min-height: 16px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

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

.source-popup .source-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: -2px;
    align-self: flex-start;
}

.source-popup .source-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.source-popup .source-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.source-popup .source-name {
    color: black;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    flex-basis: auto;
    min-width: 0;
    padding: 2px 0;
}

.source-popup .source-name:hover {
    text-decoration: underline;
}

.source-popup .source-url {
    color: #6c757d;
    font-size: 10px;
    font-weight: normal;
    line-height: 1.2;
    flex-shrink: 1;
    flex-basis: auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


@font-face {
    font-family: 'Helvetica Now Display';
    src: url('fonts/HelveticaNowDisplay-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now Display';
    src: url('fonts/HelveticaNowDisplay-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now Display';
    src: url('fonts/HelveticaNowDisplay-Light.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   PROFILE PAGE SPECIFIC STYLES
   ========================================================================== */

/* CSS Variables */
:root {
    --color-text-subtitle: #9D9C9C;
}

/* Image brightness */
img {
    opacity: 1;
    filter: none;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   PROFILE PAGE LAYOUT
   ========================================================================== */
.profile-page {
    min-height: 100vh;
    background: var(--color-bg-primary);
    padding: 0;
    font-family: 'Helvetica Now Display', sans-serif;
}

.profile-container {
    max-width: 1728px;
    margin: 0 auto;
    padding: 98px 256px 80px 256px;
}

/* ==========================================================================
   BREADCRUMB NAVIGATION
   ========================================================================== */
.profile-breadcrumb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0 15px 0; /* Reduced top padding for desktop */
    /* border-bottom: 1px solid var(--color-border-primary); */
    margin-bottom: 40px;
}

.breadcrumb-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb-item {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item:hover {
    color: var(--color-text-secondary);
}

.breadcrumb-arrow {
    width: 15px;
    height: 15px;
    background: url('assets/icons/back-arrow.svg') no-repeat center;
    background-size: contain;
    transform: scaleX(-1);
}

.breadcrumb-right {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.breadcrumb-right:hover {
    background-color: #d0d0d0;
}

.breadcrumb-right:hover .edit-link {
    color: var(--color-text-primary);
}

.breadcrumb-right:hover .edit-icon {
    opacity: 1;
}

.edit-link {
    color: var(--color-text-subtitle);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    text-decoration: none;
    transition: color 0.2s ease;
}

.edit-icon {
    width: 20px;
    height: 20px;
    background: url('assets/icons/edit.svg') no-repeat center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   FACT-CHECK SECTION
   ========================================================================== */
.fact-check-trending-section {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px; /* gap-6 = 24px */
    width: 100%;
}

.fact-check-section {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem; /* gap-2 = 8px */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
    cursor: pointer;
}

.fact-check-section.text-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: fade only (no translate) */
@media (max-width: 768px) {
    .fact-check-trending-section {
        gap: 16px !important;
    }
    
    .fact-check-section {
        transform: none !important;
    }
    
    .fact-check-section.text-loaded {
        transform: none !important;
    }
    
    .trending-alert-container {
        transform: none !important;
    }
    
    .trending-alert-container[style*="display: block"] {
        transform: none !important;
    }
    
    .trending-alert-container > div {
        max-width: 100% !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    .trending-alert-container #trending-reason-text {
        font-size: 16px !important;
        line-height: 20px !important;
    }
    
    .trending-alert-container > div .w-3\.5:has(.trending-icon),
    .trending-alert-container > div .w-3\.5.h-3\.5:has(.trending-icon) {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
    }
    
    .trending-alert-container > div .trending-icon,
    .trending-alert-container > div img.trending-icon,
    .trending-alert-container .self-stretch .trending-icon {
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        object-fit: contain !important;
    }
    
    .trending-alert-container .text-Color-Text-default-subtitle {
        font-size: 15.8px !important;
        line-height: 18px !important;
    }
    
    .trending-alert-container .gap-2 {
        gap: 4px !important;
    }
    
    .trending-alert-container .gap-3 {
        gap: 14px !important;
    }
    
    .trending-alert-container > div {
        position: relative !important;
    }
    
    .trending-alert-container #trending-alert-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 10 !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .trending-alert-container #trending-alert-close .w-3\.5 {
        width: 20px !important;
        height: 20px !important;
    }
    
    .trending-alert-container #trending-alert-close .w-2\.5 {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fact-check-section {
        transition: none;
    }
}

.fact-check-section .w-3\.5 {
    width: 0.875rem; /* 14px */
    height: 0.875rem; /* 14px */
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1rem; /* Match text line-height for alignment */
}

.fact-check-icon {
    width: 0.875rem;
    height: 0.875rem;
    filter: brightness(0) saturate(100%) invert(61.5%); /* Make logo grey #9D9B9B */
    opacity: 1;
    display: block;
    object-fit: contain;
}

.fact-check-section > div:last-child {
    color: var(--Color-Text-default-subtitle, var(--color-text-subtitle));
    font-size: 0.875rem; /* text-sm = 14px */
    font-weight: 300; /* font-light */
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 1rem; /* leading-4 = 16px */
    display: flex;
    align-items: center;
}

.fact-check-text-container {
    position: relative;
    display: inline-block;
}

.fact-check-popup {
    position: fixed;
    z-index: 10001;
    min-width: 250px;
    max-width: 350px;
    background-color: #DBD9D9;
    border-radius: 12px;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.10);
    border: 1px solid #DBD9D9;
    padding: 12px 16px;
    font-family: 'Helvetica Now Display', sans-serif;
    box-sizing: border-box;
    word-wrap: break-word;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}

.fact-check-popup-content {
    color: black;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
    font-family: 'Helvetica Now Display', sans-serif;
}

/* ==========================================================================
   TRENDING ALERT
   ========================================================================== */
.trending-alert-container {
    width: 100%;
    max-width: 100%;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.trending-alert-container.text-loaded {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.trending-alert-container.closing {
    opacity: 0 !important;
    transform: translateY(0) !important; /* Keep at current position, only fade */
}

.trending-alert-container > div {
    width: 100%;
    padding: 16px;
    background: #18181b;
    border-radius: 12px;
    outline: 1px solid #18181b;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
}

.trending-alert-container .self-stretch {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.trending-alert-container .flex-1 {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.trending-alert-container .inline-flex {
    display: inline-flex;
}

.trending-alert-container .justify-start {
    justify-content: flex-start;
}

.trending-alert-container .items-center {
    align-items: center;
}

.trending-alert-container .items-start {
    align-items: flex-start;
}

.trending-alert-container .gap-2 {
    gap: 8px;
}

.trending-alert-container .gap-3 {
    gap: 12px;
}

.trending-alert-container .w-3\.5 {
    width: 14px;
    height: 14px;
}

.trending-alert-container .w-3\.5:has(.trending-icon) {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

.trending-alert-container .w-3 {
    width: 16px;
    height: 16px;
}

.trending-alert-container .w-2\.5 {
    width: 14px;
    height: 14px;
}

.trending-alert-container .relative {
    position: relative;
}

.trending-alert-container .overflow-hidden {
    overflow: hidden;
}

.trending-alert-container img:not(.trending-icon) {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trending-alert-container .trending-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

.trending-alert-container .text-Color-Text-default-subtitle {
    color: var(--Color-Text-default-subtitle, #9D9C9C);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 20px;
}

.trending-alert-container #trending-reason-text {
    color: var(--Color-Text-default-primary--text, #FFFFFF);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 20px;
}

.trending-alert-container #trending-alert-close {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.trending-alert-container #trending-alert-close:hover {
    opacity: 0.7;
}

.trending-alert-container #trending-alert-close img {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   MAIN PROFILE CONTENT
   ========================================================================== */

/* Content sections */
.content-section {
    margin-top: 48px;
}

/* People also viewed section for desktop */
.people-also-viewed-desktop {
    padding-top: 0;
}

.people-also-viewed-desktop .people-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    row-gap: 15px !important;
    margin-top: 13px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.people-also-viewed-desktop .people-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    border-radius: 8px !important;
    transition: none !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    min-width: 180px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
    pointer-events: auto !important;
}


.people-also-viewed-desktop .people-item:hover {
    background-color: var(--color-bg-secondary);
    padding: 0 !important;
}

.people-also-viewed-desktop .people-avatar-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.people-also-viewed-desktop .people-avatar-wrapper.logo-placeholder {
    background-color: #000000 !important;
    border: none !important;
    min-width: 36px !important;
    min-height: 36px !important;
}

.people-also-viewed-desktop .people-avatar-wrapper.logo-placeholder .logo-placeholder-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    min-height: 36px !important;
}

.people-also-viewed-desktop .people-avatar {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}


.people-also-viewed-desktop .people-info {
    flex: 0 0 auto;
    min-width: 0;
}

.people-also-viewed-desktop .people-item:not(:last-child) .people-info {
    margin-right: 20px !important;
}

.people-also-viewed-desktop .people-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    max-width: 110px;
}

.people-also-viewed-desktop .people-title {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-subtitle);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Make cards size based on name length for screens greater than 1600px */
@media (min-width: 1601px) {
    .people-also-viewed-desktop .people-item {
        min-width: auto !important;
        width: auto !important;
    }
    
    .people-also-viewed-desktop .people-name {
        max-width: none;
        white-space: nowrap;
    }
    
    .people-also-viewed-desktop .people-title {
        max-width: none;
        white-space: nowrap;
    }
    
    .people-also-viewed-desktop .people-item:not(:last-child) .people-info {
        margin-right: 32px !important;
    }
}

.profile-main-content {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

.profile-left {
    flex: 1;
    border-right: none;
    display: flex;
    gap: 40px;
}

.profile-image {
    width: 365px;
    height: 391px;
    border-radius: 16px;
    flex-shrink: 0;
    background-color: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.profile-image img.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* Style for Autopoiesis logo placeholder in main profile image */
.profile-image.logo-placeholder {
    background-color: #000000;
    border: none;
    opacity: 1;
    background-image: none;
}

/* General styling for logo placeholder content */
.logo-placeholder-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}

.logo-placeholder .logo-icon {
    width: auto;
    height: auto;
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    display: block;
}

/* Override for related profiles - smaller logo */
.related-avatar-wrapper.logo-placeholder .logo-icon {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
}

.logo-placeholder .logo-text {
    color: #FFFFFF;
    font-family: 'Helvetica Now Display', sans-serif;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
}

/* Adjust logo icon size for main profile image - smaller logo relative to text */
.profile-image.logo-placeholder .logo-icon {
    width: 25px;
    height: 25px;
}

.profile-image.logo-placeholder .logo-text {
    font-size: 20px;
}

/* Placeholder specific styles for related scientists - logo only, no text */
.related-avatar-wrapper.logo-placeholder .logo-icon {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

/* Placeholder specific styles for people also viewed - logo only, no text */
.people-avatar-wrapper.logo-placeholder .logo-icon {
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1) !important;
    display: block;
    opacity: 1 !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

.people-also-viewed-desktop .people-avatar-wrapper.logo-placeholder .logo-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

.profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 37px;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.profile-name-section {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.profile-name {
    color: var(--color-text-primary);
    font-size: 32px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 30.62px;
    margin: 7px 0 0 0;
}

.profile-title {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 17.23px;
    margin-top: 2px;
}

/* Bullet separator styling for desktop */
.profile-title .bullet-separator {
    color: var(--color-text-subtitle);
    margin: 0 5px;
}

/* Institution text styling for desktop */
.profile-title .institution-text {
    color: var(--color-text-subtitle);
    font-weight: 400;
}

.profile-social {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    margin-top: 9px;
}


.profile-linkedin-icon {
    width: 25px;
    height: 25px;
    background: var(--color-text-primary);
    border-radius: 4px;
    background: url('assets/icons/logo-linkedin-small.svg') no-repeat center;
    background-size: contain;
}

.email-icon {
    width: 24px;
    height: 24px;
    background: url('assets/icons/email.svg') no-repeat center;
    background-size: contain;
}

/* Desktop: Vertical layout like the image (default) */
.profile-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
}

.profile-details-left {
    display: contents;
}

.profile-details-right {
    display: contents;
}

/* Desktop: Hide Institution section since it's now in the title */
.profile-details-left .detail-group:first-child {
    display: none;
}


.detail-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-label {
    color: var(--color-text-subtitle);
    font-size: 15px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 15.31px;
}

.detail-value {
    color: var(--color-text-primary);
    font-size: 20px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 19.14px;
}

/* ==========================================================================
   TAGS
   ========================================================================== */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag {
    padding: 10px 15px;
    border: 1.14px solid var(--color-border-primary);
    border-radius: 34.21px;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 14px;
    white-space: nowrap;
}

.tag-secondary {
    color: var(--color-surface-secondary);
}

/* Right Sidebar - Hidden on desktop */
.profile-sidebar {
    display: none;
}

.sidebar-title {
    color: #929292;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 15.31px;
}


.people-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}


.people-item {
    display: flex;
    align-items: center;
    gap: 12px;
}


.people-avatar-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 5.83px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.people-avatar {
    width: 100%;
    height: 100%;
    border-radius: 5.83px;
    object-fit: cover;
    opacity: 1 !important;
}

/* Ensure logo icon in people avatars doesn't inherit filter: none */
.people-avatar-wrapper.logo-placeholder .logo-icon {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Style for Autopoiesis logo placeholder in people section */
.people-avatar-wrapper.logo-placeholder {
    background-color: #000000 !important;
    border: none !important;
    min-width: 50px !important;
    min-height: 50px !important;
}

.people-avatar-wrapper.logo-placeholder .logo-placeholder-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 50px !important;
    min-height: 50px !important;
}


.people-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.people-name {
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 16px;
    margin: 0;
}

.people-title {
    color: var(--color-surface-primary);
    font-size: 12px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 14px;
    margin: 0;
}

/* Content Sections */

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

.section-title {
    color: var(--color-text-primary);
    font-size: 24px;
    font-weight: 500;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 28.80px;
    margin-bottom: 32px;
}


/* Highlight Card */
.highlights-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.highlight-card {
    padding: 24px;
    background: #18181b;
    border-radius: 20px;
}

.highlight-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.highlight-date {
    color: var(--color-text-subtitle);
    font-size: 14px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 24px;
}

.highlight-text {
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 30px;
}

.highlight-text-bold {
    font-weight: 500;
}

/* Works Section */


.works-categories {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.works-category {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.category-title {
    color: var(--color-text-primary);
    font-size: 20px;
    font-weight: 300;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 20px;
    margin: 0;
}

.works-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.work-card {
    padding: 24px;
    background: #18181b;
    border-radius: 20px;
}

/* New publication card styles */
.self-stretch {
    width: 100%;
    align-self: stretch;
}

.p-6 {
    padding: 1.5rem; /* 24px */
}

.bg-zinc-900 {
    background-color: #18181b; /* zinc-900 */
}

.rounded-\[20px\] {
    border-radius: 20px;
}

.inline-flex {
    display: inline-flex;
}

.flex-col {
    flex-direction: column;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.items-start {
    align-items: flex-start;
}

.gap-2\.5 {
    gap: 0.625rem; /* 10px */
}

.overflow-hidden {
    overflow: hidden;
}

.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.flex-1 {
    flex: 1 1 0%;
}

.gap-3 {
    gap: 0.75rem; /* 12px */
}

.w-5 {
    width: 1.25rem !important; /* 20px */
    min-width: 1.25rem !important; /* Prevent shrinking */
}

.h-5 {
    height: 1.25rem !important; /* 20px */
    min-height: 1.25rem !important; /* Prevent shrinking */
}

/* Ensure book icon container doesn't shrink */
[data-icon="book"] {
    flex-shrink: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
}

[data-icon="book"] img {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
}

.relative {
    position: relative;
}

.text-base {
    font-size: 1rem; /* 16px */
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400;
}

.leading-6 {
    line-height: 1.5rem; /* 24px */
}

.text-sm {
    font-size: 0.875rem; /* 14px */
}

.leading-5 {
    line-height: 1.25rem; /* 20px */
}

.flex {
    display: flex;
}

.text-Color-Text-default-secondary--text {
    color: var(--Color-Text-default-secondary--text);
}

.text-Color-Text-default-subtitle {
    color: var(--Color-Text-default-subtitle);
}

.text-Color-Text-default-primary--text {
    color: var(--Color-Text-default-primary--text);
}

.rounded-xl {
    border-radius: 0.75rem; /* 12px */
}

.p-5 {
    padding: 1.25rem; /* 20px */
}

.gap-2 {
    gap: 0.5rem; /* 8px */
}

.h-6 {
    height: 1.5rem; /* 24px */
}

/* Publication card padding - 16px for desktop, 20px for mobile */
.publication-card {
    padding: 16px !important;
    border-radius: 12px !important;
}

.publication-card-mobile {
    padding: 20px !important;
}

/* Lower icon position on mobile publications */
.publication-card-mobile [data-icon="book"] {
    align-self: flex-start;
    margin-top: 2px;
}

/* Desktop publication date - align to right, prevent wrapping */
.publication-date-desktop {
    text-align: right;
    white-space: nowrap;
    margin-left: 24px;
    margin-right: 0;
    flex-shrink: 0;
    min-width: fit-content;
}

/* Ensure left content can shrink to make room for date */
.publication-card .flex-1 > div:first-child {
    min-width: 0;
    flex-shrink: 1;
}

.work-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.work-date {
    color: var(--color-text-subtitle);
    font-size: 14px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 24px;
}

.work-description {
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 30px;
}

/* Related Profiles */
.related-profiles {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-bottom: 60px;
}

.related-category {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.related-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.collaborators-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.similar-scientists-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.related-card {
    padding: 16px;
    background: #18181b;
    border-radius: 12px;
    cursor: pointer;
    transition: none;
    width: 100%;
    box-sizing: border-box;
}

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

.related-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.related-avatar-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 11.67px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.related-avatar {
    width: 100%;
    height: 100%;
    border-radius: 11.67px;
    object-fit: cover;
    opacity: 1 !important;
    transition: all 0.3s ease;
    max-width: 100%;
}

/* Ensure logo icon in related avatars doesn't inherit filter: none */
.related-avatar-wrapper.logo-placeholder .logo-icon {
    width: 25px !important;
    height: 25px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Style for Autopoiesis logo placeholder in related scientists */
.related-avatar-wrapper.logo-placeholder {
    background-color: #000000 !important;
    border: none !important;
    min-width: 100px !important;
    min-height: 100px !important;
}

.related-avatar-wrapper.logo-placeholder .logo-placeholder-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 100px !important;
    min-height: 100px !important;
}

.related-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.related-name-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-name {
    color: var(--color-text-primary);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 20px;
    margin: 0;
}

.related-title {
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 15.31px;
    margin: 0;
}

.related-institution {
    color: var(--color-text-subtitle, #9D9C9C);
    font-size: 14px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 14px;
    margin: 0;
}

.related-description {
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 15.31px;
    margin: 0;
}

.view-profile-btn {
    padding: 9px 15px;
    border: 1.14px solid var(--color-border-secondary);
    border-radius: 34.21px;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 13.40px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.view-profile-btn:hover {
    background: var(--color-text-primary);
    color: var(--color-bg-primary);
}

/* Overview Section */
.overview-content {
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 1.58;
    transition: max-height 0.3s ease, height 0.3s ease;
}

.overview-content p {
    margin-bottom: 20px;
}

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

/* Overview Gradient Overlay */
.overview-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, var(--color-bg-primary));
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Read More Button */
.read-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--color-text-subtitle); /* Match edit button initial state */
    font-size: 16px;
    font-weight: 400; /* Match edit button font-weight */
    font-family: 'Helvetica Now Display', sans-serif;
    cursor: pointer;
    padding: 0;
    margin: 20px auto 0 auto;
    transition: all 0.3s ease, opacity 0.3s ease;
    position: relative;
    z-index: 3;
    width: fit-content;
}

.read-more-btn:hover {
    color: var(--color-text-primary); /* White on hover, same as edit button */
}

.read-more-arrow {
    width: 18px;
    height: 18px;
    background: url('assets/icons/down-arrow.svg') no-repeat center;
    background-size: contain;
}

/* Edit Profile Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-overlay.active {
    display: flex;
}

/* General Modal Structure - Applied to all modals */
.modal-content {
    width: 100%;
    max-width: 771px;
    max-height: 90vh;
    background: #2F2F2F;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding: 0; /* Remove padding to let header and body handle it */
}

.modal-header {
    padding: 40px 40px 0px 40px; /* Add padding below header */
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to top for proper title/close button alignment */
}

.modal-title {
    margin: 0; /* Remove default margin */
    color: white;
    font-size: 24px;
    font-weight: 400;
}

.modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(90vh - 200px); /* Account for header, actions, and padding */
    padding: 0 40px; /* Add side padding */
    padding-right: 60px; /* Extra space for scrollbar */
    margin-right: -20px; /* Pull scrollbar into padding area */
    flex: 1;
}

.modal-actions {
    padding: 0 40px 40px 40px; /* Add proper actions padding */
    margin-top: 40px;
    flex-shrink: 0;
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
}

.close-icon {
    width: 20px;
    height: 20px;
    background: url('assets/icons/x-close.svg') no-repeat center;
    background-size: contain;
}

.modal-title {
    color: white;
    font-size: 24px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 22.97px;
    margin-bottom: 40px;
}

.edit-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form-row {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.profile-image-section {
    position: relative;
    width: 365px;
    height: 391px;
    flex-shrink: 0;
}

.edit-profile-image {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    border-radius: 23.56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #DBD9D9;
    font-size: 16px;
    font-weight: 500;
    line-height: 15.31px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.profile-image-section:hover .upload-overlay {
    opacity: 1;
}

.form-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 8px;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group label {
    color: #9D9C9C;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 16px;
    width: fit-content;
}

.form-input {
    padding: 9px 20px;
    border: 1.14px solid #868686;
    border-radius: 10px;
    background: transparent;
    color: white;
    font-size: 20px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 20px;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-input:focus {
    border-color: white;
}

.form-input::placeholder {
    color: #9D9C9C;
}

.input-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1.14px solid #868686;
    border-radius: 10px;
    background: transparent;
    transition: border-color 0.2s ease;
}

.input-with-icon:focus-within {
    border-color: white;
}

.input-with-icon .form-input {
    border: none;
    padding: 0;
    flex: 1;
    border-radius: 0; /* Remove border radius to prevent cutting off text */
    font-weight: 200;
}

.tags-input {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tag-item {
    padding: 8px 15px;
    border: 1.14px solid #DBD9D9;
    border-radius: 34.21px;
    background: transparent;
    color: #DBD9D9;
    font-size: 20px;
    font-weight: 200;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 19.14px;
}

.add-tag-btn {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reusable Modal Buttons */
.modal-actions {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 40px;
    flex-shrink: 0;
}

.btn-cancel {
    height: 46px;
    padding: 13px 20px;
    border: 1px solid var(--color-border-secondary);
    border-radius: 34.21px;
    background: transparent;
    color: white;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-save {
    height: 46px;
    padding: 13px 20px;
    border: none;
    border-radius: 34.21px;
    background: white;
    color: black;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.btn-save:hover {
    background: #f0f0f0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .profile-container {
        padding: 98px 128px 60px 128px;
    }
    
    .profile-main-content {
        gap: 40px;
    }
    
    .profile-left {
        gap: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 968px) {
    .profile-main-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .profile-left {
        border-right: none;
        padding-right: 0;
        flex-direction: column;
        gap: 30px;
    }
    
    .profile-image {
        width: 200px;
        height: 227px;
        align-self: center;
    }
    
    .profile-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .profile-sidebar {
        flex: none;
    }

    .form-row {
        flex-direction: column;
        gap: 24px;
    }
    
    .profile-image-section {
        align-self: center;
    }
    
    .modal-content {
        width: 95%;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    /* Mobile-specific animations - fade only, no translation */
    .profile-breadcrumb,
    .profile-main-content,
    .content-section,
    .works-section,
    .work-card,
    .highlight-card,
    .profile-section {
        transform: none !important;
    }
    
    /* Related profiles - fade animation only on mobile (no translateY) */
    .related-card {
        transform: none !important;
        transition: opacity 0.6s ease !important;
    }
    
    .related-card.text-loaded {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .people-list-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    /* Related profiles container - ensure smooth loading */
    .related-category,
    .people-category {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .profile-container {
        padding: 59px 20px 60px 20px;
    }
    
    /* Mobile: Profile details */
    .profile-details {
        gap: 20px;
    }

    /* Mobile: Show Institution section */
    .profile-details-left .detail-group:first-child {
        display: flex;
    }
    
    .profile-breadcrumb {
        flex-direction: row !important; /* Keep on same line */
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 17px !important;
        padding: 25px 0 15px 0 !important; /* Keep original padding for mobile */
    }
    
    /* Mobile profile main content - restructured like image */
    .profile-main-content {
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .profile-left {
        flex-direction: column !important;
        gap: 30px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--color-border-primary) !important;
        padding-right: 0 !important;
        padding-bottom: 32px !important;
        width: 100% !important;
    }
    
    /* Mobile profile image - full width like image */
    .profile-image {
        width: 100% !important;
        height: 232px !important;
        border-radius: 16px !important;
        align-self: center !important;
    }
    
    /* Mobile profile info - structured like image */
    .profile-info {
        gap: 32px !important;
        padding-top: 0 !important;
    }
    
    /* Mobile profile header - name and social icons on same line */
    .profile-header {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 0 !important;
    }
    
    .profile-name-section {
        gap: 12px !important;
    }
    
    .profile-name {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    
    .profile-title {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    
    /* Mobile social icons */
    .profile-social {
        gap: 12px !important;
        align-items: center !important;
        margin-top: 0 !important;
    }
    
    .profile-linkedin-icon,
    .email-icon {
        width: 26px !important;
        height: 26px !important;
    }
    
    /* Mobile profile details - vertical layout with reordering */
    .profile-details {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 24px !important;
        align-items: start !important;
    }
    
    .profile-details-left {
        display: contents !important;
    }
    
    .profile-details-right {
        display: contents !important;
    }
    
    /* All sections stack vertically */
    .profile-details-left .detail-group,
    .profile-details-right .detail-group {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Mobile reordering using CSS Grid: Institution, Specializations, Research Areas */
    .profile-details-left .detail-group:first-child {
        grid-row: 1 !important; /* Institution - first */
    }
    
    .profile-details-right .detail-group {
        grid-row: 2 !important; /* Specializations - second */
    }
    
    .profile-details-left .detail-group:last-child {
        grid-row: 3 !important; /* Research Areas - third */
    }
    
    /* Mobile detail items - label and value structure */
    .detail-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .detail-label {
        font-size: 15px !important;
        color: #9D9C9C !important; /* Light grey like image */
        font-weight: 400 !important;
    }
    
    .detail-value {
        font-size: 16px !important;
        color: #ffffff !important;
        font-weight: 400 !important;
    }
    
    /* Mobile pills/tags - like image */
    .detail-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .detail-pill {
        padding: 6px 12px !important;
        border: 1px solid #ffffff !important;
        border-radius: 16px !important;
        background: transparent !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .highlight-card,
    .work-card,
    .related-card {
        padding: 20px;
        border-radius: 12px !important;
    }
    
    /* Mobile card content - smaller text, preserve headers */
    .highlight-date,
    .highlight-text,
    .work-card .work-description,
    .work-card .work-date,
    .related-card .card-text,
    .related-card .card-title {
        font-size: 16px !important;
        line-height: 24px !important;
        font-weight: 500 !important;
    }
    
    /* Mobile HR elements - reduce margin */
    hr {
        margin: 32px 0 !important;
        border-color: #3F3F3F !important;
    }
    
    .related-content {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .related-left {
        width: 100%;
    }
    
    .section-title {
        font-size: 24px;
    }

    .view-profile-btn {
        align-self: flex-start;
    }
    
    /* Mobile sidebar title */
    .sidebar-title {
        color: #ffffff !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Mobile profile sidebar - ensure full visibility */
    .profile-sidebar {
        overflow: visible !important;
        min-height: 100px !important;
        justify-content: flex-start !important;
        height: 150px !important;
        margin-top: 30px !important;
        gap: 20px !important;
    }
    
    /* Mobile people list - horizontal scrolling */
    .people-list {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        padding: 0;
        background: transparent;
        margin: 0;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
        width: 100%;
        box-sizing: border-box;
        min-height: 140px;
        -webkit-overflow-scrolling: touch;
    }
    
    .people-list::-webkit-scrollbar {
        display: none; /* WebKit browsers */
    }
    
    /* Mobile related profiles - horizontal scrolling like people list */
    
    .related-profiles-list {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        padding: 0;
        background: transparent;
        margin: 0;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
        width: 100%;
        box-sizing: border-box;
        min-height: 140px;
    }
    
    .related-profiles-list::-webkit-scrollbar {
        display: none; /* WebKit browsers */
    }
    
    /* Mobile related cards - vertical card layout with text under image */
    .related-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        background: #18181b !important;
        border-radius: 12px !important;
        padding: 8px !important;
        min-width: 154px !important;
        max-width: 154px !important;
        width: 154px !important;
        height: 217px !important;
        flex-shrink: 0 !important;
        border: none !important;
        outline: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Mobile Related Card Content - vertical layout with text under image */
    .related-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100%;
        height: 100%;
    }
    
    .related-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100%;
        text-align: left;
    }
    
    .related-avatar-wrapper {
        width: 100% !important;
        aspect-ratio: 1 !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    .related-avatar {
        width: 100% !important;
        height: 100% !important;
        border-radius: 8px !important;
        object-fit: cover;
        flex-shrink: 0;
        opacity: 1 !important;
        filter: none !important;
    }
    
    .related-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100%;
        text-align: left;
    }
    
    .related-name-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
    
    .related-name {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--color-text-primary) !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        text-align: left;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .related-title {
        font-size: 12px !important;
        font-weight: 400 !important;
        color: var(--color-text-secondary) !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        text-align: left;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .related-institution {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: var(--color-text-subtitle, #9D9C9C) !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        text-align: left;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Hide view profile button on mobile */
    .view-profile-btn {
        display: none;
    }
    
    /* Mobile card hover effects - removed translation */
    
     /* Mobile people items - individual cards */
     .people-item {
         display: flex !important;
         align-items: center !important;
         gap: 12px !important;
         background: #18181b !important;
         border-radius: 12px !important;
         padding: 8px 16px 8px 8px !important;
         min-width: 200px !important;
         max-width: none !important;
         width: auto !important;
         height: 66px !important;
         flex-shrink: 0 !important;
         border: none !important;
         outline: none !important;
         cursor: pointer !important;
         pointer-events: auto !important;
         box-sizing: border-box !important;
         overflow: visible !important;
         position: relative !important;
     }
    
    .people-item:hover,
    .people-item:active,
    .people-item:focus {
        min-width: 200px !important;
        max-width: none !important;
        width: auto !important;
        height: 66px !important;
        padding: 8px 16px 8px 8px !important;
        margin: 0 !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
     /* Mobile people avatars */
     .people-avatar {
         width: 50px !important;
         height: 50px !important;
         border-radius: 8px !important;
     }
     
     /* Mobile: smaller logo for people also viewed placeholders */
     .people-avatar-wrapper.logo-placeholder .logo-icon {
         width: 20px !important;
         height: 20px !important;
         max-width: 20px !important;
         max-height: 20px !important;
     }
     
     /* Mobile people info - allow text to wrap */
     .people-info {
         flex: 1 !important;
         min-width: 0 !important;
         overflow: visible !important;
     }
     
     .people-name,
     .people-title {
         white-space: nowrap !important;
         overflow: hidden !important;
         text-overflow: ellipsis !important;
         max-width: 100% !important;
     }
     
     /* Mobile work meta container */
     .work-meta-container {
         flex-direction: column;
         gap: 15px;
     }
     
     .work-meta-item {
         width: 100%;
     }
     
     /* Mobile: Show profile sidebar */
     .profile-sidebar {
         display: flex !important;
         flex: 1 1 0;
         height: 309px;
         flex-direction: column;
         justify-content: center;
         align-items: left;
         gap: 25px;
     }
     
     /* Mobile: Hide desktop people section */
     .people-also-viewed-desktop {
         display: none !important;
     }
     
}


.input-with-icon .linkedin-icon {
    width: 20px;
    height: 20px;
    background: url('assets/icons/logo-linkedin-small.svg') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

/* Edit Overview Modal */
.overview-modal {
    max-width: 771px;
    width: 100%;
    height: 90vh; /* Use fixed height instead of max-height */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.overview-modal .modal-content {
    overflow: hidden;
}

.overview-modal .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.overview-modal .modal-actions {
    margin-top: 60px; /* Extra space for overview modal specifically */
}

/* Edit Profile Modal - Use same structure as Recent Works */
#editProfileModal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Remove scroll from body */
    padding: 0 40px; /* Keep side padding for spacing */
    padding-bottom: 0; /* Remove bottom padding */
}

#editProfileModal .edit-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 40px;
    overflow-y: scroll; /* Force scrollbar to always show */
    overflow-x: hidden;
    max-height: 600px; /* Increased height for more content area */
    padding-right: 20px; /* Space for scrollbar */
    margin-right: -20px; /* Pull scrollbar into padding area */
}



.overview-edit-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.overview-textarea-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin-bottom: 40px; /* Increased space between textarea and buttons for overview modal */
}

.overview-textarea {
    width: 100%;
    flex: 1; /* Take up all available space */
    min-height: 0; /* Allow flex to work properly */
    padding: 15px 20px;
    border: 1.14px solid #868686;
    border-radius: 10px;
    background: transparent;
    color: white;
    font-family: 'Helvetica Now Display', sans-serif;
    font-size: 16px;
    font-weight: 200;
    line-height: 24px;
    outline: none;
    resize: none; /* Disable resize to maintain layout */
    transition: border-color 0.2s ease;
    overflow-y: auto;
    box-sizing: border-box;
}

.overview-textarea:focus {
    border-color: white;
}

.overview-textarea::placeholder {
    color: #9D9C9C;
}

/* Ensure modal actions stay at bottom */
#editOverviewModal .modal-actions {
    margin-top: 0;
    flex-shrink: 0;
}


/* Edit Recent Works Modal - Match Edit Profile structure exactly */
.recent-works-modal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Remove scroll from body */
    padding: 0 40px; /* Keep side padding for spacing */
    padding-bottom: 0; /* Remove bottom padding */
}

.recent-works-edit-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 20px; /* Reduced gap to match edit profile spacing */
    overflow-y: scroll; /* Force scrollbar to always show */
    overflow-x: hidden;
    max-height: 600px; /* Increased height for more content area */
    padding-right: 20px; /* Space for scrollbar */
    margin-right: -20px; /* Pull scrollbar into padding area */
}

/* Override global scrollbar styles for recent works modal */
.recent-works-edit-form::-webkit-scrollbar {
    width: 8px;
    display: block !important;
}

.recent-works-edit-form::-webkit-scrollbar-track {
    background: transparent;
}

.recent-works-edit-form::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.recent-works-edit-form::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.works-category-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.works-category-title {
    color: var(--color-text-subtitle);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Helvetica Now Display', sans-serif;
    line-height: 16px;
    margin: 0;
}

.works-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.work-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.work-description-container {
    width: 100%;
}

.work-description-input {
    width: 100%;
    min-height: 40px; /* Reduced from 60px */
    padding: 15px 20px;
    border: 1.14px solid var(--color-border-secondary);
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: 'Helvetica Now Display', sans-serif;
    font-size: 20px;
    font-weight: 200;
    line-height: 30px;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.work-description-input:focus {
    border-color: white;
}

.work-description-input::placeholder {
    color: var(--color-text-subtitle);
}

.work-meta-container {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.work-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1.14px solid var(--color-border-secondary);
    border-radius: 10px;
    background: transparent;
    transition: border-color 0.2s ease;
}

.work-meta-item-date {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1.14px solid var(--color-border-secondary);
    border-radius: 10px;
    background: transparent;
    transition: border-color 0.2s ease;
    width: 160px; /* Fixed width instead of min-width */
}

.work-meta-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1.14px solid var(--color-border-secondary);
    border-radius: 10px;
    background: transparent;
    transition: border-color 0.2s ease;
    width: 192px; /* Fixed width instead of min-width */
}

.work-meta-item:focus-within,
.work-meta-item-date:focus-within,
.work-meta-item-link:focus-within {
    border-color: white;
}

.meta-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.calendar-icon {
    background: url('assets/icons/calendar.svg') no-repeat center;
    background-size: contain;
}

.link-icon {
    background: url('assets/icons/link.svg') no-repeat center;
    background-size: contain;
}

.work-date-input,
.work-link-input {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: 'Helvetica Now Display', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    outline: none;
    min-width: 0;
    flex: 1;
}

.work-date-input::placeholder,
.work-link-input::placeholder {
    color: var(--color-text-subtitle);
}

/* Ensure modal actions stay at bottom */
#editRecentWorksModal .modal-actions {
    margin-top: 40px;
    flex-shrink: 0;
    padding: 0 40px 40px 40px; /* Add proper padding */
}

/* ==========================================================================
   VERIFICATION MODAL STYLES
   ========================================================================== */
.verification-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.verification-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
}

.verification-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.verification-modal-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem; /* gap-10 */
    min-width: 24rem; /* w-96 = 384px */
    width: auto;
}

.verification-modal-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem; /* gap-4 */
    width: auto;
    min-width: 0;
}

.verification-modal-title {
    width: 100%;
    text-align: center;
}

.verification-modal-subtitle {
    width: auto;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

.verification-modal-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.verification-close-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.verification-close-btn > div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    line-height: 1.25rem; /* leading-5 */
}

/* Verification modal utility classes */
.h-52 {
    height: 13rem; /* 208px */
}

.p-8 {
    padding: 2rem; /* 32px */
}

.bg-Color-Text-default-disabled {
    background-color: var(--Color-Text-default-disabled, #3F3F3F);
}

.rounded-3xl {
    border-radius: 1.5rem; /* 24px */
}

.outline {
    outline-style: solid;
}

.outline-1 {
    outline-width: 1px;
}

.outline-offset-\[-1px\] {
    outline-offset: -1px;
}

.outline-Color-Text-default-disabled {
    outline-color: var(--Color-Text-default-disabled, #3F3F3F);
}

.w-96 {
    min-width: 24rem; /* 384px */
    width: auto;
}

.gap-10 {
    gap: 2.5rem; /* 40px */
}

.gap-4 {
    gap: 1rem; /* 16px */
}

.gap-5 {
    gap: 1.25rem; /* 20px */
}

.gap-2\.5 {
    gap: 0.625rem; /* 10px */
}

.h-9 {
    height: 2.25rem; /* 36px */
}

.px-4 {
    padding-left: 1rem; /* 16px */
    padding-right: 1rem;
}

.py-3 {
    padding-top: 0.75rem; /* 12px */
    padding-bottom: 0.75rem;
}

.bg-white {
    background-color: white;
}

.rounded-\[34\.21px\] {
    border-radius: 34.21px;
}

.text-Color-Text-default-action-\(button\) {
    color: var(--Color-Text-default-action-button, #000000);
}

.text-sm {
    font-size: 0.875rem; /* 14px */
}

.leading-5 {
    line-height: 1.25rem; /* 20px */
}

.text-2xl {
    font-size: 1.5rem; /* 24px */
}

.leading-8 {
    line-height: 2rem; /* 32px */
}

.font-medium {
    font-weight: 500;
}

.text-base {
    font-size: 1rem; /* 16px */
}

.leading-6 {
    line-height: 1.5rem; /* 24px */
}

[class*="font-['Helvetica_Now_Display']"] {
    font-family: 'Helvetica Now Display', sans-serif;
}

/* Mobile-specific verification modal classes */
.rounded-2xl {
    border-radius: 1rem; /* 16px */
}

.w-64 {
    width: 16rem; /* 256px */
}

.h-32 {
    height: 8rem; /* 128px */
}

.text-lg {
    font-size: 1.125rem; /* 18px */
}

.bg-Color-Surface-default-primary {
    background-color: var(--Color-Surface-background-card-bg--default, #2F2F2F);
}

.outline-Color-Border-default-primary {
    outline-color: var(--Color-Border-default-primary, #868686);
}

.px-3 {
    padding-left: 0.75rem; /* 12px */
    padding-right: 0.75rem;
}

.py-2 {
    padding-top: 0.5rem; /* 8px */
    padding-bottom: 0.5rem;
}

.gap-6 {
    gap: 1.5rem; /* 24px */
}

/* Mobile verification modal styles */
@media (max-width: 768px) {
    .verification-modal-content {
        padding: 24px !important; /* p-6 = 24px */
        border-radius: 1rem !important; /* rounded-2xl */
        height: auto !important;
    }
    
    .verification-modal-inner {
        width: 16rem !important; /* w-64 = 256px */
        min-width: 16rem !important;
        max-width: calc(100vw - 48px) !important; /* Account for padding */
        height: auto !important;
        gap: 1.25rem !important; /* gap-5 = 20px */
    }
    
    .verification-modal-text {
        gap: 0.5rem !important; /* gap-2 = 8px */
        width: 100% !important;
    }
    
    /* Title container with gap-6 */
    .verification-modal-text > div:first-child {
        gap: 1.5rem !important; /* gap-6 = 24px */
    }
    
    .verification-modal-title {
        font-size: 1.125rem !important; /* text-lg = 18px */
        line-height: 1.5rem !important; /* leading-6 = 24px */
    }
    
    .verification-modal-subtitle {
        width: 100% !important;
        min-width: 16rem !important; /* w-64 */
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    .verification-close-btn {
        padding-left: 0.75rem !important; /* px-3 */
        padding-right: 0.75rem !important;
        padding-top: 0.5rem !important; /* py-2 */
        padding-bottom: 0.5rem !important;
        background-color: white !important;
        outline-color: var(--Color-Border-default-primary, #868686) !important;
    }
}