/*
 * ============================================================================
 * GENERATED FILE - DO NOT EDIT
 * ============================================================================
 * This file was automatically generated from: css/common.css
 * Generated at: 2025-11-03 01:48:24 UTC
 * 
 * To make changes:
 * 1. Edit the source file: static/css/common.css
 * 2. Run: python scripts/hash_static_assets_v2.py
 * 3. Or let CI regenerate during deployment
 * ============================================================================
 */

/* Common styles for the entire application */
/**
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

body {
    font-family: 'Lato', "helvetica", sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
/* Invert black SVG icons to white */
img[src$=".svg"] {
    filter: invert(1) brightness(2);
}

/* Reset filter for bottom-nav icons */
.bottom-nav img[src$=".svg"],
.nav-icon {
    filter: none;
}

/* Animation support for reduced motion preferences
   Note: This media query is duplicated in messages.css and notifications.css.
   This is acceptable for the current architecture since each CSS file can be loaded independently.
   Future: Consider consolidating into a shared base stylesheet. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Custom button variants (migrated from custom.css) */
.btn-mint {
    /*color: #fff;*/
    background-color: #48bb78;
    border-color: #48bb78;
}

.btn-mint:hover {
    /*color: #fff;*/
    background-color: #3f9e6d;
    border-color: #3f9e6d;
}

/* Reusable small avatar styles (used in message picker and elsewhere) */
.avatar-small {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.8);
}

/* App-specific styles */
.app-page {
    /* A more modern, vibrant gradient with a subtle animation */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color: #fff;
    background-attachment: fixed;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.app-container {
    max-width: 480px;
    margin: 0 auto;
    background-color: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* CSS variables used across the app (restored) */
:root {
    /* panel background used by .transparent-panel and similar elements */
    --panel-bg: rgba(20, 20, 25, 0.55);
    /* reactions / popup visuals */
    --reactions-popup-bg: rgba(20,20,20,0.95);
    --reactions-popup-color: #ffffff;
    /* subtle panel border fallback */
    --panel-border-fallback: rgba(0,0,0,0.08);
}

.top-bar {
    display: flex;
    justify-content: space-between;
    padding: 15px 25px;
    /* Increased padding */
    position: sticky;
    top: 0;
    z-index: 100;
    color: white;
    /* Make text white to stand out on gradient */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    /* Add shadow for readability */
    /* Removed background and backdrop-filter to make it transparent */
}

.content-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    padding-top: 70px;
    /* Default padding for all pages */
}

/* Home page specific padding */
body[data-page="home"] .content-area {
    padding-top: 70px;
    /* Extra padding for home header */
}

/* Alternative approach using page detection */
.app-container:has(.home-header) .content-area {
    padding-top: 0;
    /* Extra padding when home header is present */
}

.home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background-color: transparent;
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, height 0.3s ease-in-out;
    position: sticky;
    top: 0px;
    /* Height of the top-bar */
    z-index: 100;
}

