/* ========================================
   SEARCH PAGE STYLES - Modern Design
   ======================================== */

.search-page {
    min-height: 100vh;
    background: var(--bg-secondary);
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .search-page {
        max-width: 935px;
        padding: 1rem;
    }
}

/* ========================================
   SEARCH HEADER - FIXED POSITION
   ======================================== */

.search-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    padding: 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: padding var(--transition-base);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    transition: max-width var(--transition-base);
}

/* Expand search box to full width when overlays show */
.search-header.active {
    padding: 1rem 1.5rem;
}

.search-header.active .search-box {
    max-width: 100%;
    width: 100%;
    margin: 0;
}

.search-header.active .search-input-wrapper {
    max-width: 100%;
    width: 100%;
}

/* Hide filter button when search is active for more space */
.search-header.active .filter-btn {
    display: none;
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.back-btn:hover {
    background: var(--bg-hover);
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.search-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-tertiary);
    font-size: 1.125rem;
    z-index: 1;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 3rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.clear-search-btn {
    position: absolute;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    display: none;
    font-size: 1.25rem;
}

.clear-search-btn.show {
    display: flex;
}

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

.cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.cancel-btn:hover {
    background: var(--bg-hover);
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.125rem;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.filter-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}

/* ========================================
   MAIN SEARCH CONTENT
   ======================================== */

.search-content {
    padding: 1rem;
}

@media (min-width: 768px) {
    .search-content {
        padding: 1.5rem 0;
    }
}

/* ========================================
   ADS BANNER CAROUSEL
   ======================================== */

.ads-banner-section {
    margin: 0 0 2rem 0;
    padding: 0;
}

.ads-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    height: 200px;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .ads-carousel {
        height: 280px;
    }
}

.ads-carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.ads-slide {
    min-width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

@media (min-width: 768px) {
    .ads-slide {
        height: 280px;
    }
}

.ads-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ads-indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.ads-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s;
}

.ads-indicator.active {
    width: 24px;
    border-radius: 4px;
    background: white;
}

/* ========================================
   TRENDING & SUGGESTED SECTIONS
   ======================================== */

.search-section {
    margin-bottom: 3rem;
}

.subsection {
    margin-bottom: 2rem;
}

.trending-section,
.suggested-section {
    margin-bottom: 2rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

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

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.subsection-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.see-all-btn,
.see-all-link {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    border-radius: 20px;
    transition: all var(--transition-fast);
    text-decoration: none;
    font-size: 0.9375rem;
}

.see-all-btn:hover,
.see-all-link:hover {
    background: rgba(4, 111, 173, 0.1);
    text-decoration: none;
}

/* ========================================
   TRENDING VIDEO CARDS
   ======================================== */

/* Trending video row — single scrollable row, never wraps.
 * Desktop: 4 cards visible at once.
 * Mobile:  2 cards visible at once.
 * More cards accessible by horizontal scroll.
 */
.sc-block .trending-videos-row,
.trending-videos-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 0.5rem 0;
    margin: 0;
    width: 100%;
    /* hide scrollbar but keep scrollable */
    scrollbar-width: none;
}
.sc-block .trending-videos-row::-webkit-scrollbar,
.trending-videos-row::-webkit-scrollbar {
    display: none;
}

.trending-videos-row::-webkit-scrollbar {
    height: 6px;
}

.trending-videos-row::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.trending-videos-row::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.trending-videos-row::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.trending-video-card {
    position: relative;
    /* Desktop: exactly 4 visible (3 gaps of 0.5rem between 4 cards) */
    flex: 0 0 calc((100% - 1.5rem) / 4);
    min-width: calc((100% - 1.5rem) / 4);
    max-width: calc((100% - 1.5rem) / 4);
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary);
    transition: transform var(--transition-fast);
    scroll-snap-align: start;
}

.trending-video-card:hover {
    transform: scale(1.05);
}

.trending-video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;        /* prevent inline-block gap */
    background: var(--bg-tertiary);
}

.trending-video-card .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.trending-video-card:hover .play-overlay {
    opacity: 1;
}