.home-header.scrolled {
    padding: 8px 25px;
    /* Reduced padding */
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.home-header-left {
    display: flex;
    align-items: center;
}

.home-header-center {
    flex: 1;
    margin-left: 16px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    font-weight: 700;
    font-size: 18px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-page-body .home-header.scrolled .home-header-center {
    opacity: 1;
}

.home-logo {
    height: 120px;
    width: auto;
    transition: height 0.3s ease-in-out;
}

.home-header.scrolled .home-logo {
    height: 40px;
}

.home-title {
    font-size: 24px;
    font-weight: 700;
    /*color: white;*/
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.home-header.scrolled .home-title {
    /*color: #333;*/
    text-shadow: none;
}

.home-header-right {
    display: flex;
    align-items: center;
}

/* Header feed-toggle icons (small feather-style icons) */
.header-toggle-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    /* space between toggle and notifications */
    cursor: pointer;
}

.header-toggle-icon {
    width: 24px;
    height: 24px;
    /*color: white;*/
    opacity: 0.95; 
    transition: opacity 0.15s ease, transform 0.12s ease, width 0.12s ease, height 0.12s ease;
    margin-bottom: 3px;
}

.header-toggle-icons:hover .header-toggle-icon {
    opacity: 1;
    transform: translateY(-1px);
}

/* When the feed view is set to Expanded, increase the icon size by 50% */
.header-toggle-icons.expanded .header-toggle-icon {
    width: 36px; /* 24px * 1.5 = 36px */
    height: 36px;
    margin-bottom: 0px; /* visually align larger icon */
    transform: translateY(-2px);
}

.header-profile-link {
    text-decoration: none;
}

.header-profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-profile-avatar:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.home-logo-header {
    height: 30px;
}

.header-action-icon {
    font-size: 24px;
    /*color: #fff;*/
    text-decoration: none;
}

/* Feather Icon Styles */
.feather-icon {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.status-bar-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.status-icon {
    width: 18px;
    height: 18px;
    color: white;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    color: #999;
    transition: color 0.2s ease;
}

.nav-item:hover .nav-icon {
    /*color: #333;*/
}

.fab-icon {
    width: 28px;
    height: 28px;
    color: white;
}


.bottom-nav {
    display: flex !important;
    justify-content: space-around;
    position: sticky;
    bottom: 0;
    z-index: 100;
    height: 70px;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    /* A wider, deeper, and smoother clip-path for the curve */
    clip-path: path('M0,20 L calc(50% - 60px),20 C calc(50% - 30px),20 50%,50 50%,50 C 50%,50 calc(50% + 30px),20 calc(50% + 60px),20 L 100%,20 L 100%,70 L 0,70 Z');
    padding: 0 10px;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;
    text-decoration: none;
    font-size: 12px;
    flex: 1;
    /* Allow items to grow and shrink */
    justify-content: center;
    padding-top: 15px;
    /* Adjust padding for new curve */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:active {
    transform: scale(0.95);
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 5px;
}

.whimsy-button {
    width: 60px;
    height: 60px;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -35px;
    /* Adjust to sit perfectly in the new deeper curve */
    border: 4px solid white;
    /* White border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 0 0 60px;
    /* Explicitly set flex-grow, flex-shrink, and flex-basis */
}

.whimsy-button:hover {
    transform: scale(1.1);
}

.whimsy-button:active {
    transform: scale(1.05); /* pressed state relative to hover for smoother feel */
}

.whimsy-button img {
    width: 46px;
    /* 30% larger */
    height: 46px;
    /* 30% larger */
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.fab {
    position: fixed;
    bottom: 90px;
    /* Adjusted for new nav bar */
    right: 25px;
    width: 56px;
    /* Standard FAB size */
    height: 56px;
    background: linear-gradient(135deg, #ff6b35, #e73c7e);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    /* Slightly larger + */
    line-height: 56px;
    /* Ensure vertical centering */
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease-in-out;
}

.fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.fab:active {
    transform: translateY(-2px) scale(0.95);
}

.post-content-wrapper {
    position: relative;
}

/* Camera UI: popover for filters and countdown overlay */
.filters-popover {
    position: absolute;
    left: 50%;
    top: 12%;
    transform: translateX(-50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    padding: 12px;
    z-index: 1200;
    display: none;
    max-width: 92%;
}
.filters-popover[aria-hidden="false"] { display: block; }
.filters-popover .filters-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.filters-popover .filters-actions { margin-top: 8px; text-align: center; }
.camera-countdown {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 48px;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1250;
}
.camera-countdown[aria-hidden="false"] { display: flex; }
.camera-grid-overlay { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 33.33% 33.33%, 33.33% 33.33%; }
.filter-btn[aria-pressed="true"] { outline: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.filter-btn { border-radius: 8px; padding: 6px 8px; background: #fafafa; border: 1px solid #eee; cursor: pointer; }
.filter-btn .filter-label { display: inline-block; margin-left: 6px; font-size: 13px; }
.advanced-toggle { margin-left: 8px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #ddd; cursor: pointer; }
.advanced-toggle[aria-pressed="true"] { background: linear-gradient(90deg,#667eea,#764ba2); color: white; border-color: transparent; }
.icon-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.icon-toggle svg { width: 20px; height: 20px; }
.icon-toggle[aria-pressed="true"] { background: linear-gradient(135deg, #24bba9 0%, #667eea 100%); color: white; }
.camera-advanced-panel { 
    display: none; 
    flex-direction: column;
    gap: 8px;
    position: absolute; 
    left: 50%; 
    top: 8px; 
    transform: translateX(-50%);
    background: rgba(10,10,10,0.28); 
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 12px 16px; 
    border-radius: 14px; 
    box-shadow: 0 6px 18px rgba(0,0,0,0.45); 
    z-index: 1200; 
}
.camera-advanced-panel[aria-hidden="false"] { display: flex; }
.camera-advanced-panel .adv-row { 
    color: #fff; 
    font-size: 13px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.camera-countdown, .filters-popover { user-select: none; }

/* Disabled control look */
.camera-advanced-panel input[disabled], .camera-advanced-panel input[disabled] + label { opacity: 0.45; pointer-events: none; }

/* Inline filters row (shown when Advanced is on) */
.camera-filters-row {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 8px;
    margin-bottom: 8px;
}
.camera-filters-row .filter-btn {
    flex: 0 0 auto;
}

.post-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    position: relative;
    /* Changed from absolute to relative */
    z-index: 2;
    background: none;
    /* Removed gradient */
    /*color: #fff;*/
    /* Changed from white */
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
    border: 2px solid #fff;
}

.author-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-right: auto;
}

/* Invite code styling */
.invite-code {
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.85);
    color: #222;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    font-weight: 600;
    margin-right: 8px;
}

.invite-code.grouped {
    /* visually separate into groups of 4 with hyphens via CSS font-feature isn't trivial; we can at least increase spacing */
    letter-spacing: 0.12em;
}

.author-name {
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    /* Text shadow for readability */
}

/* (Block moved above, so these lines are now removed) */

.post-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 15px;
}

/* Move the reply button to the right of the bookmark for top-level posts only */
.post-card:not(.comment-card) .post-header-actions .bookmark-btn { order: 100; }
.post-card:not(.comment-card) .post-header-actions .reply-btn { order: 200; }
.post-card:not(.comment-card) .post-header-actions .story-book-action { order: 300; }

.action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.action-icon {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.action-btn span {
    font-size: 14px;
    font-weight: 600;
}

.send-btn-top-right {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #333;
    /* Changed from white */
    text-shadow: none;
    /* Removed text shadow */
}

.send-btn-top-right i {
    width: 22px;
    height: 22px;
}

.post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    /* Remove top radius, keep bottom */
    display: block;
}

.post-content {
    padding: 12px 15px;
}

/* Hashtag styles */
.post-hashtags,
.comment-hashtags {
    padding: 8px 15px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-hashtags-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 15px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.3));
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 1;
}

.hashtag-link {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(35, 166, 213, 0.3), rgba(231, 60, 126, 0.3));
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hashtag-link:hover {
    background: linear-gradient(135deg, rgba(35, 166, 213, 0.45), rgba(231, 60, 126, 0.45));
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(35, 166, 213, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

.post-hashtags-overlay .hashtag-link {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
}

.post-hashtags-overlay .hashtag-link:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.post-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
    padding: 20px 15px 15px 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.post-content-overlay p {
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.post-video-outer {
    position: relative;
    width: 100%;
    background-color: #000;
    border-radius: 15px;
    overflow: hidden;
    max-height: 600px; /* Limit height of uninitialized videos */
}

.post-video {
    width: 100%;
    height: auto;
    max-height: 600px; /* Prevent videos from taking full screen height */
    display: block;
    border-radius: 15px;
    background-color: #000;
    object-fit: contain; /* Maintain aspect ratio */
}

/* Hide native video OVERLAY play button on mobile to prevent duplicate play buttons
   but keep the play/pause button in the control bar at the bottom */

/* Hide the large centered overlay play button that appears before video plays */
.post-video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
}

/* Hide the overlay enclosure (the container for the centered play button) */
.post-video::-webkit-media-controls-overlay-enclosure {
    display: none !important;
}

/* Hide the start playback button overlay (iOS specific) */
.post-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/* DO NOT hide the regular play button - it's part of the control bar and should be visible
   .post-video::-webkit-media-controls-play-button - intentionally NOT hidden */

.deferred-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.deferred-play-button::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 20px solid rgba(255, 255, 255, 0.9);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 4px;
}

.deferred-play-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
    border-color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

.deferred-play-button:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Video.js player styling overrides to match Whimsy design */
.video-js {
    font-family: 'Lato', sans-serif;
}

/* Ensure Video.js player fits within our rounded containers */
.video-js .vjs-tech {
    border-radius: 15px;
}

/* Override Video.js default control bar styling to be more minimal */
.video-js .vjs-control-bar {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 0 0 15px 15px;
}

/* Hide Video.js big play button (we use our own deferred-play-button) */
.video-js .vjs-big-play-button {
    display: none !important;
}

/* Ensure control bar appears on hover/tap but is subtle */
.video-js.vjs-has-started .vjs-control-bar {
    display: flex;
}

/* Make sure video respects our container dimensions */
.post-video-outer .video-js {
    width: 100%;
    height: auto;
}

/* Video.js wraps the video element in a div, ensure the actual video element has proper dimensions */
.video-js .vjs-tech {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure the Video.js wrapper maintains aspect ratio */
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
    width: 100%;
    max-width: 100%;
    height: 0;
}

/* Override Video.js default for our posts to maintain aspect ratio */
.post-video-outer .video-js {
    width: 100%;
    padding-top: 133.33%; /* 3:4 aspect ratio (480x640) for mobile videos */
    position: relative;
}

.post-video-outer .video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Hide our custom play button once Video.js is initialized */
.videojs-initialized .deferred-play-button {
    display: none !important;
}

.post-audio-wrapper {
    padding: 12px 15px;
}

.post-audio {
    width: 100%;
    margin-top: 10px;
}

/* Shared post/feed styles (consolidated from home.css, profile.css, groups.css) */
.feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.post-card {
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 15px;
    margin-bottom: 10px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease-out;
    padding: 0;
}

.comment-indicator-bubble {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 35px;
    height: 35px;
    background-color: #424242; 
    border-radius: 25%;
    z-index: 1000;
}

.comment-indicator-bubble .comment-indicator-count {
    position: absolute;
    left: -2px;
    bottom: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    /* background: rgba(0,0,0,0.18); */
    padding: 1px 5px;
    border-radius: 6px;
    min-width: 14px;
    text-align: center;
}

.processing-post {
    opacity: 0.7;
}

.processing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    color: white;
    pointer-events: all;
}

.post-groups {
    padding: 0 15px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.group-chicklet {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 2px 5px;
    border-radius: 15px;
    font-size: 10px;
    text-decoration: none;
    transition: background-color 0.2s;
    border: 1px solid #ffffff55;
}

.group-chicklet:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.group-chicklet.selected {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.group-owner-avatar {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
    object-fit: cover;
}

/* Settings Header */
.settings-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.back-button {
    margin-right: 10px;
    color: white;
    text-decoration: none;
    /* ensure the back-button is vertically centered with the title */
    display: inline-flex;
    align-items: center;
}

.settings-header .page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1;
}

/* Ensure header chevron icon has consistent sizing and alignment */
.settings-header .back-button .feather-icon,
.settings-header .back-button img {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
}


/* Notification Dot */
.notifications-link {
    position: relative;
    margin-right: 15px;
}

.notification-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 10px;
    border: 1px solid white;
    animation: badge-pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Note: A similar keyframe exists in messages.css with translateY(-50%) compensation.
   This is intentional as the message badge needs to maintain vertical centering.
   Future: Consider using CSS custom properties to reduce duplication. */
@keyframes badge-pop-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Messages Dot */
.messages-link {
    position: relative;
    margin-right: 15px;
}

.messages-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 10px;
    border: 1px solid white;
}

/* Friend Requests */
.friend-requests {
    margin-bottom: 30px;
}

.user-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 15px;
    border-radius: 10px;
}

.friend-request-actions {
    display: flex;
    gap: 10px;
}

.button-primary {
    padding: 8px 15px;
    border: none;
    border-radius: 8px;
    color: white;
    background-color: #23a6d5;
    cursor: pointer;
    transition: background-color 0.2s;
}

.button-primary:hover {
    background-color: #1f90b5;
}

.button-secondary {
    padding: 8px 15px;
    border: none;
    border-radius: 8px;
    color: #333;
    background-color: #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.button-secondary:hover {
    background-color: #d0d0d0;
}

/* Small circular icon-only button used across the app for compact actions */
.icon-button {
    /* Rounded rectangle, wider than tall to fit icon comfortably */
    width: 80px; /* ~2x wider than original */
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: none;
    background: linear-gradient(135deg, #24bba9 0%, #667eea 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(102,126,234,0.10), 0 2px 6px rgba(0,0,0,0.12);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.12s ease, opacity 0.12s ease;
}
.icon-button img {
    width: 18px;
    height: 18px;
    display: block;
}
.icon-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(102,126,234,0.16), 0 6px 18px rgba(0,0,0,0.14);
}
.icon-button:active {
    transform: scale(0.95);
}
.icon-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(119,188,182,0.16), 0 6px 18px rgba(0,0,0,0.12);
}

/* Form Styles */

.form-title {
    color: #e4e4e4;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* Utility helper: used across templates to hide elements */
.hidden { display: none !important; }

/* Moderation model marketplace row: select on the left, button on the right */
.model-marketplace-row {
    display: flex;
    gap: 12px;
    align-items: center;
    /* Keep items on one line where possible and allow children to shrink */
    flex-wrap: nowrap;
}
.model-marketplace-select {
    /* Allow the select to grow and shrink as needed; min-width:0 lets it shrink below its content's intrinsic width
       (important inside a flex container) */
    flex: 1 1 auto;
    min-width: 0;
}
.model-marketplace-action {
    /* Don't force a large fixed basis for the action area; keep the button its intrinsic size */
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}
.model-marketplace-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    white-space: nowrap;
    /* Use app greens and purples for a distinct, cohesive gradient */
    color: #ffffff;
    /* Option B: Green -> Mint -> Purple (distinct from Save) */
    background: linear-gradient(135deg, #24bba9 0%, #77bcb6 55%, #667eea 100%);
    border: none;
    /* softer, tinted shadow matching the green/purple palette */
    box-shadow: 0 8px 22px rgba(102,126,234,0.10), 0 2px 6px rgba(0,0,0,0.12);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    text-decoration: none;
}

.model-marketplace-btn:hover,
.model-marketplace-btn:focus {
    transform: translateY(-2px);
    /* hover gets a slightly stronger purple/green tint */
    box-shadow: 0 14px 36px rgba(102,126,234,0.16), 0 6px 18px rgba(0,0,0,0.14);
    opacity: 0.98;
}

.model-marketplace-btn:active {
    transform: translateY(0) scale(0.995);
}

.model-marketplace-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(119,188,182,0.16), 0 6px 18px rgba(0,0,0,0.12);
}

/* Only stack the select and button on very small screens; let them remain inline on narrow phones */
@media (max-width: 420px) {
    .model-marketplace-row {
        flex-direction: column;
        align-items: stretch;
    }
    .model-marketplace-action {
        justify-content: flex-start;
    }

    /* When stacked, make the action area and button take the full width like the select */
    .model-marketplace-action {
        width: 100%;
    }
    .model-marketplace-action .model-marketplace-btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

/* About page helpers */
.help-about-content {
    color: white;
    text-align: left;
}
.help-about-value {
    background: transparent;
    box-shadow: none;
    padding: 8px 12px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-decoration: underline #a7ffe5 2px;
}

.form-help {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 15px 20px;
    border-radius: 12px;
    border: none;
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 16px;
    backdrop-filter: blur(10px);
    outline: none;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

    /* Integrations list styling */
    .integration-list .integration-items {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .integration-list .integration-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        background: rgba(255,255,255,0.04);
        border-radius: 10px;
    }
    .integration-list .integration-item .integration-name {
        flex: 1;
        color: white;
        font-weight: 600;
    }

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.form-control:focus {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Make native <select> controls more readable on the light dropdown UI
   Keep text for regular inputs white, but force selects and their options
   to use a dark text color and a near-opaque background so options are
   always legible. Also raise stacking context to avoid clipping inside
   scrolling containers. */
select.form-control {
    /* Match the username/input styling: translucent white background and white text */
    color: white;
    background-color: rgba(255, 255, 255, 0.25);
    -webkit-appearance: menulist-button;
    appearance: auto;
    /* Do not force z-index/position: let the browser render native dropdown in the usual place.
       If ancestor transforms/overflow still clip the popup, we should instead remove those
       transforms or allow overflow visible on the ancestor (already applied to settings page). */
}

select.form-control:focus {
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
    color: #1c1e21;
}

/* Native option styling is limited, but setting color/background helps
   in most browsers so unselected options are readable against white. */
select.form-control option {
    color: #1c1e21;
    background-color: #fff;
}

/* Custom replacement for native select when native dropdown placement is unreliable */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 15px 20px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.custom-select-trigger .caret {
    width: 18px;
    height: 18px;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
}

.custom-select.open .custom-select-trigger .caret {
    transform: rotate(180deg);
}

.custom-select-options {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 2000;
    list-style: none;
    padding: 6px 0;
    max-height: 220px;
    overflow-y: auto;
    display: none;
}

.custom-select.open .custom-select-options {
    display: block;
}

.custom-select-options li {
    padding: 8px 12px;
    color: #1c1e21;
    cursor: pointer;
}

.custom-select-options li:hover,
.custom-select-options li[aria-selected="true"] {
    background: #f0f2f5;
}

.friend-selection-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px;
    max-height: 200px;
    overflow-y: auto;
}

.friend-selection-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.friend-selection-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.form-check-input {
    width: 1.3em;
    height: 1.3em;
    margin-top: 0;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    border-radius: 0.35em;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #77bcb6;
    border-color: #77bcb6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-label {
    color: white;
    cursor: pointer;
}

/* Toggle switch (keeps the native checkbox in DOM for form/JS compatibility) */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.switch input.form-check-input {
    /* visually hide the native checkbox but keep it accessible */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.switch .slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    transition: background-color 0.18s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.switch .slider::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.18s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.switch input.form-check-input:checked+.slider {
    background-color: #77bcb6;
    /* primary accent */
}

.switch input.form-check-input:checked+.slider::after {
    transform: translateX(20px);
}

.switch:focus-within .slider {
    box-shadow: 0 0 0 3px rgba(119, 188, 182, 0.12);
}

/* Radio slider for moderation level */
.moderation-slider {
    width: 100%;
    margin: 12px 0 20px;
}
.moderation-slider .slider-track {
    position: relative;
    height: 64px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    padding: 8px 12px 18px; /* extra bottom padding to make room for the line under labels */
}
.moderation-slider .slider-fill {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px; /* place the colored line under the labels */
    height: 4px;
    background: linear-gradient(90deg, #77bcb6, rgba(119,188,182,0.6));
    border-radius: 4px;
    z-index: 1;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), background-color 180ms ease;
}
.moderation-slider .slider-steps {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0 8px;
    width: 100%;
    z-index: 2;
}
.moderation-slider .slider-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}
.moderation-slider .slider-step:focus {
    outline: none;
}
.moderation-slider .slider-step:focus-visible {
    box-shadow: 0 0 0 4px rgba(119,188,182,0.14);
    border-radius: 8px;
}
.moderation-slider .slider-handle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.95);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    margin-bottom: 8px;
    margin-top: 4px;
}
.moderation-slider .slider-step.active .slider-handle {
    background: #77bcb6;
    border-color: #77bcb6;
    transform: translateY(-2px);
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), background-color 180ms ease;
    /* subtle darker-green outline for the selected handle */
    box-shadow: 0 0 0 4px rgba(12,110,90,0.12), 0 6px 16px rgba(0,0,0,0.12);
}

/* keyboard focus ring on the handle when its step is focused */
.moderation-slider .slider-step:focus-visible .slider-handle {
    box-shadow: 0 0 0 4px rgba(12,110,90,0.16), 0 6px 16px rgba(0,0,0,0.12);
}
.moderation-slider .slider-label {
    color: white;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    margin-top: 2px; /* small gap above the colored line */
}
.sr-only { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Ensure the Auto Fix label text is visible on the report page */
.bug-report-form .switch span {
    color: white;
}

.btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 2px solid transparent;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 12px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
    text-decoration: none;
}

.btn:active {
    transform: scale(0.95);
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #ff6b35, #e73c7e);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.btn-primary:active {
    transform: scale(0.95);
}

/* Danger button style (used for destructive actions like Remove Friend) */
.btn-danger {
    color: #fff;
    background: linear-gradient(135deg, #ff6b35 0%, #e73c7e 100%);
    /* slightly stronger red/orange feel for destructive actions */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    border: none;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.btn-danger:active {
    transform: scale(0.95);
}

/* Stronger override for the Model Marketplace link when it also has .btn-primary
   (some templates add .btn-primary for sizing/semantics). This selector is
   intentionally specific and placed after .btn-primary so it wins the cascade. */
.btn.btn-primary.model-marketplace-btn,
a.btn.btn-primary.model-marketplace-btn {
    color: #fff;
    background: linear-gradient(135deg, #24bba9 0%, #77bcb6 55%, #667eea 100%);
    box-shadow: 0 8px 22px rgba(102,126,234,0.10), 0 2px 6px rgba(0,0,0,0.12);
    border: none;
}
.btn.btn-primary.model-marketplace-btn:hover,
a.btn.btn-primary.model-marketplace-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(102,126,234,0.16), 0 6px 18px rgba(0,0,0,0.14);
    opacity: 0.98;
}
.btn.btn-primary.model-marketplace-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(119,188,182,0.16), 0 6px 18px rgba(0,0,0,0.12);
}

.invalid-feedback {
    color: #f8d7da;
    background-color: rgba(231, 76, 60, 0.5);
    border: 1px solid rgba(231, 76, 60, 0.7);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 8px;
    font-size: 14px;
}

.author-link.seen .author-name {
    color: #24bba9;
}

.post-type-btn span {
    font-size: 12px;
    font-weight: 500;
}

.form-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.post-textarea {
    width: 100%;
    flex-grow: 1;
    padding: 15px;
    border-radius: 12px;
    border: none;
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 16px;
    backdrop-filter: blur(10px);
    outline: none;
    box-sizing: border-box;
    resize: none;
    margin-bottom: 20px;
}

.post-textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.media-upload-area {
    border: 2px dashed rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: background-color 0.2s ease;
    position: relative;
}

.media-upload-area:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.media-upload-label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.media-upload-label .feather-icon {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
}

.media-file-input {
    display: none;
}

.file-name-display {
    margin-top: 15px;
    color: white;
    font-size: 14px;
    font-style: italic;
}

.media-upload-options {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-secondary {
    background-color: #77bcb6;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-secondary .feather-icon {
    stroke: white;
}

/* Camera Modal Styles */
.camera-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.camera-container {
    position: relative;
    width: 90%;
    max-width: 600px;
    background: black;
    border-radius: 15px;
    overflow: hidden;
}

/* Shared camera controls and shutter styles moved from new_post.css so both
   new post and comment modal share the same visuals. */
.camera-controls-container {
    position: absolute;
    /* horizontally center the controls box; we'll animate translateY for slide-up */
    transform: translateX(-50%) translateY(0);
    bottom: 18px;
    left: 50%;
    display: flex;
    flex-direction: column; /* stack filters above control row */
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(10,10,10,0.28);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45); /* small drop shadow */
    z-index: 1215; /* sit above letterbox overlays */
    margin-bottom: 25px;
}

/* Top row: simple camera filters (toggle-on/off) shown above the main controls */
.camera-filters-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    /* Wrap into two compact rows so all filters fit without horizontal scroll */
    flex-wrap: wrap;
    max-width: 360px; /* constrain width so wrapping occurs on small viewports */
    padding-bottom: 0;
}
.camera-filters-row .filter-btn {
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 13px;
    cursor: pointer;
    transition: background 160ms ease, transform 120ms ease, box-shadow 120ms ease;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
    min-width: 72px; /* maintain touch target */
}
.camera-filters-row .filter-btn:hover { background: rgba(255,255,255,0.08); }
.camera-filters-row .filter-btn[aria-pressed="true"], .camera-filters-row .filter-btn.active {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    /* Clear visual selected state: strong white outline and no elevation transform */
    outline: 2px solid rgba(255,255,255,0.95);
    outline-offset: 4px;
    transform: none !important;
}
.camera-filters-row .filter-icon {
    width: 14px; height: 14px; display:inline-block; flex:0 0 14px;
    opacity: 0.95;
}

/* Small badge shown on captured preview thumbnails indicating active filter */
.filter-badge {
    /* base styling only; positioning applied when inside a preview container */
    background: rgba(0,0,0,0.45);
    color: white;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    z-index: 1300;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.image-preview-container, .photo-preview { position: relative; }
.image-preview-container .filter-badge,
.photo-preview + .filter-badge { position: absolute; top: 8px; left: 8px; }
.filter-badge img { width: 18px; height: 18px; display: block; }

/* Filters now wrap into two rows; no horizontal scrolling or gradient hints */

/* small visual smoothing when filters toggle on the video element */
#fullscreen-camera-view video#camera-stream,
#camera-stream-comment,
#camera-stream {
    transition: filter 220ms ease, transform 220ms ease;
}

.camera-controls-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Filters popover (small panel that holds filter choices) */
.filters-popover {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    display: none;
    z-index: 1400;
    min-width: 260px;
}
.filters-popover .filters-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.filters-popover .filters-actions { margin-top: 8px; text-align: center; }

/* Advanced panel shown when Advanced mode is toggled - moved to earlier in file, this duplicate removed */
.advanced-toggle { background: rgba(255,255,255,0.04); color: #fff; border: 1px solid rgba(255,255,255,0.06); padding: 6px 8px; border-radius: 8px; }

/* Camera grid overlay (rule of thirds) */
.camera-grid-overlay, #camera-grid-overlay-comment {
    position: absolute; inset: 0; pointer-events: none; z-index: 1350;
    background-image: linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: calc(100%/3) 100%, 100% calc(100%/3);
}

/* slider removed from camera UI */

/* Mobile: reduce spacing and collapse filter row behind a toggle */
@media (max-width: 480px) {
    .camera-controls-container {
        bottom: 12px;
        padding: 6px 8px;
        border-radius: 12px;
    }
    .camera-filters-row {
        /* Keep filters hidden by default on mobile; use the filters toggle to reveal them.
           This prevents an unexpected inline variant appearing when the Advanced panel
           isn't toggled and keeps the UI consistent across devices. */
        display: none;
        gap: 6px;
        margin-bottom: 6px;
    }
    .camera-filters-row .filter-btn { padding: 6px 8px; font-size: 12px; }
    .filter-badge { top: 6px; left: 6px; padding: 4px 6px; }
    .camera-controls-row { gap: 8px; }
    .shutter-btn { width: 72px; height: 72px; border-width: 5px; }

    /* Filters toggle button shown only on small screens */
    .filters-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255,255,255,0.04);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.06);
        cursor: pointer;
        margin-bottom: 6px;
    }

    /* when toggled, show filters stacked vertically inside the container */
    .camera-controls-container.has-filters-open .camera-filters-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
}

/* Additional mobile tweaks specifically for the fullscreen camera view so controls
   never sit half-offscreen on small devices (accounts for safe-area insets and
   allows the control row to wrap). */
@media (max-width: 480px) {
    #fullscreen-camera-view .camera-controls-container {
        /* Keep centered but constrain width so buttons wrap instead of overflowing */
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100% - 28px);
        padding: 8px 10px;
        /* raise controls higher off the bottom so the shutter is fully visible */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 18vh);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
    }

    #fullscreen-camera-view .camera-controls-row {
        /* Keep the main control row on a single line to avoid the shutter dropping
           to a second row on narrow viewports. Reduce gaps slightly so controls
           fit comfortably. */
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: center;
        align-items: center;
        /* Ensure children don't force wrapping by taking full width */
        width: 100%;
    }

    /* Keep individual buttons compact and prevent them from growing to fill the row */
    #fullscreen-camera-view .camera-controls-row > button,
    #fullscreen-camera-view .camera-controls-row > .photo-preview,
    #fullscreen-camera-view .camera-controls-row > .use-photo-btn {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Allow inline filters to show as a centered, wrapped row when opened */
    #fullscreen-camera-view .camera-filters-row {
        max-width: calc(100% - 40px);
        display: flex !important;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Slightly reduce shutter size on constrained phones so it fits with other controls */
    #fullscreen-camera-view .shutter-btn {
        width: 68px;
        height: 68px;
    }

    /* Make sure the floating cancel FAB respects safe-area and sits fully on screen */
    #fullscreen-camera-view .camera-cancel-fab {
        position: absolute;
        top: calc(env(safe-area-inset-top, 8px) + 8px);
        right: calc(env(safe-area-inset-right, 8px) + 8px);
        z-index: 100005;
    }

    /* Ensure letterbox overlays remain behind controls */
    #fullscreen-camera-view .letterbox-overlay {
        z-index: 1000;
    }
}

/* Desktop: hide the filters toggle button */
.filters-toggle-btn { display: none; }

/* Place the status pill on the left and controls to the right using flex order.
    Swap the shutter and the fit/fullscreen toggle visually by ordering the
    fit toggle just after cancel and the shutter after it. */
.camera-controls-row .camera-status { order: 1; margin-left: 0; margin-right: 8px; }
.camera-controls-row #cancel-camera-btn { order: 2; }
.camera-controls-row #fit-toggle-btn { order: 3; }
.camera-controls-row .shutter-btn { order: 4; }
.camera-controls-row button[id^="start-record"],
.camera-controls-row button[id^="stop-record"],
.camera-controls-row .use-photo-btn,
.camera-controls-row .photo-preview { order: 5; }

/* Large circular shutter button with subtle idle pulse */
/* Shutter button styling moved to later in file - this duplicate removed */

/* Small visible status pill next to shutter and a busy state for shutter */
.camera-status {
    margin-left: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    min-width: 74px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.camera-status .camera-mode-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    flex: 0 0 14px;
    border-radius: 3px;
    background: rgba(255,255,255,0.12);
    mask-size: cover;
}
.camera-mode-icon {
    transition: transform 180ms ease, opacity 200ms ease, filter 200ms ease, background-color 120ms ease;
}
.camera-mode-icon.mode-image {
    background-image: url('/static/icons/mode-image.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.camera-mode-icon.mode-video {
    background-image: url('/static/icons/mode-video.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.camera-mode-icon.mode-audio {
    background-image: url('/static/icons/mode-audio.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.camera-status .camera-status-text { display: inline-block; }
.camera-status::before {
    /* fallback decorative dot (kept for older browsers) */
    content: '\25CF';
    font-size: 10px;
    color: #4caf50; /* green dot for ready */
}
.camera-status.busy::before { color: #f59e0b; } /* amber when busy/processing */
.camera-status.error::before { color: #ef4444; } /* red on error */

.shutter-busy { animation-play-state: paused !important; transform: scale(0.98) !important; opacity: 0.95; }

/* Letterbox overlay bars to make 'Fit' mode feel intentional */
.letterbox-overlay {
    position: fixed;
    left: 0;
    right: 0;
    height: 12%;
    background: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.65));
    z-index: 1000; /* ensure overlays sit under camera controls */
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 300ms cubic-bezier(.2,.9,.2,1), transform 300ms cubic-bezier(.2,.9,.2,1);
}
.letterbox-overlay.visible { opacity: 1; transform: translateY(0); }
.letterbox-overlay#letterbox-top { top: 0; }
.letterbox-overlay#letterbox-bottom { bottom: 0; transform: translateY(6px); }
.letterbox-overlay#letterbox-bottom.visible { transform: translateY(0); }

/* Fit/Fill toggle button in camera controls */
#fit-toggle-btn {
    display: none; /* shown when camera active */
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.38);
    color: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.06);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, transform 120ms ease;
}

/* Fullscreen camera view used by the New Post page */
#fullscreen-camera-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 1100;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

#fullscreen-camera-view video#camera-stream {
    width: 100%;
    height: 100%;
    object-fit: contain; /* preserve aspect ratio and show letterboxing */
    object-position: center center;
    background-color: #000;
}