.trending-video-card .play-icon {
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trending-video-card .play-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--text-primary);
}

/* Mobile: exactly 2 visible (1 gap of 0.5rem between 2 cards) */
@media (max-width: 767px) {
    .trending-video-card {
        flex: 0 0 calc((100% - 0.5rem) / 2);
        min-width: calc((100% - 0.5rem) / 2);
        max-width: calc((100% - 0.5rem) / 2);
    }
}

/* ========================================
   TRENDING TAGS
   ======================================== */

.trending-tags,
.trending-list {
    display: flex;
    flex-direction: column;
}

.trending-item,
.hashtag-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0;
    text-decoration: none;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
}

.trending-item:last-child,
.hashtag-item:last-child {
    border-bottom: none;
}

.trending-item:hover,
.hashtag-item:hover {
    background: var(--bg-hover);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 8px;
}

.trending-item-content,
.hashtag-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.trending-item-title,
.hashtag-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.trending-item-count,
.hashtag-count {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.trending-item-arrow,
.account-arrow {
    color: var(--text-tertiary);
    font-size: 1.125rem;
    transition: all var(--transition-fast);
}

.trending-item:hover .trending-item-arrow,
.hashtag-item:hover .account-arrow {
    color: var(--primary);
    transform: translateX(2px);
}

/* ========================================
   PEOPLE YOU MAY KNOW
   ======================================== */

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

.person-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border-light);
    transition: all var(--transition-fast);
}

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

.person-item:hover {
    background: var(--bg-hover);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 8px;
}

.person-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

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

.person-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.125rem;
}

.person-username {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.follow-btn {
    padding: 0.5rem 1.25rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.follow-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

.follow-btn.following {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.follow-btn.following:hover {
    background: var(--error);
    color: white;
    border-color: var(--error);
}

/* ========================================
   SUGGESTED ACCOUNTS
   ======================================== */

.suggested-grid {
    display: flex;
    flex-direction: column;
}

.account-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    text-decoration: none;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
    cursor: pointer;
}

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

.account-item:hover {
    background: var(--bg-hover);
}

.account-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.account-details {
    flex: 1;
    min-width: 0;
}

.account-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.verified-badge {
    color: var(--primary);
    font-size: 0.875rem;
}

.account-username {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.account-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.connected {
    background: #22c55e;
}

.status-dot.available {
    background: #22c55e;
}

.status-dot.member {
    background: #3b82f6;
}

.account-arrow {
    color: var(--text-tertiary);
    font-size: 1.25rem;
    flex-shrink: 0;
    opacity: 0.6;
    transition: all var(--transition-fast);
}

.account-item:hover .account-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ========================================
   SEARCH OVERLAYS
   ======================================== */

.search-results-overlay,
.search-history-overlay {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 99;
    overflow-y: auto;
    display: none;
}

.search-results-overlay.show,
.search-history-overlay.show {
    display: block;
}

.search-results-content,
.search-history-content {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 80px;
}

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

.search-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.search-tab {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.search-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.search-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ========================================
   SEARCH TAB CONTENT
   ======================================== */

.search-tab-content {
    display: none;
    padding: 1rem;
    background: var(--bg-secondary);
    min-height: calc(100vh - 100px);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.search-tab-content.active {
    display: block;
}

/* ========================================
   SEARCH RESULTS ITEMS
   ======================================== */

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.search-result-item:hover {
    background: var(--bg-hover);
}

.result-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

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

.result-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.result-meta {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

.result-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}

.result-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* ========================================
   SEARCH HISTORY
   ======================================== */

.recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.recent-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.clear-all-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.clear-all-btn:hover {
    background: rgba(4, 111, 173, 0.1);
}

.recent-list {
    padding: 0;
    background: var(--bg-primary);
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.recent-item:hover {
    background: var(--bg-hover);
}

.recent-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.recent-text {
    flex: 1;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.recent-remove {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.recent-remove:hover {
    background: var(--bg-hover);
    color: var(--danger);
}

/* ========================================
   EMPTY STATES
   ======================================== */

.no-content {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-tertiary);
    font-size: 0.9375rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.empty-state p {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* ========================================
   LOADING SKELETONS
   ======================================== */

.skeleton-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-content {
    flex: 1;
}

.skeleton-line {
    height: 1rem;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.skeleton-line:last-child {
    width: 60%;
    margin-bottom: 0;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

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

/* Desktop */
@media (min-width: 1024px) {
    .search-content {
        padding: 2rem 1.5rem;
    }

    .suggested-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .account-item {
        border-bottom: none;
        border-right: 1px solid var(--border-light);
    }

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

/* Tablet */
@media (max-width: 768px) {
    .search-box {
        gap: 0.5rem;
    }

    .search-input {
        font-size: 0.9375rem;
        padding: 0.75rem 2.5rem 0.75rem 2.5rem;
    }

    .search-icon {
        left: 0.75rem;
        font-size: 1rem;
    }

    .clear-search-btn {
        right: 0.75rem;
    }

    .search-content {
        padding: 1rem 0.75rem;
    }

    /* Adjust overlay position for mobile header */
    .search-results-overlay,
    .search-history-overlay {
        top: 68px;
    }

    .section-header {
        padding: 1rem;
    }

    .section-header h2 {
        font-size: 1.125rem;
    }

    .section-title {
        font-size: 1.125rem;
    }

    .subsection-title {
        font-size: 0.9375rem;
    }

    .hashtag-item,
    .account-item,
    .trending-item,
    .person-item {
        padding: 0.875rem 1rem;
    }

    .account-avatar,
    .person-avatar {
        width: 48px;
        height: 48px;
    }

    .trending-videos-row {
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .trending-video-card {
        border-radius: 8px;
    }

    .trending-video-card .play-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .trending-video-card .play-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .search-header {
        padding: 0.75rem;
    }

    .search-box {
        gap: 0.5rem;
    }

    .back-btn,
    .cancel-btn,
    .filter-btn {
        width: 36px;
        height: 36px;
    }

    .search-input {
        font-size: 0.875rem;
        padding: 0.625rem 2rem 0.625rem 2rem;
    }

    .search-icon {
        left: 0.625rem;
        font-size: 0.9375rem;
    }

    .clear-search-btn {
        right: 0.625rem;
        font-size: 1rem;
    }

    /* Adjust overlay position for smaller mobile header */
    .search-results-overlay,
    .search-history-overlay {
        top: 60px;
    }

    .search-content {
        padding: 0.75rem 0.5rem;
    }

    .search-section {
        margin-bottom: 2rem;
    }

    .subsection {
        margin-bottom: 1.5rem;
    }

    .trending-section,
    .suggested-section {
        margin-bottom: 1rem;
    }

    .section-header {
        padding: 0.875rem;
        margin-bottom: 0;
    }

    .section-header h2 {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1rem;
    }

    .subsection-title {
        font-size: 0.875rem;
    }

    .see-all-link,
    .see-all-btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.875rem;
    }

    .hashtag-item,
    .trending-item {
        padding: 0.75rem 0.875rem;
    }

    .hashtag-name,
    .trending-item-title {
        font-size: 0.9375rem;
    }

    .hashtag-count,
    .trending-item-count {
        font-size: 0.8125rem;
    }

    .person-item {
        padding: 0.75rem 0.875rem;
        gap: 0.75rem;
    }

    .person-avatar {
        width: 40px;
        height: 40px;
    }

    .person-name {
        font-size: 0.875rem;
    }

    .person-username {
        font-size: 0.75rem;
    }

    .follow-btn {
        padding: 0.4rem 1rem;
        font-size: 0.8125rem;
    }

    .trending-videos-row {
        gap: 0.5rem;
        padding: 0.5rem 0;
        margin: 0.75rem 0;
    }

    .trending-video-card {
        border-radius: 6px;
    }

    .trending-video-card .play-icon {
        width: 2rem;
        height: 2rem;
    }

    .trending-video-card .play-icon svg {
        width: 1rem;
        height: 1rem;
    }

    .account-item {
        padding: 0.75rem 0.875rem;
        gap: 0.75rem;
    }

    .account-avatar {
        width: 44px;
        height: 44px;
    }

    .account-name {
        font-size: 0.9375rem;
    }

    .account-username {
        font-size: 0.8125rem;
    }

    .search-tabs {
        padding: 0;
    }

    .search-tab {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .search-result-item {
        padding: 0.875rem 0.75rem;
        gap: 0.875rem;
    }

    .result-avatar {
        width: 44px;
        height: 44px;
    }

    .result-name {
        font-size: 0.9375rem;
    }

    .result-meta {
        font-size: 0.8125rem;
    }

    .result-thumbnail {
        width: 56px;
        height: 56px;
    }

    .recent-header {
        padding: 0.875rem;
    }

    .recent-header h3 {
        font-size: 1rem;
    }

    .recent-item {
        padding: 0.875rem 0.75rem;
        gap: 0.875rem;
    }

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

    .recent-text {
        font-size: 0.9375rem;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .search-input,
    .search-tab,
    .search-result-item,
    .account-item,
    .hashtag-item,
    .back-btn,
    .cancel-btn,
    .clear-search-btn,
    .recent-remove,
    .clear-all-btn,
    .skeleton-avatar,
    .skeleton-line {
        transition: none;
        animation: none;
    }
}

/* Focus states for keyboard navigation */
.search-input:focus-visible,
.search-tab:focus-visible,
.search-result-item:focus-visible,
.account-item:focus-visible,
.hashtag-item:focus-visible,
.back-btn:focus-visible,
.cancel-btn:focus-visible,
.clear-search-btn:focus-visible,
.recent-remove:focus-visible,
.clear-all-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .search-input {
        border-width: 3px;
    }

    .search-tab.active {
        border-bottom-width: 4px;
    }

    .search-result-item,
    .account-item,
    .hashtag-item,
    .recent-item {
        border-width: 2px;
    }
}

/* ================================================================
   DISCOVER SEARCH — Flutter-aligned (mobile + desktop web)
   ================================================================ */

.search-page--discover {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    background: var(--bg-secondary, #f5f5f5);
}

@media (min-width: 768px) {
    .search-page--discover {
        max-width: 720px;
        padding: 0;
    }
}

.search-page--discover .search-hero {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

.search-page--discover .search-hero::before { display: none !important; }

.search-page--discover .search-hero-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 16px 8px;
}

.search-page--discover .sh-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.search-page--discover .sh-search-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-page--discover .sh-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-tertiary);
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.search-page--discover .sh-search-input {
    width: 100%;
    padding: 0.7rem 2.75rem 0.7rem 2.65rem;
    border: none;
    border-radius: 16px;
    background: var(--bg-tertiary, #e9e5e1);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    outline: none;
    box-shadow: none;
    transition: background 0.15s;
}

.search-page--discover .sh-search-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.search-page--discover .sh-search-input:focus {
    border: none;
    box-shadow: none;
    background: var(--bg-tertiary, #e9e5e1);
}

.search-page--discover .sh-clear-btn {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.2rem;
    display: none;
    z-index: 1;
}
.search-page--discover .sh-clear-btn.visible { display: flex; }

.search-page--discover .sh-tabs,
.search-page--discover .sh-titles { display: none !important; }

.search-page--discover .sc-wrap {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 16px 100px;
}

.search-page--discover .sc-section {
    margin-bottom: 8px;
}

.search-page--discover .sc-section-title {
    margin: 8px 0 12px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.search-page--discover .sc-badge,
.search-page--discover .sc-divider,
.search-page--discover .sc-section-label { display: none !important; }

.search-page--discover .sc-block {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 16px;
}
.search-page--discover .sc-block:hover { box-shadow: none; }

.search-page--discover .sc-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 10px;
}

.search-page--discover .sc-block-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.search-page--discover .sc-block-title i { display: none; }

.search-page--discover .sc-see-all {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--primary, #0a66c2);
    background: color-mix(in srgb, var(--primary, #0a66c2) 8%, transparent);
    text-decoration: none;
}
.search-page--discover .sc-see-all:hover {
    background: color-mix(in srgb, var(--primary, #0a66c2) 14%, transparent);
    text-decoration: none;
}
.search-page--discover .sc-see-all i { display: none; }

/* Horizontal video strip (Flutter 120×132) */
.search-page--discover .sc-block--videos .trending-videos-row,
.search-page--discover .sc-block .trending-videos-row,
.search-page--discover .trending-videos-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    grid-template-columns: unset !important;
    padding: 0 0 4px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.search-page--discover .trending-videos-row::-webkit-scrollbar { display: none; }

.search-page--discover .sc-block--videos .trending-video-card,
.search-page--discover .sc-block .trending-video-card,
.search-page--discover .trending-video-card {
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 132px !important;
    aspect-ratio: unset !important;
    border-radius: 10px !important;
    overflow: hidden;
    position: relative;
    background: #111;
    cursor: pointer;
    transform: none !important;
}
.search-page--discover .trending-video-card video,
.search-page--discover .trending-video-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.search-page--discover .trending-video-card .play-overlay {
    opacity: 1 !important;
    background: transparent !important;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.search-page--discover .trending-video-card .play-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.54);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Topic + people rows */
.search-page--discover .trending-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-page--discover .discover-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 14px;
    background: var(--bg-primary);
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.search-page--discover .discover-row:hover {
    background: color-mix(in srgb, var(--bg-primary) 92%, var(--primary, #0a66c2));
}

.search-page--discover .discover-row-ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary, #0a66c2) 12%, transparent);
    color: var(--primary, #0a66c2);
    font-size: 1rem;
}

.search-page--discover .discover-row-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-tertiary, #e9e5e1);
}

.search-page--discover .discover-row-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-page--discover .discover-row-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-page--discover .discover-row-title .verified-badge {
    color: var(--primary, #0a66c2);
    font-size: 0.85rem;
}

.search-page--discover .discover-row-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-page--discover .discover-row-chevron {
    color: var(--text-tertiary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.search-page--discover .discover-row-action {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--primary, #0a66c2);
    padding: 0.25rem 0.35rem;
}

.search-page--discover .discover-people-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-page--discover .discover-people-skel {
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--bg-primary) 25%, var(--bg-tertiary, #e9e5e1) 50%, var(--bg-primary) 75%);
    background-size: 200% 100%;
    animation: discoverSkel 1.4s infinite;
}
@keyframes discoverSkel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.search-page--discover .sc-row-2col {
    display: block !important;
}

.search-page--discover .people-may-know-section .section-header { display: none; }

@media (min-width: 1024px) {
    .search-page--discover .search-hero-inner,
    .search-page--discover .sc-wrap {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ========================================
   SEARCH RESULTS – POST CARDS
   Cards rendered by renderPostResults() in search.js
   ======================================== */

article.post {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 1rem 1rem 0.625rem;
    margin-bottom: 0.875rem;
    transition: box-shadow 0.18s, transform 0.18s;
    cursor: pointer;
    overflow: hidden;
}
article.post:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.09);
    transform: translateY(-1px);
}

/* ── header ── */
.post-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}
.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-light);
}
.post-author-info {
    flex: 1;
    min-width: 0;
}
.post-author-name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.post-author-name:hover { color: var(--primary); }
.post-author-name .verified-badge {
    color: var(--primary);
    font-size: 0.875rem;
}
.post-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* ── body ── */
.post-content {
    margin-bottom: 0.65rem;
}
.post-text {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.55;
    margin: 0 0 0.6rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.post-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    cursor: zoom-in;
}
.post-video-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}
.post-video {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
}
.video-controls-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    transition: background 0.15s;
}
.video-controls-overlay:hover { background: rgba(0,0,0,.38); }
.video-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    transition: transform 0.15s;
}
.video-play-btn:hover { transform: scale(1.08); }

/* ── actions row ── */
.post-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    margin-top: 0.5rem;
}
.post-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.5rem;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.post-action:hover {
    background: var(--bg-hover);
    color: var(--primary);
}
.action-count { font-size: 0.8125rem; font-weight: 500; }

/* skeleton for posts tab before results load */
.skeleton-post-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 0.875rem;
}