/* On narrow viewports prefer cover so the camera preview fills the screen and
   avoids visible letterboxing on phones (camera UI overlays remain centered). */
@media (max-width: 600px) {
    #fullscreen-camera-view video#camera-stream {
        object-fit: cover;
    }
}

/* When inside the fullscreen view, nudge the controls closer to bottom
   but keep them above the bottom navigation and overlays */
#fullscreen-camera-view .camera-controls-container {
    bottom: 46px; /* half of previous offset so controls are closer to bottom nav */
    padding: 10px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    z-index: 1225;
    /* start slightly translated down and invisible; we'll toggle .controls-visible to animate up */
    transform: translateX(-50%) translateY(12px);
    opacity: 0;
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
}

/* Make sure the fullscreen view truly covers the device viewport on phones.
   Some mobile browsers create containing blocks for fixed elements when ancestors
   have transforms/filters; add !important fallbacks to ensure full coverage. */
#fullscreen-camera-view {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2000 !important;
}

/* When camera preview is active, prevent page scrolling and hide scrollbars */
body.camera-preview-active {
    overflow: hidden !important;
    touch-action: none !important;
}
/* Also hide scrollbars across browsers when preview active */
body.camera-preview-active::-webkit-scrollbar { display: none; }
html.body.camera-preview-active { scrollbar-width: none; }

/* On narrow viewports prefer cover so the camera preview fills the screen */
@media (max-width: 600px) {
    #fullscreen-camera-view video#camera-stream {
        object-fit: cover;
    }
}

/* Filters visibility rules: hide inline filters by default, show on desktop
   or only when controls are visible / when the filters toggle has been used. */
.camera-controls-container .camera-filters-row { display: none; }
@media (min-width: 601px) {
    /* Desktop/tablet: show filters inline by default */
    .camera-controls-container .camera-filters-row { display: flex; }
}
/* If the container has the has-filters-open modifier or controls-visible (set by JS), show filters */
.camera-controls-container.has-filters-open .camera-filters-row,
#fullscreen-camera-view .camera-controls-container.controls-visible .camera-filters-row {
    display: flex !important;
}

#fullscreen-camera-view .camera-controls-container.controls-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* General controls-visible state for containers not inside fullscreen */
.camera-controls-container.controls-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
#fit-toggle-btn svg { width: 18px; height: 18px; }
#fit-toggle-btn:hover { background: rgba(0,0,0,0.5); transform: translateY(-1px); }
#fit-toggle-btn[aria-pressed="true"] { background: linear-gradient(135deg, #24bba9 0%, #667eea 100%); color: white; }

/* Make advanced toggle visually match the Fit/Fill toggle */
#advanced-toggle-btn, #advanced-toggle-btn-comment {
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.38);
    color: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 120ms ease, transform 120ms ease;
}
#advanced-toggle-btn svg, #advanced-toggle-btn-comment svg { width: 18px; height: 18px; }
#advanced-toggle-btn:hover, #advanced-toggle-btn-comment:hover { background: rgba(0,0,0,0.5); transform: translateY(-1px); }
#advanced-toggle-btn[aria-pressed="true"], #advanced-toggle-btn-comment[aria-pressed="true"] { background: linear-gradient(135deg, #24bba9 0%, #667eea 100%); color: white; }


#camera-stream-comment,
#camera-stream {
    width: 100%;
    display: block;
}

.camera-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.28);
    backdrop-filter: blur(6px) saturate(120%);
    box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

.shutter-btn {
    position: relative;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: url('/static/images/shutter-btn.png') center center / cover no-repeat;
    border: none;
    box-shadow: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms ease, opacity 120ms ease;
    margin-left: 5pxs;
}
.shutter-btn:active { transform: scale(0.96); opacity: 0.9; }

/* Fit toggle small icon in comment modal */
#fit-toggle-btn-comment, #fit-toggle-btn {
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.photo-preview {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    border: 2px solid #fff;
    position: absolute;
    left: 20px;
    bottom: 20px;
}

/* Share dropdown styles */
.share-wrapper {
    position: relative;
    /* This is to temporarily hide the share sheet.  We will want to implement
       this more robustly in the future, but for now we want to leave it hidden.
       Do not remove the share-wrapper or the implementation in the html, however */
    display: none;
}

.header-share-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 36px;
    background: white;
    color: #333;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    z-index: 1200;
    padding: 8px 0;
}

.header-share-dropdown.open {
    display: block;
}

.header-share-dropdown .share-option {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
}

.header-share-dropdown .share-option:hover {
    background: #f5f5f5;
}

.use-photo-btn {
    position: absolute;
    right: 20px;
    bottom: 25px;
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.close-camera-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.close-camera-btn .feather-icon {
    stroke: white;
    width: 24px;
    height: 24px;
}

/* Floating green cancel button used in camera views */
.camera-cancel-fab {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1300;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #23a6d5 0%, #24bba9 100%); /* app green/cyan -> mint */
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 10px 30px rgba(36,187,169,0.18), 0 4px 12px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.camera-cancel-fab:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(36,187,169,0.22); }
.camera-cancel-fab .feather-icon { stroke: white; width: 18px; height: 18px; }

/* Duplicate shutter-btn rule removed - see line ~1806 for main definition */
.shutter-btn { z-index: 1220; margin-left: 5px; }
.shutter-btn:focus-visible { outline: none; box-shadow: 0 0 0 8px rgba(102,126,234,0.16); }

/* Loading Modal Overlay - Proper positioning */
#loading-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 9999 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Loading Modal Styles - Modern design - High specificity selectors */
.loading-overlay .loading-dialog,
div.loading-overlay div.loading-dialog {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 30px 25px !important;
    margin: 20px !important;
    max-width: 350px !important;
    min-width: 320px !important;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 10px 25px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    text-align: center !important;
    position: relative !important;
    color: #e74c3c !important;
}

.loading-overlay .loading-header,
div.loading-overlay div.loading-header {
    margin-bottom: 20px !important;
}

.loading-overlay .loading-title,
div.loading-overlay div.loading-title {
    color: #2c3e50 !important;
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.loading-overlay .loading-body,
div.loading-overlay div.loading-body {
    margin-bottom: 25px !important;
    line-height: 1.6 !important;
}

.loading-overlay .loading-body p,
div.loading-overlay div.loading-body p {
    margin: 15px 0 0 0 !important;
    font-size: 15px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.loading-overlay .loading-spinner,
div.loading-overlay div.loading-spinner {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid transparent !important;
    border-radius: 50% !important;
    position: relative !important;
    margin: 0 auto 15px !important;
    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite !important;
}

.loading-overlay .loading-spinner::before,
div.loading-overlay div.loading-spinner::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top: 3px solid transparent !important;
    background: linear-gradient(45deg, #ff6b35, #e73c7e, #667eea, #764ba2) !important;
    background-size: 200% 200% !important;
    animation: gradient-spin 1.5s ease infinite !important;
    z-index: -1 !important;
}

.loading-overlay .loading-spinner::after,
div.loading-overlay div.loading-spinner::after {
    content: '' !important;
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)) !important;
    border-radius: 50% !important;
}

.loading-overlay .loading-footer,
div.loading-overlay div.loading-footer {
    text-align: center !important;
    margin-top: 10px !important;
}

.loading-overlay .loading-cancel-btn,
div.loading-overlay div.loading-cancel-btn {
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

.loading-overlay .loading-cancel-btn::before,
div.loading-overlay div.loading-cancel-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.6s !important;
}

.loading-overlay .loading-cancel-btn:hover,
div.loading-overlay div.loading-cancel-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
    background: linear-gradient(135deg, #7c8ef0, #8b5fb8) !important;
}

.loading-overlay .loading-cancel-btn:hover::before,
div.loading-overlay div.loading-cancel-btn:hover::before {
    left: 100% !important;
}

.loading-overlay .loading-cancel-btn:active,
div.loading-overlay div.loading-cancel-btn:active {
    transform: translateY(0px) !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gradient-spin {
    0% {
        background-position: 0% 50%;
        transform: rotate(0deg);
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
        transform: rotate(360deg);
    }
}

/* Image container for sharing */
.image-container {
    position: relative;
}

.image-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    /* use individual action pills for symmetry instead of a single container background */
    padding: 0;
    border-radius: 6px;
    align-items: center;
    transition: right 0.3s ease;
}

/* Removed 35px shift - no longer needed since controls are hidden initially */

.image-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 0;
    opacity: 0.25;
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.image-actions a:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.image-actions a .feather-icon {
    width: 18px;
    height: 18px;
    color: #333;
}

.share-dropdown {
    position: absolute;
    top: 45px;
    /* Adjust as needed */
    right: 10px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 100;
    width: 200px;
}

.share-dropdown a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #1c1e21;
    font-size: 0.9rem;
}

.share-dropdown a:hover {
    background-color: #f0f2f5;
}

/* Disabled (readable but not clickable) share option style
   Applied via JS by adding the `disabled-share` class to the share option element
   Keeps text contrast but signals disabled state and prevents pointer interactions. */
.share-option.disabled-share,
.share-dropdown a.disabled-share {
    opacity: 0.55;
    /* slightly faded but readable */
    pointer-events: none;
    /* not clickable */
    cursor: not-allowed;
    color: #555 !important;
    /* ensure text isn't too faint */
}

/* If keyboard navigation still focuses, make sure it's clear it's disabled */
.share-option.disabled-share:focus,
.share-dropdown a.disabled-share:focus {
    outline: none;
    box-shadow: none;
}

/* Hashtag search page styles */
.hashtag-search-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.hashtag-search-page .page-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 30px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 15px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.hashtag-search-page .page-header h1 {
    margin: 0 0 10px 0;
    font-size: 2em;
    font-weight: 700;
    color: #333;
}

.hashtag-display {
    color: #667eea;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.search-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.95em;
}

.hashtag-search-page .empty-state {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    margin: 30px 0;
}

.empty-state-icon {
    margin-bottom: 20px;
    opacity: 0.5;
}

.hashtag-search-page .empty-state h2 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.5em;
}

.hashtag-search-page .empty-state p {
    color: #666;
    margin: 8px 0;
    font-size: 1em;
}

.empty-state-hint {
    font-size: 0.9em !important;
    color: #888 !important;
    font-style: italic;
}

.hashtag-posts,
.hashtag-comments {
    margin-bottom: 40px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3em;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.section-icon {
    width: 24px;
    height: 24px;
    color: #667eea;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 14px;
    font-size: 0.75em;
    font-weight: 600;
}

.posts-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comment-result-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
    padding: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comment-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}

.comment-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.comment-result-header .author-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #333;
}

.comment-result-header .author-name {
    font-weight: 600;
    font-size: 0.95em;
}

.comment-time {
    font-size: 0.85em;
    color: #888;
}

.comment-result-content {
    margin: 12px 0;
    color: #444;
    line-height: 1.5;
}

.comment-result-content p {
    margin: 0;
}

.comment-result-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.view-post-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667eea;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: color 0.2s ease;
}

.view-post-link:hover {
    color: #764ba2;
}

.view-post-link .feather-icon {
    width: 16px;
    height: 16px;
}

/* Hashtag preview while typing in textarea */
.hashtag-preview {
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    display: none;
}

.hashtag-preview small {
    color: #666;
    font-size: 0.9em;
    font-weight: 600;
}

.hashtag-preview-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 3px 8px;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85em;
}

/* Bookmark button styles */
.bookmark-btn {
    position: relative;
    transition: transform 0.2s ease;
}

.bookmark-btn:hover {
    transform: scale(1.1);
}

.bookmark-icon {
    fill: none;
    stroke: currentColor;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.bookmark-btn.bookmarked .bookmark-icon {
    fill: #ffd700;
    stroke: #ffd700;
}

/* Bookmarks page styles */
.bookmarks-page {
    max-width: 600px;
    margin: 0 auto;
}

.bookmarks-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 20px 0 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.bookmarks-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #333;
}

.bookmarks-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.bookmarks-empty p {
    font-size: 16px;
    margin: 12px 0;
}

.bookmarks-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bookmarks-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 20px 0;
}

.bookmarks-pagination a,
.bookmarks-pagination button {
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease;
}

.bookmarks-pagination a:hover,
.bookmarks-pagination button:hover {
    background: #764ba2;
}

.bookmarks-pagination .disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.bookmarks-pagination .page-info {
    font-size: 14px;
    color: #666;
    min-width: 40px;
}

/* Defensive: hide message reactions container when there are no reactions.
   Some code paths can leave an empty .message-reactions element in the DOM
   (or with .has-reactions present when all counts are zero). Ensure it
   takes no space and is invisible unless explicitly marked with
   .has-reactions and has visible counts. */
.message-reactions:not(.has-reactions) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    /* transform: translate(0px, -70%); */
}

/* Hide legacy inline preset buttons everywhere; reactions should come from
   the popup UI. Keep this rule specific so other uses of .reaction-presets
   aren't accidentally affected in unrelated components. */
.reaction-presets {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* When the popup is open we add .reactions-hidden to the message container
   to hide inline reaction UI; enforce that here so transient states can't
   reveal fragments. */
.message-item.reactions-hidden .reaction-buttons,
.message-item.reactions-hidden .reaction-presets {
    display: none !important;
    visibility: hidden !important;
}