/*
==========================================================================
  Interactive Component Styles
==========================================================================
*/

/* Common Variables or :root settings (if any specific to interactive components) */
/* :root { ... existing root variables ... } */

/*
==========================================================================
  Component: Chat Interface (Simulated)
==========================================================================
*/

/* --- Main Wrapper --- */
.chat-component-wrapper { /* Wrapper div added in PHP */
    width: 100%;
    height: 100%; 
    display: flex; 
    flex-direction: column;
}

.chat-interface { 
    width: 100%;
    flex-grow: 1; /* Grow to fill .chat-component-wrapper */
    background-color: #070D11; 
    /* height: var(--component-container-height, 480px); /* This was likely too much if wrapper is 100% of content-image */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #B0B3B8; 
    font-size: 14px; 
}

/* Header (Currently hidden in this version) */
.right-content .chat-interface .chat-header {
    display: none; 
}

/* Container for the list of messages */
.right-content .chat-messages {
    flex-grow: 1; /* Take available vertical space */
    overflow-y: hidden; /* Disable scrolling */
    padding: 10px 15px;
}

/* Individual message item (row) */
.right-content .message-item {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-start; /* Align avatar top */
}

/* User avatar */
.right-content .message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px; /* MODIFIED: border-radius */
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}

.right-content .message-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder avatar colors (commented out) */
/* .right-content .placeholder-avatar-car { background-color: #F5A623; } ... */

/* Container for message header and content */
.right-content .message-body {
    display: flex;
    flex-direction: column;
}

/* Header within a message (username, time) */
.right-content .message-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
}

/* Username */
.right-content .message-user {
    font-weight: 600;
    color: #FFFFFF; /* White username */
    margin-right: 8px; /* MODIFIED: Re-added margin for consistent spacing */
    font-size: 1.2em; 
}

/* Timestamp */
.right-content .message-time {
    font-size: 0.8em;
    color: #8A8B97; /* Keep dimmer timestamp */
    margin-left: 8px; /* MODIFIED: Added margin-left for spacing before time */
}

/* --- User Badge and Flair Styles --- */
.right-content .user-badge {
    display: inline-block;
    /* margin-right: 6px; */ /* MODIFIED: Removed margin, time will handle its left margin */
    vertical-align: middle; 
}

.right-content .moderator-badge {
    line-height: 0; /* Helps prevent extra space with inline SVGs */
}

.right-content .moderator-badge svg {
    width: 16px; /* Desired display width for the badge */
    height: 16px; /* Desired display height for the badge */
    vertical-align: middle; /* Ensure it aligns well if somehow still treated as inline */
}

.right-content .user-flair {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.9em; /* Adjust as needed for emoji size */
    vertical-align: middle; /* Align with username/time */
}
/* --- End User Badge and Flair Styles --- */

/* Text content of the message */
.right-content .message-text-content {
    line-height: 1.4;
    word-wrap: break-word; /* Prevent long text overflow */
    color: #B0B3B8; /* Adjusted message text color */
}

/* Style for Meme GIFs within messages */
.right-content .message-gif {
    display: block; /* Prevent extra space below */
    height: 64px; /* Set fixed height to 64px */
    width: auto; /* Calculate width proportionally */
    max-width: 100%; /* Prevent exceeding container width */
    border-radius: 8px; /* Optional: round corners */
    margin-top: 5px; /* Add some space above */
    object-fit: contain; 
    align-self: flex-start; /* MODIFIED: Ensure left alignment in flex column */
}

/* --- Chat Input Area (Static/Simulated) --- */

/* Container for the input bar at the bottom */
.right-content .chat-input {
    padding: 0 10px 15px; 
    /* background-color: #121F28; */ /* MODIFIED: Changed to transparent */
    background-color: transparent; 
    /* border-top: 1px solid #1A2836; */ 
    flex-shrink: 0;
}

/* Inner wrapper for input and icons */
.right-content .chat-input .input-wrapper {
    background-color: #121F28; /* MODIFIED: Updated background color */
    border-radius: 18px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

/* The text input field (disabled in simulation) */
.right-content .chat-input input[type="text"] {
    flex-grow: 1;
    border: none;
    background: transparent;
    color: #8A8B97; /* Placeholder-like color */
    outline: none;
    padding: 0;
    font-size: 0.9em;
    cursor: default; /* Indicate it's not interactive */
    pointer-events: none; /* Prevent all mouse interactions */
}

.right-content .chat-input input[type="text"]::placeholder {
    color: #8A8B97;
}

/* Container for action icons next to input */
.right-content .chat-input .input-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
}

/* Action icons (SVGs) */
.right-content .chat-input .input-actions .action-icon svg {
    display: block; 
    width: 20px; 
    height: 20px;
    opacity: 0.7; 
    cursor: default;
    pointer-events: none;
}

/* New styles for SVG icons in the input bar */
.right-content .chat-input .input-actions .input-svg-icon svg {
    display: block;
    width: 22px; /* Or adjust to match desired size from ideal image */
    height: 22px;
    /* fill: currentColor; */ /* If SVGs should inherit color, or they have their own fills */
    opacity: 1; /* Assuming they should be fully opaque */
    cursor: default; /* MODIFIED: Make non-interactive */
    pointer-events: none; /* MODIFIED: Make non-interactive */
}

/* Send button (Hidden) */
.right-content .chat-input .input-actions .send-btn {
    display: none; 
}

/* --- Animations & Scrollbars --- */

/* Fade-in animation (can be shared if needed - keep generic selector) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Class to apply fade-in animation (keep generic selector) */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Custom scrollbar for chat messages (Webkit browsers) */
.right-content .chat-messages::-webkit-scrollbar {
    width: 6px;
}

.right-content .chat-messages::-webkit-scrollbar-track {
    background: #121F28; /* Match input bar background */
    border-radius: 3px;
}

.right-content .chat-messages::-webkit-scrollbar-thumb {
    background: #3A3B3F; /* Thumb color */
    border-radius: 3px;
}

.right-content .chat-messages::-webkit-scrollbar-thumb:hover {
    background: #4A4C5A; /* Thumb hover color */
}

/*
==========================================================================
  End Component: Chat Interface (Simulated)
==========================================================================
*/


/*
==========================================================================
  Component: Project Ranking Table (Investors Section)
==========================================================================
*/

/* REMOVED FORCED DEBUG TEST FOR PROJECT RANKING IN INVESTORS SECTION */
/*
.for-investors .project-ranking-header { 
    border: 3px dashed hotpink !important;
}
.for-investors .project-ranking-table .project-row { 
    border: 2px dotted cyan !important;
    background-color: navy !important;
}
*/
/* END FORCED DEBUG TEST */

/* Base styles for project ranking table for investors */
.for-investors .project-ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color, #333);
    background-color: var(--darker-bg, #0A0A0A);
    border-radius: 10px 10px 0 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    height: var(--ranking-header-height, 90px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    z-index: 2;
}

.for-investors .project-ranking-header .header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.for-investors .project-ranking-header .header-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Styles for the emoji logo in project ranking header */
.for-investors .project-ranking-header .project-logo.emoji-logo {
    width: 40px; /* Match new SVG width */
    height: 41px; /* Match new SVG height */
    flex-shrink: 0;
    border-radius: var(--radius-md, 8px); /* Or adjust/remove if SVG provides its own rounding */
    /* background-color: var(--primary-color-dimmed, #5522CC); */ /* Removed, SVG has its own colors */
    display: flex; /* Useful for centering the SVG */
    align-items: center;
    justify-content: center;
    /* font-size: 1.8em; */ /* Removed, not applicable to SVG content directly */
    /* color: var(--light-text, #fff); */ /* Removed, SVG has its own colors */
    /* line-height: 1; */ /* Removed */
}

/* Added to ensure SVG inside the logo container scales correctly */
.for-investors .project-ranking-header .project-logo.emoji-logo svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* General project logo within project ranking header (if not emoji) */
.for-investors .project-ranking-header .project-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.for-investors .project-ranking-header .title-group {
    display: flex;
    flex-direction: column;
}

.for-investors .project-ranking-header .header-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--light-text, #fff);
    line-height: 1.2;
    letter-spacing: 0.5px;
}

/* .total-projects equivalent if needed for project ranking, or remove if not used */
/* .right-content .for-investors .project-ranking-header .total-projects { ... } */

.for-investors .project-ranking-header .header-stats {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 15px;
    color: var(--gray-text, #888);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* If Chatting and Watchers are separate divs inside header-stats */
.for-investors .project-ranking-header .header-stats > div {
    /* min-width: 80px; */
}
.for-investors .project-ranking-header .header-chatting {
    width: 75px;
}
.for-investors .project-ranking-header .header-watchers {
    width: 95px;
}

.for-investors .project-ranking-table {
    --ranking-header-height: 90px;
    --component-content-height: 480px;
    --project-row-height: 97.5px;
    --number-of-rows: 4;

    display: flex;
    flex-direction: column;
    height: calc(var(--project-row-height) * var(--number-of-rows));
    background: var(--dark-bg, #121212);
    border-radius: 0 0 10px 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    flex-grow: 1;
}

.for-investors .project-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color, #333);
    transition: background-color 0.3s ease;
    height: var(--project-row-height, 97.5px);
    flex-shrink: 0;
}

.for-investors .project-row:last-child {
    border-bottom: none;
}

/* .for-investors .project-row:hover {
    background-color: var(--hover-bg, #2a2a2a);
} */

.for-investors .project-info {
    display: flex;
    align-items: center;
    gap: 15px;
    align-self: stretch;
    flex-grow: 1;
    overflow: hidden;
}

.for-investors .rank-box {
    width: 50px;
    height: 100%;
    background-color: var(--darker-bg, #0A0A0A);
    border-radius: var(--radius-md, 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, #333);
    gap: 6px;
    position: relative;
    flex-shrink: 0;
}

.for-investors .rank-number {
    color: var(--investor-color, #FF008A);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.for-investors .rank-emoji {
    font-size: 1.2rem;
    margin-top: 2px;
    line-height: 1;
}

/* Scoped project-logo within project-row */
.for-investors .project-row .project-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--darker-bg, #0A0A0A);
    flex-shrink: 0;
}

.for-investors .project-row .project-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.for-investors .project-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: stretch;
    justify-content: center;
    overflow: hidden;
}

.for-investors .project-name {
    color: var(--aticsYellow-5, #F6FF00);
    font-family: "IBM Plex Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.for-investors .project-network {
    color: var(--colorText, rgba(255, 255, 255, 0.85));
    text-overflow: ellipsis;
    font-family: "IBM Plex Sans";
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
}

.for-investors .project-time {
    color: var(--gray-text, #888);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.for-investors .clock-icon {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--gray-text, #888);
    stroke-width: 1.5;
    opacity: 0.7;
    flex-shrink: 0;
}

.for-investors .countdown-time {
    font-family: monospace, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: inline-block;
}

/* Countdown status styles from valueprop.css */
.for-investors .countdown-warning {
    color: #FCB900;
    background: rgba(252, 185, 0, 0.1);
    animation: pulse 2s infinite;
}

.for-investors .countdown-urgent {
    color: #FF008A;
    font-weight: bold;
    animation: pulse 1s infinite;
}

.for-investors .countdown-ended {
    color: #4CAF50;
    font-weight: bold;
}

.for-investors .countdown-warning + .clock-icon,
.for-investors .countdown-warning ~ .clock-icon {
    stroke: #FCB900;
    animation: clockPulse 2s infinite;
}

.for-investors .countdown-urgent + .clock-icon,
.for-investors .countdown-urgent ~ .clock-icon {
    stroke: #FF008A;
    animation: clockPulse 1s infinite;
}

.for-investors .countdown-ended + .clock-icon,
.for-investors .countdown-ended ~ .clock-icon {
    stroke: #4CAF50;
}

.for-investors .project-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    overflow: visible;
}

.for-investors .chatting-count,
.for-investors .watchers-count {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    color: var(--light-text, #fff);
    font-size: 1.2rem;
    font-weight: 500;
    position: relative;
}

.for-investors .chatting-count {
    width: 75px;
}

.for-investors .watchers-count {
    width: 95px;
}

.for-investors .chatting-count .chatting-icon {
    color: var(--owner-color, #fcb900);
    vertical-align: -0.125em;
    margin-right: 0.3em;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.for-investors .chatting-count .chatting-number,
.for-investors .watchers-count .watchers-number {
    overflow: hidden;
    text-overflow: ellipsis;
}

.for-investors .watchers-count .trend-arrow {
    margin-right: 0.2em;
    font-size: 0.8em;
}

/* Watchers Trend Indicators (Scoped) */
.for-investors .watchers-trend {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.8;
    margin-right: 0.3em;
    width: 1.2em;
    text-align: center;
    flex-shrink: 0;
    transition: none; /* Ensure no unwanted transition causes delay */
}

/* Scoping for SVG and Trend Arrows within Investor Ranking Table */
.for-investors .project-stats .chatting-count svg,
.for-investors .project-stats .watchers-count .trend-arrow {
    flex-shrink: 0;
    width: 1.2em;
    text-align: center;
    margin-right: 0.3em;
    transition: opacity 0s ease 0s, transform 0s ease 0s; /* Ensure no unwanted transition causes delay */
    opacity: 1; /* Ensure it's fully opaque if this is the primary style for the arrow */
}

/* NEW: Style for the chatting icon in project ranking */
/* .for-investors .project-stats .chatting-count .chatting-icon { ... } */

/* Trend Arrow Colors (Scoped to Investors) */
.for-investors .project-stats .watchers-count.trend-up .trend-arrow,
.for-investors .project-stats .watchers-trend.trend-up,
.for-investors .watchers-trend.trend-up {
    color: #4CAF50;
}

.for-investors .project-stats .watchers-count.trend-down .trend-arrow,
.for-investors .project-stats .watchers-trend.trend-down,
.for-investors .watchers-trend.trend-down {
    color: #ff4466;
}

/* Watchers Number Display (Scoped) */
.for-investors .watchers-number {
    display: inline-block;
}

/* Row Activity Highlight (Scoped to Investors) */
.for-investors .project-row.row-activity {
    background-color: rgba(76, 175, 80, 0.08);
    transition: background-color 0.5s ease;
    position: relative;
    box-shadow: inset 0 0 20px rgba(76, 175, 80, 0.05);
}

.for-investors .project-row.row-activity::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background-color: #4CAF50;
    animation: slideIn 0.5s ease-in-out;
}

.for-investors .project-row.row-activity .watchers-count {
    color: #4CAF50 !important;
    text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
    transition: color 0.5s ease;
}

/* Animations from valueprop.css (pulse, clockPulse, slideIn) */
@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes clockPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes slideIn {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

/* Scrollbar styles from valueprop.css for project-ranking-table */
.for-investors .project-ranking-table::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.for-investors .project-ranking-table::-webkit-scrollbar-track {
    background: var(--darker-bg);
    border-radius: 3px;
}

.for-investors .project-ranking-table::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.for-investors .project-ranking-table::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Responsive styles for Watchers (Scoped to Investors) */
@media (max-width: 768px) {
    .for-investors .project-stats .watchers-count {
        min-width: 40px;
    }
    
    .for-investors .project-stats .watchers-trend {
        font-size: 10px;
    }

    /* Mobile adjustments for project logo and info gap */
    .for-investors .project-row .project-logo {
        width: 28px; /* Base for tablet */
        height: 28px; /* Base for tablet */
    }
    .for-investors .project-info {
        gap: 10px; /* Base for tablet */
    }
}

@media (max-width: 430px) { /* MODIFIED: Adjusted breakpoint from 375px to 430px */
    /* Adjust overall table row height for 400px total component height */
    .for-investors .project-ranking-table {
        --project-row-height: 85px; /* (400px total - 60px header) / 4 rows */
    }

    .for-investors .project-ranking-header {
        height: 60px; /* Reduced header height */
        padding: 10px; /* Reduced padding */
    }
    .for-investors .project-ranking-header .project-logo.emoji-logo {
        width: 28px; /* Further reduced logo */
        height: 28px;
    }
    .for-investors .project-ranking-header .header-title-group {
        gap: 8px; /* Further reduce gap */
    }
    .for-investors .project-ranking-header .header-title {
        font-size: 1.1rem; /* Further reduced title font size */
    }
    .for-investors .project-ranking-header .header-stats {
        gap: 16px; /* Match row stats gap & further reduced */
        font-size: 0.75rem; /* Further reduced font for "Chatting" / "Watchers" labels */
    }
    .for-investors .project-ranking-header .header-chatting {
        width: 45px; /* Match data column width */
        min-width: auto; /* Remove previous min-width */
        text-align: left;
    }
    .for-investors .project-ranking-header .header-watchers {
        width: 60px; /* Match data column width */
        min-width: auto; /* Remove previous min-width */
        text-align: left;
    }

    .for-investors .project-row {
        padding: 6px 8px; /* Further reduced row padding */
    }
    .for-investors .rank-box {
        width: 38px; /* Slightly smaller rank box */
        gap: 2px;
        padding-top: 27px; /* Make space for overlaid logo at the top */
        padding-bottom: 5px; /* Offset for rank num/emoji at bottom */
        justify-content: flex-end; /* Push rank num/emoji to bottom */
        margin-right: 8px;
        /* display: flex; flex-direction: column; align-items: center; ARE BASE */
    }
    .for-investors .rank-number,
    .for-investors .rank-emoji {
        font-size: 0.9rem; /* Slightly smaller rank text/emoji */
    }

    .for-investors .project-row .project-logo {
        width: 22px; /* Further reduced */
        height: 22px;
        position: absolute;
        top: 5px; /* Position logo at the top of rank-box visual area */
        left: calc((38px - 22px) / 2); /* Center logo horizontally over rank-box area */
    }
    .for-investors .project-info {
        gap: 6px; /* Further reduced */
        align-items: flex-start; /* Align logo and details to the top */
        position: relative; /* Context for absolute positioned logo */
    }

    .for-investors .project-name {
        font-size: 0.85rem; /* Further reduced */
    }
    .for-investors .project-network {
        font-size: 1em; /* Changed from 0.75rem */
        line-height: 1.4; /* Added line-height */
    }
    .for-investors .project-time {
        font-size: 0.6rem; /* Further reduced */
        gap: 2px;
    }
    .for-investors .clock-icon {
        width: 9px;
        height: 9px;
    }
    .for-investors .countdown-time {
        font-size: 0.6rem; /* Reduced countdown timer font size */
    }
    
    .for-investors .project-stats {
        gap: 6px; /* Further reduced gap in row stats */
    }
    .for-investors .chatting-count,
    .for-investors .watchers-count {
        font-size: 0.8rem; /* Further reduced font size for stats numbers */
        gap: 2px; /* Further reduced gap between icon and number */
    }
    .for-investors .chatting-count {
        width: 45px; /* More compact width */
    }
    .for-investors .watchers-count {
        width: 60px; /* More compact width */
    }
    .for-investors .project-stats .watchers-count { 
        min-width: 28px; 
        font-size: 0.8rem; /* Harmonized */
    }
    .for-investors .chatting-count .chatting-icon {
        font-size: 0.85em; /* Adjusted relative to 0.75rem */
    }
    .for-investors .watchers-count .trend-arrow {
        font-size: 0.65em; /* Adjusted relative to 0.75rem */
    }
    .for-investors .project-stats .watchers-trend {
        font-size: 7px; /* Slightly smaller */
        left: -3px; 
    }
}


/*
==========================================================================
  End Component: Project Ranking Table
==========================================================================
*/

/*
==========================================================================
  Component: Analytics Table (Figma Aligned)
==========================================================================
*/

/* CSS Variables for Analytics Table layout */
:root {
    --analytics-table-container-height: 480px; 
    --analytics-table-header-h: 90px;
    --analytics-table-hashtag-h: 50px; 
    --analytics-table-chat-list-header-h: 40px;
    --analytics-table-target-rows: 5; 
    /* Available height for list = container - (header + hashtag_container + list_header) */
    --analytics-table-chat-list-available-h: calc(var(--analytics-table-container-height) - var(--analytics-table-header-h) - var(--analytics-table-hashtag-h) - var(--analytics-table-chat-list-header-h));
    /* Target height per row */
    --analytics-table-row-h: calc(var(--analytics-table-chat-list-available-h) / var(--analytics-table-target-rows)); 
}

.analytics-table { /* Main wrapper for the component */
    display: flex;
    flex-direction: column;
    height: 100%; /* Aims to fill parent, which is content-image with 480px */
    max-height: var(--analytics-table-container-height, 480px);
    background: var(--dark-bg, #121212);
    border-radius: 10px; /* Assuming this was from shared .content-image */
    overflow: hidden;
    font-family: 'IBM Plex Sans', sans-serif;
}

.analytics-table .analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #333);
    height: var(--analytics-table-header-h, 90px);
    background-color: var(--darker-bg, #0A0A0A);
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 0;
}

.analytics-table .analytics-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.analytics-table .analytics-header .analytics-header-icon { /* MODIFIED: Class name updated from .project-logo */
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 8px;
    background-color: #7B1AF7; /* From screenshot */
    display: flex;
    align-items: center;
    justify-content: center;
}

.analytics-table .analytics-header .analytics-header-icon svg {
    width: 28px;
    height: 28px;
    fill: white;
}

.analytics-table .analytics-header .title-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.analytics-table .analytics-header .header-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 2px;
}

.analytics-table .analytics-header .total-impressions {
    color: #B0B3B8;
    font-size: 0.85rem;
    line-height: 1.2;
}

.analytics-table .analytics-header .header-stats {
    text-align: right;
}

.analytics-table .analytics-header .rooms-label {
    color: #B0B3B8;
    font-size: 0.9rem;
    margin-bottom: 2px;
    font-weight: 500;
}

.analytics-table .analytics-header .rooms-count {
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

/* Hashtags */
.analytics-table .hashtag-container {
    display: flex; 
    align-items: center;
    padding: 0 18px; 
    height: var(--analytics-table-hashtag-h, 50px);
    background-color: var(--darker-bg, #0A0A0A);
    border-bottom: 1px solid var(--border-color, #333);
    flex-shrink: 0;
    overflow-x: auto; /* Container handles HORIZONTAL scrolling */
    overflow-y: hidden; /* Explicitly prevent VERTICAL scrolling */
    scrollbar-width: none; 
    -ms-overflow-style: none;  
}
.analytics-table .hashtag-container::-webkit-scrollbar {
    display: none; 
}

.analytics-table .hashtag-container .hashtag-list {
    display: flex; /* Lay out hashtags in a row */
    gap: 8px;
    align-items: center; 
    /* No flex-grow: 1 here, let it be sized by its content */
    /* No padding or margin, container padding handles spacing */
    /* No overflow-x here */
}

/* Base Hashtag style - ensure this is specific enough */
.analytics-table .hashtag-container .hashtag {
    padding: 6px 12px; 
    margin-right: 6px; /* Slightly reduced margin */
    background-color: rgba(255, 255, 255, 0.08); /* Base color */
    color: var(--light-text, #EAEAEA);
    border-radius: 16px; 
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: 1px solid transparent; 
    position: relative; 
    overflow: hidden; /* Changed from visible to hidden for the main element */
    z-index: 1;
}

.analytics-table .hashtag-container .hashtag::before { /* For glow */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--active-hashtag-glow-color, rgba(0, 255, 200, 0.35)) 0%, transparent 70%); 
    border-radius: inherit; 
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
}

.analytics-table .hashtag-container .hashtag:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Active state for hashtag - targeting the one in your screenshot */
.analytics-table .hashtag-container .hashtag.active {
    background-color: var(--active-hashtag-glow-color, rgba(0, 255, 200, 0.25)); /* Solid background for active, matching glow */
    color: #FFFFFF; 
    font-weight: 600;
    box-shadow: 0 0 10px var(--active-hashtag-glow-color, rgba(0, 255, 200, 0.5)); /* Softer glow directly on element */
}

/* Hide the ::before element for the .active state if the main element has the full effect */
.analytics-table .hashtag-container .hashtag.active::before {
    transform: translate(-50%, -50%) scale(0); /* Keep it hidden or use for a secondary effect */
    opacity: 0;
}
.analytics-table .hashtag-container .hashtag:hover::before {
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 1;
}

/* Chat Room List Section */
.analytics-table .chat-room-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.analytics-table .chat-room-section > .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 10px 24px;
    background: var(--darker-bg, #0A0A0A);
    border-bottom: 1px solid var(--border-color, #333);
    height: 40px; 
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;

    /* Typographic adjustments for visual hierarchy */
    font-size: 0.75rem; 
    font-weight: 500; 
    color: rgba(255, 255, 255, 0.6); 
    text-transform: uppercase; 
    letter-spacing: 0.075em;
}

.analytics-table .chat-room-section > .chat-room-list {
    height: var(--analytics-table-chat-list-available-h, 300px);
    overflow-y: hidden; /* No scroll for exactly 5 items */
    display: flex;
    flex-direction: column;
    padding-top: 0; /* Ensure no extra padding on the list container itself */
    padding-bottom: 0; /* Ensure no extra padding on the list container itself */
}

.analytics-table .chat-room-section .chat-room-item {
    height: var(--analytics-table-row-h); /* Each item takes exactly one row height */

    flex-shrink: 0; /* Prevent items from shrinking */
    padding: 6px 24px; /* Existing padding from line 1115, accounted for by box-sizing */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color, #222); 
    box-sizing: border-box; /* Crucial for height + padding + border calculation */
    overflow: hidden; /* Prevent content within item from causing overflow */
}

.analytics-table .chat-room-section .chat-room-item:last-child {
    border-bottom: none;
    /* No need to override height if border-box is working correctly with the border */
}

.analytics-table .chat-room-section .chat-room-item .room-info {
    display: flex;
    align-items: center;
    gap: 12px; /* Adjusted gap */
    overflow: hidden; /* Prevent long text from breaking layout */
}

.analytics-table .chat-room-section .chat-room-item .room-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--darker-bg, #1a1a1a); /* Fallback bg for logo */
}

.analytics-table .chat-room-section .chat-room-item .room-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.analytics-table .chat-room-section .chat-room-item .room-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    overflow: hidden; /* Prevent long text from breaking layout */
}

.analytics-table .chat-room-section .chat-room-item .room-name {
    font-size: 0.875rem; /* 14px */
    font-weight: 500; /* Figma uses medium/500 */
    line-height: 1.3;
    color: var(--light-text, #EAEAEA);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-table .chat-room-section .chat-room-item .room-fullname {
    font-size: 0.75rem; /* 12px */
    line-height: 1.3;
    color: var(--gray-text, #8899A6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-table .chat-room-section .chat-room-item .impression-count {
    font-size: 0.875rem; /* 14px */
    font-weight: 500; /* Figma uses medium/500 */
    color: var(--light-text, #EAEAEA);
    white-space: nowrap;
    padding-left: 10px; /* Space from details */
}

/* Flash animation for room updates (if used by JS) */
/* REMOVE OLD @keyframes flashUp and flashDown and related .row-flash-* styles */
/* @keyframes flashUp { ... } */
/* @keyframes flashDown { ... } */
/* .analytics-table .chat-room-section .chat-room-item.row-flash-up { ... } */
/* .analytics-table .chat-room-section .chat-room-item.row-flash-down { ... } */

/* New Microinteraction Animations for Impression Count */
@keyframes numberPulseEffect {
    0% {
        transform: scale(1);
        color: var(--light-text, #EAEAEA); /* Original color */
    }
    50% {
        transform: scale(1.15);
        color: #A06EFF; /* Brighter, luminous purple */
    }
    100% {
        transform: scale(1);
        color: var(--light-text, #EAEAEA);
    }
}

@keyframes hashtagEchoAnim {
    0% {
        opacity: 0;
        transform: translateY(0px);
    }
    20% {
        opacity: 0.7;
        transform: translateY(-8px); /* Drift up */
    }
    100% {
        opacity: 0;
        transform: translateY(-16px); /* Continue drift up and fade */
    }
}

.analytics-table .chat-room-section .chat-room-item .impression-count {
    position: relative; /* For positioning the ::before pseudo-element */
    /* Ensure other styles like font-size, weight, color are maintained or set here */
}

.analytics-table .chat-room-section .chat-room-item .impression-count.impression-changed-effect {
    animation: numberPulseEffect 0.8s ease-in-out forwards;
}

.analytics-table .chat-room-section .chat-room-item .impression-count.impression-changed-effect::before {
    content: '#';
    position: absolute;
    top: -5px; /* Adjust for best placement */
    right: -12px; /* Adjust for best placement, to the right of the number */
    font-size: 0.8em; /* Smaller than the main number */
    color: rgba(189, 50, 199, 0.8); /* Thematic purple, slightly transparent */
    font-weight: bold;
    animation: hashtagEchoAnim 1s ease-out forwards;
    pointer-events: none; /* So it doesn't interfere with mouse events */
}

/*
==========================================================================
  End Component: Analytics Table
==========================================================================
*/


/*
==========================================================================
  Component: Project Watchlist (Placeholder - Investors Section)
==========================================================================
*/

.right-content .for-investors .portfolio-placeholder {
    /* Styles for the portfolio placeholder */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 480px; /* Match other component heights */
    background-color: var(--dark-bg, #121212);
    border-radius: 10px;
    color: var(--gray-text, #888);
    padding: 20px;
    text-align: center;
}

/*
==========================================================================
  End Component: Project Watchlist
==========================================================================
*/

/*
==========================================================================
  Component: Project Watchlist (Tile View)
==========================================================================
*/
.project-watchlist-component {
    width: 100%;
    height: 100%; 
    display: flex; /* Changed from flex to allow direct children to be rows */
    flex-direction: column; /* Stack the two .tiles-row elements */
    background-color: var(--dark-bg, #121212); 
    border-radius: 10px; /* Assuming this was from shared .content-image and should be on the main wrapper */
    overflow: hidden; /* This is CRITICAL to hide the overflowing tiles */
    padding: 0; /* Remove padding if rows handle it or if tiles go edge-to-edge of component */
    box-sizing: border-box;
}

.project-tiles-grid { /* This is now mainly a vertical flex container for the two rows */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 10px; /* Vertical gap between the two rows */
    padding: 0px; /* Padding inside the main component, around the rows */
    box-sizing: border-box;
    flex-grow: 1;
}

.tiles-row {
    flex: 1; 
    display: flex;
    flex-direction: row;
    align-items: stretch; 
    gap: 10px; 
    min-height: 0; 
    /* Each .tiles-row will now have its specific animation */
    /* The width of its content will be 12 tiles + 11 gaps */
}

/* Define the width of 6 tiles + 5 gaps for the animation translation */
/* This assumes .project-tile width is calc((100% - 2 * 10px) / 2.4) relative to .project-tiles-grid content area */
/* Let PADDING be the padding of .project-tiles-grid (e.g., 10px) */
/* Let TILE_GAP be the gap in .tiles-row (e.g., 10px) */
/* Let CONTAINER_EFFECTIVE_WIDTH be (.project-watchlist-component width - 2 * PADDING) */
/* Let TILE_WIDTH be (CONTAINER_EFFECTIVE_WIDTH - 2 * TILE_GAP) / 2.4 for the viewport */

/* Let's define a variable for the scroll distance which is width of 6 tiles + 5 gaps */
/* This is complex to set statically if tile width is responsive. */
/* Instead, we will translate by 50% of the row's total scroll width (because we duplicated tiles) */

@keyframes scroll-rtl {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Scroll by the width of the first set of 6 tiles */
    }
}

@keyframes scroll-ltr {
    0% {
        transform: translateX(-50%); /* Start from the beginning of the second set */
    }
    100% {
        transform: translateX(0);  /* Scroll to show the first set */
    }
}

.tiles-row.scroll-rtl,
.tiles-row.scroll-ltr {
    /* Important: The animation needs a defined width for its children to calculate against. */
    /* Since children (tiles) have fixed widths, the parent flex container will expand. */
    /* We are animating the transform property. */
    animation-duration: 45s; /* Adjust for speed - longer is slower */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.tiles-row.scroll-rtl {
    animation-name: scroll-rtl;
}

.tiles-row.scroll-ltr {
    animation-name: scroll-ltr;
}

/* Pause animation on hover for usability */
.project-watchlist-component:hover .tiles-row.scroll-rtl,
.project-watchlist-component:hover .tiles-row.scroll-ltr {
    animation-play-state: paused;
}

.project-tile {
    width: 255px; /* Updated tile width */
    height: 100%; 
    flex-shrink: 0; 
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    padding: 16px;
    box-sizing: border-box;
    color: #fff;
    font-family: 'IBM Plex Sans', sans-serif;
    border: 1px solid #1F3442; /* Added border */
}

.project-tile::before { /* Pseudo-element for ghosted background */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--tile-bg-image);
    background-size: 150%; /* Scaled up */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.20; /* 8% opacity */
    border-radius: inherit; /* Match parent's border-radius */
    z-index: 0; /* Behind overlay and content */
}

.project-tile .tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: inherit;
    z-index: 1; /* Overlay is above ::before, below ::content */
}

.project-tile .tile-category-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2; 
    display: flex; 
    align-items: center; 
}

.project-tile .tile-category-icon .category-svg {
    width: 24px; /* Adjusted SVG size to match its viewBox */
    height: 24px;
    flex-shrink: 0;
}

.project-tile .tile-category-icon .category-label { /* This class is no longer used in HTML, can be removed or kept for future */
    /* display: none; /* Hide if keeping the class definition */
}

/* Specific colors for labels if desired, matching SVG fills */
.project-tile .tile-category-icon.btf .category-label { /* Obsolete */
    /* color: #FF008A; */
}

.project-tile .tile-category-icon.ico .category-label { /* Obsolete */
    /* color: #6FFF2C; */
}

.project-tile .tile-content {
    position: relative;
    z-index: 2; /* Content elements are above ::before and ::overlay */
    display: flex;
    flex-direction: column;
    gap: 4px; 
}

.project-tile .project-network-name {
    font-size: 0.75rem; 
    font-weight: 500;
    /* color: var(--aticsPink, #FF008A); /* Removed default color */
    text-transform: uppercase;
    line-height: 1.2;
}

/* Category-specific colors for project-network-name */
.project-tile.btf .project-network-name {
    color: #FF008A;
}

.project-tile.ico .project-network-name {
    color: #6FFF2C;
}

.project-tile .project-main-name {
    font-size: 1.6rem; 
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom:24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-tile .project-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px; /* Add some top margin to separate from project name */
}

.project-tile .metric-item {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 12px; /* Adjusted gap */
    min-width: 50px; /* Increased min-width */
    text-align: center;
}

.project-tile .metric-label {
    font-size: calc(0.75rem * 1.25); /* Approx 25% increase from original 0.75rem */
    color: var(--gray-text, #B0B3B8);
    text-transform: capitalize;
    line-height: 1.1;
}

.project-tile .metric-value {
    font-size: calc(1rem * 1.25);    /* Approx 25% increase from original 1rem */
    font-weight: 700; 
    display: flex;
    align-items: center;
    gap: 5px; /* Adjusted gap */
    line-height: 1.1;
}

.project-tile .btf-rank .rank-arrow {
    width: calc(12px * 1.25);   /* Approx 25% increase */
    height: calc(12px * 1.25);
}

.project-tile .chatting-tile-icon {
    width: 1em;  /* Relative to new .metric-value font-size */
    height: 1em; /* Relative to new .metric-value font-size */
    fill: var(--owner-color, #FCB900); 
    vertical-align: middle;
}

.project-tile .sentiment-rate .metric-value { /* Emoji */
    font-size: calc(1.5rem * 1.25); /* Larger size for emoji */
    line-height: 1;
}

/* Responsive Styles for Project Watchlist Tiles */
@media (max-width: 768px) {
    .project-watchlist-component .project-tile {
        padding: 16px !important; /* Reduce padding on mobile */
    }

    .project-watchlist-component .project-tile .project-main-name {
        font-size: 1.4rem !important; /* Smaller project name */
        margin-bottom: 20px !important; /* Reduced margin */
    }

    .project-watchlist-component .project-tile .project-network-name {
        font-size: 0.7rem !important; /* Smaller network name */
    }
    
    .project-watchlist-component .project-tile .metric-item {
        gap: 10px !important; /* Increased gap between label and value */
        /* min-width is removed to allow natural sizing */
    }

    .project-watchlist-component .project-tile .metric-label {
        font-size: 1rem !important; /* Larger metric labels */
    }

    .project-watchlist-component .project-tile .metric-value {
        font-size: 1.4rem !important; /* Larger metric values */
    }

    .project-watchlist-component .project-tile .sentiment-rate .metric-value {
        font-size: 1.3rem !important; /* Larger emoji */
    }

    .project-watchlist-component .project-tile .tile-category-icon {
        top: 12px !important;
        right: 40px !important;
    }

    .project-watchlist-component .project-tile .tile-category-icon .category-svg {
        width: 20px !important; /* Smaller category icon */
        height: 20px !important;
    }
}

/* Responsive adjustments will need careful review for this new layout */
/* The previous responsive logic for grid might not apply well */
@media (max-width: 768px) { /* Example: Stack rows or adjust tile width */
    .project-tiles-grid {
        gap: 8px; 
        padding: 8px;
    }
    .tiles-row {
        gap: 8px;
    }
    .project-tile {
         /* On smaller screens, maybe show 1.5 tiles? */
        width: calc((100% - 1 * 8px) / 1.5); 
        padding: 8px;
    }
    .project-tile .project-main-name {
        font-size: 0.9rem;
    }
    .project-tile .metric-value {
        font-size: 0.75rem; 
    }
     .project-tile .tile-category-icon {
        width: 24px; 
        height: 24px;
    }
}

@media (max-width: 480px) { /* Even smaller screens */
    .project-tile {
        /* Show 1 full tile and a peek of the next */
        width: calc((100% - 1 * 8px) / 1.3); 
    }
     .project-tile .project-network-name {
        font-size: 0.7rem; 
    }
    .project-tile .project-main-name {
        font-size: 0.85rem;
    }
}

/*
==========================================================================
  End Component: Project Watchlist (Tile View)
==========================================================================

/* Add other interactive component styles below, each within its own clear section */

/* ... rest of file ... */ 
/* ... rest of file ... */ 
/* ... rest of file ... */ 

/* The following flash animation styles were removed as they were duplicates 
   of the styles already defined and correctly scoped within the .analytics-table component 
   around lines 798-811. Removing these avoids using the generic .content-image selector.

/* Flash animation for room updates */
/* @keyframes flashUp { ... } */
/* @keyframes flashDown { ... } */
/* .content-image > .chat-room-section .chat-room-item.row-flash-up { ... } */
/* .content-image > .chat-room-section .chat-room-item.row-flash-down { ... } */

*/

.analytics-table .chat-room-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    padding: 0; /* Explicitly reset padding for the component's section wrapper */
}

.analytics-table .chat-room-section > .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 10px 24px;
    background: var(--darker-bg, #0A0A0A);
    border-bottom: 1px solid var(--border-color, #333);
    height: 40px; 
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    text-transform: none;
}

.analytics-table .chat-room-section > .chat-room-list {
    flex-grow: 1; /* Allow list to take remaining space within its section */
    overflow-y: hidden; /* Prevent scrolling */
}

/* Analytics Table Specific Styles */
.analytics-table .hashtag-container {
    display: flex;
    align-items: center;
    padding: 12px 24px; /* Consistent padding */
    border-bottom: 1px solid var(--border-color, #333);
    height: 50px; /* Fixed height */
    background-color: var(--darker-bg, #0A0A0A);
    overflow-x: auto; 
    flex-shrink: 0;
}

.analytics-table .hashtag-container .hashtag-list {
    display: flex;
    gap: 8px;
}

/* Base Hashtag style for Analytics Table (owner-inspired) */
.analytics-table .hashtag-container .hashtag {
    padding: 8px 15px;
    margin-right: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--light-text, #FFFFFF);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    flex: 0 0 auto;
    white-space: nowrap;
    cursor: pointer;
    /* MODIFIED: Added transform to transition for hover effect */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.2s ease-out, transform 0.2s ease-out;
    border: 1px solid transparent; 
    position: relative;
    overflow: visible; 
    z-index: 1;
}

.analytics-table .hashtag-container .hashtag::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--active-hashtag-glow-color, rgba(0, 255, 200, 0.35)) 0%, transparent 70%); 
    border-radius: inherit; 
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    z-index: -1;
}

.analytics-table .hashtag-container .hashtag:hover,
.analytics-table .hashtag-container .hashtag.active {
    color: var(--light-text, #FFFFFF);
}

.analytics-table .hashtag-container .hashtag:hover::before,
.analytics-table .hashtag-container .hashtag.active::before {
    transform: translate(-50%, -50%) scale(2.8);
}

/* Chat Room List Section specific to Analytics Table */
.analytics-table .chat-room-section {
    flex-grow: 1; /* Allow this section to take remaining vertical space */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent this section itself from showing scrollbars */
}

.analytics-table .chat-room-section > .section-header {
    padding: 10px 24px;
    height: 40px; 
    flex-shrink: 0; /* Don't shrink */
    /* other styles like background, border, font already defined should be fine */
}

.analytics-table .chat-room-section > .chat-room-list { 
    flex-grow: 1; /* Allow list to take remaining space within its section */
    overflow-y: hidden; /* Prevent scrolling */
}

/* ... Ensure other .chat-room-item, .room-info, etc., styles are appropriate ... */

/* Make sure any overly broad .content-image > .hashtag-container .hashtag from previous edits are removed */
/* End Analytics Table Styles */ 

/* Component: Analytics Table */

/* Make analytics-table specific styles more specific if needed */
.value-prop-content .analytics-table .hashtag-container .hashtag {
    padding: 6px 12px; 
    margin-right: 8px; 
    background: var(--basicPurple-1, #190021); 
    color: var(--light-text, #EAEAEA);
    border-radius: 16px; 
    font-size: 0.85rem; 
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    /* MODIFIED: Added transform to transition for hover effect */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.2s ease-out, transform 0.2s ease-out;
    border: 1px solid var(--colorFillSecondary, rgba(255, 255, 255, 0.12)); 
    position: relative;
    overflow: hidden; 
    z-index: 1;
}

.value-prop-content .analytics-table .hashtag-container .hashtag::before {
    display: none; 
}

.value-prop-content .analytics-table .hashtag-container .hashtag:hover:not(.active) {
    background-color: #2A0E35; 
    border-color: rgba(189, 50, 199, 0.5); /* MODIFIED: Thematic purple highlight border */
    color: #FFFFFF; 
    transform: translateY(-2px); /* MODIFIED: Gentle lift motion */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* MODIFIED: Enhanced shadow for lift effect */
}

.value-prop-content .analytics-table .hashtag-container .hashtag.active {
    background-color: #3D1F5A; 
    border-color: #8A4BBE; /* MODIFIED: New thematic border for active state */
    color: #FFFFFF; 
    font-weight: 600; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
    /* No transform for active state, it's already selected */
}


.analytics-table .chat-room-section > .chat-room-list { 
    flex-grow: 1; 
    overflow-y: auto; 
}

/* Reduce padding and font size for chat room items to help them fit */
.analytics-table .chat-room-section .chat-room-item {
    padding: 6px 24px; /* Further reduced top/bottom padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color, #333);
    /* Other properties like transition, position, overflow, animation should be reviewed if they add height or affect layout */
}

.analytics-table .chat-room-section .chat-room-item .room-info {
    display: flex;
    align-items: center;
    gap: 10px; /* Slightly reduced gap */
}

.analytics-table .chat-room-section .chat-room-item .room-logo {
    width: 30px; /* Slightly smaller logo */
    height: 30px; 
    flex-shrink: 0;
    /* ... other logo styles ... */
}

.analytics-table .chat-room-section .chat-room-item .room-details {
    display: flex;
    flex-direction: column;
    gap: 1px; /* Minimal gap */
}

.analytics-table .chat-room-section .chat-room-item .room-name {
    font-size: 0.85rem; /* Further reduced */
    font-weight: 600;
    line-height: 1.2; /* Control line height */
    color: var(--light-text, #fff);
}

.analytics-table .chat-room-section .chat-room-item .room-fullname {
    font-size: 0.7rem; /* Further reduced */
    line-height: 1.2; /* Control line height */
    color: var(--gray-text, #888);
}

.analytics-table .chat-room-section .chat-room-item .impression-count {
    font-size: 0.85rem; /* Further reduced */
    font-weight: 600;
    color: var(--light-text, #fff);
}

/* ... rest of interactive.css ... */ 

/* Ensure these are accurate and used if calc() is preferred elsewhere */
:root {
    --component-container-height: 480px; /* Max height of .content-image */
    --analytics-header-h: 90px;
    --hashtag-container-h: 50px;
    --chat-list-header-h: 40px;
    --chat-list-target-rows: 5; /* How many rows we want to display without scroll */
    
    --chat-list-available-h: calc(var(--component-container-height) - var(--analytics-header-h) - var(--hashtag-container-h) - var(--chat-list-header-h));
    /* Calculated height for each row to make 5 fit in the available space */
    --chat-list-row-h: calc(var(--chat-list-available-h) / var(--chat-list-target-rows)); 
}

/* 
  The styles for .content-image (which defines the container for interactive components)
  have been moved to valueprop.css as it's a structural element.
  The :root variables above, including --component-container-height, 
  are still relevant for sizing calculations within interactive components.
*/

.analytics-table { /* This is the direct child of .content-image */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Make analytics-table fill .content-image */
    overflow: hidden; /* Prevent analytics-table itself from scrolling */
}

.analytics-table .analytics-header {
    /* height: var(--analytics-header-h, 90px); */
    flex-shrink: 0;
    /* ... other styles ... */
}

.analytics-table .hashtag-container {
    height: var(--hashtag-container-h, 50px);
    flex-shrink: 0;
    /* ... other styles ... */
}

.analytics-table .chat-room-section {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.analytics-table .chat-room-section > .section-header {
    padding: 10px 24px;
    height: 40px; 
    flex-shrink: 0; /* Don't shrink */
    /* other styles like background, border, font already defined should be fine */
}

.analytics-table .chat-room-section > .chat-room-list { 
    flex-grow: 1; /* Allow list to take remaining space within its section */
    overflow-y: hidden; /* Prevent scrolling */
}

/* ... Ensure other .chat-room-item, .room-info, etc., styles are appropriate ... */

/* Make sure any overly broad .content-image > .hashtag-container .hashtag from previous edits are removed */
/* End Analytics Table Styles */ 

/* ... rest of interactive.css ... */ 

/* --- New Live Beacon Styles for the SPAN container --- */
.for-investors .project-time .live-beacon-container {
    display: inline-block;
    width: 12px; /* Match old icon size */
    height: 12px;
    position: relative;
    vertical-align: middle; /* Align with the "LIVE" text */
    margin-right: 4px; /* Space between beacon (now first) and LIVE text */
}

/* Central red dot of the beacon */
.for-investors .project-time .live-beacon-container::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px; 
    height: 6px;
    background-color: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Pulsing outer ring of the beacon */
.for-investors .project-time .live-beacon-container::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px; 
    height: 12px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    animation: pulseBeacon 1.5s infinite ease-out; /* Re-enable animation */
    z-index: 0;
}

/* Keep the @keyframes pulseBeacon definition (it was correct) */
@keyframes pulseBeacon {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0.8;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.5); 
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }
}
/* --- End Live Beacon Styles --- */

.for-investors .project-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    overflow: visible;
}

/* ... rest of interactive.css ... */ 

/* --- New Chat Search Header Styles --- */
.chat-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    background-color: #121F28; /* MODIFIED: Corrected background color */
    border-bottom: 1px solid #121F28; /* Separator */
    flex-shrink: 0; /* Prevent shrinking */
    height: 50px; /* Approximate height */
    box-sizing: border-box;
}

.chat-search-header .search-input-group {
    display: flex;
    align-items: center;
    flex-grow: 1;
    background-color: #070D11; /* Match chat background */
    border-radius: 18px; /* Rounded like the bottom input */
    padding: 6px 10px;
    margin-right: 15px;
}

.chat-search-header .search-bar-icon {
    margin-right: 8px;
    color: #8A8B97; /* Icon color */
    font-size: 1.1em;
}

.chat-search-header input[type="text"] {
    flex-grow: 1;
    border: none;
    background: transparent;
    color: #B0B3B8; /* Actual text color */
    outline: none;
    padding: 0;
    font-family: "IBM Plex Sans", sans-serif; 
    font-style: normal;
    font-weight: 400;
    line-height: normal; 
    cursor: default; /* Make non-interactive */
    pointer-events: none; /* Make non-interactive */
}

.chat-search-header input[type="text"]::placeholder {
    color: var(--colorTextPlaceholder, rgba(255, 255, 255, 0.25));
}

.chat-search-header .chat-header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between icons */
}

.chat-search-header .header-action-icon {
    color: #B0B3B8; 
    font-size: 1.3em; 
    cursor: default; /* MODIFIED: Make non-interactive */
}

/* Styles for SVG icons in the header */
.chat-search-header .header-svg-icon svg {
    display: block; 
    width: auto; 
    height: 18px; 
    fill: currentColor; 
    pointer-events: none; /* MODIFIED: Make non-interactive */
}

.chat-search-header .search-bar-icon.header-svg-icon svg {
    height: 16px; /* Slightly smaller for the input icon if needed */
}
/* --- End New Chat Search Header Styles --- */

/*
==========================================================================
  Component: Team Management
==========================================================================
*/
.team-management-wrapper {
    padding: 20px 24px; 
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--light-text, #EAEAEA);
    height: 100%; 
    display: flex;
    flex-direction: column;
    /* gap: 15px; -- REMOVED, using specific margins now */
    background-color: #070D11; 
    box-sizing: border-box; 
}

.team-management-header-group {
    display: flex;
    flex-direction: row; 
    align-items: center; 
    justify-content: flex-start; 
    gap: 10px; 
    margin-bottom: 20px; /* Space below title/icon group */
}

.team-management-header-group .team-section-title { 
    font-size: 1.6rem; 
    font-weight: 600;
    color: #FFFFFF;
    margin-top: 0; 
    margin-bottom: 0; 
    line-height: 1; 
}

.team-management-header-group .team-title-icon {
    width: 28px; 
    height: 28px; 
    fill: #1F3442; 
    order: -1; 
}

.team-management-invite-section {
    border-radius: 8px;
    border: 1px solid #18252d;
    background: #07090a; 
    padding: 20px; /* Restored padding for a slightly more substantial block */
    margin-bottom: 24px; /* Space between invite section and list header */
}

.invite-team-form .form-row-inline {
    display: flex;
    gap: 10px; /* Slightly increased gap for better separation of inline elements */
    align-items: stretch; 
    margin-bottom: 0; 
}

.invite-team-form .form-group.username-group {
    flex: 0 1 55%; 
    min-width: 0; 
}

.invite-team-form .form-group.role-group {
    flex: 0 1 35%; 
    min-width: 0; 
}

.invite-team-form .form-group.button-group {
    flex: 0; 
    display: flex; 
    justify-content: flex-end; 
}

.invite-team-form input[type="text"],
.invite-team-form select,
.invite-team-form .invite-member-button {
    height: 38px; 
    font-size: 0.875rem; 
    padding: 0 12px; 
    line-height: 36px; 
    box-sizing: border-box;
    border-radius: 6px; /* Unified radius from previous step */
    width: 100%; 
}

.invite-team-form input[type="text"],
.invite-team-form select {
    background-color: var(--colorBgContainer, #121F28); 
    color: var(--light-text, #EAEAEA);
    border: 1px solid var(--colorBorderBg, #121F28); 
}

.invite-team-form input[type="text"]:focus,
.invite-team-form select:focus {
    border-color: var(--primary-color, #FF008A); 
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 255, 0, 138), 0.3);
}

.invite-team-form select {
    appearance: none; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B0B3B8'%3E%3Cpath d='M8 11.207l-4.604-4.603.707-.707L8 9.793l3.9-3.9.707.707z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center; 
    background-size: 14px; 
    padding-right: 30px; 
}

.invite-team-form .invite-member-button {
    background-color: transparent; 
    color: rgba(255, 255, 255, 0.85); /* UPDATED */
    border: 1px solid var(--primary-color, #FF008A); /* UPDATED to 1px border */
    border-radius: 6px; /* UPDATED */
    padding: 0 20px; /* Maintained horizontal padding for text "INVITE" */
    font-family: "IBM Plex Sans", sans-serif; /* Ensure this is applied */
    font-size: 14px; /* UPDATED */
    font-style: normal; /* ADDED */
    font-weight: 600; /* Maintained */
    line-height: normal; /* UPDATED */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    height: 38px; /* Maintained from shared rule with inputs */
    box-sizing: border-box;
    /* text-transform: uppercase; -- REMOVED if not desired with new style */
    /* letter-spacing: 0.05em; -- REMOVED if not desired with new style */
    white-space: nowrap; 
    display: flex; 
    align-items: center;
    justify-content: center;
}

.invite-team-form .invite-member-button:hover {
    background-color: var(--primary-color, #FF008A);
    color: #FFFFFF;
}

/* --- Team List Section --- */
.team-management-list-section {
    display: flex; 
    flex-direction: column;
    flex-grow: 1; 
    overflow: hidden; 
}

.team-list-header {
    display: flex;
    padding: 0 8px 8px 8px; 
    border-bottom: none; 
    margin-bottom: 10px; /* Increased margin slightly before list items */
    font-size: 0.75rem; 
    color: var(--gray-text, #B0B3B8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0; 
}

.team-list-header .user-col { flex: 0 1 55%; padding-right: 8px; }
.team-list-header .role-col { flex: 0 1 35%; text-align: left; padding-left: 0; }
.team-list-header .actions-col { flex: 0 0 40px; text-align: right; } /* Reduced width for actions */

.team-member-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0; 
    overflow-y: auto; 
    flex-grow: 1; 
}

.team-member-item {
    display: flex;
    align-items: center;
    background-color: transparent; 
    padding: 8px 10px; /* Maintained reduced padding */
    border-bottom: 1px solid #18252d; 
    min-height: 44px; /* Maintained reduced min-height as a base */
    flex-grow: 1; /* ADDED: Allow items to grow and share extra space */
    flex-basis: auto; /* ADDED: Or use the min-height as basis if preferred */
}
.team-member-item:last-child {
    border-bottom: none;
}

.team-member-item .user-info {
    gap: 8px; /* Reduced gap */
    flex: 0 1 55%; 
    padding-right: 8px;
    overflow: hidden; 
    display:flex; 
    align-items:center; 
}

.team-member-item .avatar-container {
    width: 28px; /* Reduced avatar size */
    height: 28px; 
    flex-shrink: 0;
    position: relative; 
}
.team-member-item .avatar-container img {
    width: 100%; 
    height: 100%; 
    border-radius: 6px; /* UPDATED from 50% */
    object-fit: cover;
}

.team-member-item .status-indicator {
    position: absolute;
    top: -1px; 
    right: -1px; 
    width: 7px; 
    height: 7px; 
    border-radius: 50%;
    border: 1px solid #070D11; 
}
.team-member-item .status-indicator.online { background-color: #2ECC71; }
.team-member-item .status-indicator.offline { background-color: #E74C3C; }

.team-member-item .username {
    font-weight: 500;
    font-size: 0.85rem; /* Slightly reduced */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFFFFF; 
}

.team-member-item .user-role {
    flex: 0 1 35%; 
    padding-left: 0; 
    display:flex; 
    align-items:center; 
}

.team-member-item .user-role select,
.team-member-item .user-role .role-text {
    padding: 4px 8px; /* Reduced padding */
    font-size: 0.75rem; /* Reduced font size */
    height: 30px; /* Reduced height */
    max-width: 140px; /* Reduced max-width */
    background-color: var(--colorBgContainer, #121F28);
    color: var(--light-text, #EAEAEA);
    border: 1px solid var(--colorBorderBg, #121F28);
    border-radius: 6px;
    box-sizing: border-box;
    width: 100%; 
}
.team-member-item .user-role select {
    appearance: none; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B0B3B8'%3E%3Cpath d='M8 11.207l-4.604-4.603.707-.707L8 9.793l3.9-3.9.707.707z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center; /* Adjusted for padding */
    background-size: 10px; 
    padding-right: 22px; /* Adjusted for smaller arrow and padding */
}
.team-member-item .user-role .role-text {
    line-height: calc(30px - 8px - 2px); /* height - padding*2 - border*2 */
    display:inline-block;
}

.team-member-item .user-actions {
    flex: 0 0 40px; /* Match header actions-col */
    display: flex; 
    justify-content: flex-end; 
}

.team-member-item .delete-member-button {
    background: transparent;
    border: none;
    color: var(--gray-text, #B0B3B8);
    font-size: 1rem; /* Reduced icon size */
    cursor: pointer;
    padding: 2px; /* Reduced padding */
    line-height: 1;
    transition: color 0.2s ease;
}

.team-member-item .delete-member-button:hover {
    color: var(--primary-color, #FF008A);
}

/* Styles for disabled elements in Team Management */
.team-management-wrapper [disabled],
.team-management-wrapper [disabled]:hover {
    pointer-events: none !important; /* Block all mouse interactions */
    cursor: default !important;
    opacity: 0.5 !important; /* Slightly more faded for clarity */
}

.invite-team-form .invite-member-button[disabled],
.invite-team-form .invite-member-button[disabled]:hover {
    background: transparent !important;
    border-color: var(--primary-color) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* END OF TEAM MANAGEMENT STYLES */

@keyframes subtlePulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.team-member-item .status-indicator.online {
    background-color: #2ECC71; 
    animation: subtlePulse 2s infinite ease-in-out;
}

/*
==========================================================================
  Component: Marketing Tools
==========================================================================
*/
.marketing-tools-wrapper {
    padding: 16px; /* UPDATED */
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--light-text, #EAEAEA);
    height: 100%; 
    display: flex;
    flex-direction: column;
    gap: 16px; /* UPDATED */
    background-color: #070D11; 
    box-sizing: border-box;
}

.project-asset-section {
    border: 2px solid #12212b; /* UPDATED */
    padding: 12px 20px; /* UPDATED */ 
    border-radius: 16px; /* UPDATED */
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    overflow: hidden; 
}

.asset-section-title {
    font-size: 1.3rem; 
    font-weight: 600;
    color: #FFFFFF;
    margin-top: 0; 
    margin-bottom: 10px; 
    flex-shrink: 0; 
}

.asset-content-wrapper {
    display: flex;
    gap: 15px; 
    align-items: stretch; /* Ensure children stretch to max height */
    flex-grow: 1; 
    overflow: hidden; 
}

/* Generic styles for all preview areas - for flex layout */
.asset-preview-area {
    display: flex;
    flex-direction: column; 
    align-items: center; /* Horizontal centering of content */
    justify-content: flex-start; /* UPDATED: Align content to the top */
    box-sizing: border-box; 
}

/* Icon Section Specific Preview */
.project-icon-section .asset-preview-area {
    flex: 0 0 106px; 
    width: 106px; /* Explicitly set width to match card preview */
    /* Height is stretched by parent .asset-content-wrapper */
}

.icon-preview-area .icon-placeholder-k {
    width: 90px; 
    height: 90px;
    font-size: 3rem; 
    background-color: #FF008A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #FFFFFF;
    margin-top: 0; 
}

.icon-preview-area .icon-image-preview { 
    display: none; 
    width: 100%;     /* Fill the 106px width of parent .asset-preview-area */
    height: auto;    /* Adjust height to maintain aspect ratio */
    max-height: 100%;/* Do not exceed the stretched height of the parent .asset-preview-area */
    border-radius: 6px; 
    object-fit: contain; /* Ensure entire image is visible within bounds, scaled down if necessary */
    margin-top: 0; /* Align to top if justify-content on parent is flex-start */
}

/* Card Section Specific Preview */
.project-card-section .asset-preview-area {
    flex: 0 0 106px; /* This should already be set */
    width: 106px; /* Explicitly set width for consistency */
    border: 1px dashed #1F3442; 
    border-radius: 6px;
    padding: 8px; 
    box-sizing: border-box; /* Keep this */
    display: flex; /* Keep this for aligning placeholder content */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; /* For absolute positioning of image preview */
    transition: border-color 0.3s ease, padding 0.3s ease; /* Smooth transition for border/padding */
}

.project-card-section .asset-preview-area.upload-complete {
    border-color: transparent; 
    padding: 0; 
}

.card-preview-area .upload-progress-indicator,
.card-preview-area .uploading-text {
    transition: opacity 0.3s ease;
}

.project-card-section .asset-preview-area.upload-complete .upload-progress-indicator,
.project-card-section .asset-preview-area.upload-complete .uploading-text {
    opacity: 0;
    pointer-events: none; /* Prevent interaction when hidden */
}

.card-preview-area .card-image-preview { 
    display: block; /* Changed from none to block for opacity transition */
    width: 100%;   
    height: 100%;  
    border-radius: 6px; 
    object-fit: contain; 
    position: absolute; /* Position over the placeholder content */
    top: 0;
    left: 0;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease 0.1s; /* Fade in slightly delayed */
}

.project-card-section .asset-preview-area.upload-complete .card-image-preview {
    opacity: 1; /* Fade in when upload is complete */
}

.uploaded-file-info {
    display: flex;
    align-items: center; /* Vertically center content */
    gap: 6px; /* Adjusted from 5px for a bit more space */
    font-size: 0.85rem; /* Unified font size for this row, was 0.8rem */
    height: 36px; /* Match the .upload-button height */
    box-sizing: border-box; /* Include padding/border in height if any were added */
    /* padding: 0 5px; Optional: if a little horizontal padding is desired for the group */
}

.uploaded-file-info .dashicons-paperclip {
    font-size: 1rem; /* Maintained */
    color: var(--gray-text, #B0B3B8);
    line-height: 1; /* Ensure icon itself doesn't add extra height */
}

.uploaded-file-info .filename {
    font-weight: 500; 
    color: #2ECC71; 
    line-height: 1; /* Ensure text itself doesn't add extra height */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1; /* Allow filename to shrink if space is tight */
}

.uploaded-file-info .delete-file-button {
    font-size: 1rem; /* Maintained */
    background: transparent;
    border: none;
    color: var(--gray-text, #B0B3B8);
    cursor: pointer;
    padding: 0 4px; /* Minimal padding around icon */
    margin-left: auto; 
    transition: color 0.2s ease;
    line-height: 1; /* Ensure icon itself doesn't add extra height */
    display: flex; /* For centering icon if needed */
    align-items: center;
}
.uploaded-file-info .delete-file-button .dashicons-trash {
    display: block; /* Helps with consistent icon rendering */
}

.uploaded-file-info .delete-file-button:hover {
    color: var(--primary-color, #FF008A);
}

.upload-progress-indicator { /* Container for the SVG */
    width: 60px; /* Match SVG width attribute */
    height: 60px; /* Match SVG height attribute */
    margin-bottom: 5px; 
    display: flex; /* To center SVG if SVG itself isn't 100% of this div */
    align-items: center;
    justify-content: center;
    /* Removed border, as it's now handled by SVG circles */
}

/* .upload-progress-indicator::before { REMOVE THIS ENTIRE RULE } */

/* @keyframes rotateProgress { REMOVE THIS ENTIRE RULE if it was only for the old ::before element } */


.progress-ring-arc {
    transition: stroke-dasharray 0.25s linear; /* Smooth transition for progress update */
    /* transform and initial stroke-dasharray are set in HTML/JS */
}

.upload-progress-indicator .progress-text { /* SVG <text> element */
    font-family: 'IBM Plex Sans', sans-serif; /* Ensure font consistency if not inherited */
    /* Most styling (size, weight, fill, anchor, dy) is via SVG attributes */
}

.card-preview-area .uploading-text {
    font-size: 0.75rem; 
    color: var(--gray-text, #B0B3B8);
}

.project-card-section .upload-button {
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #121F28; 
    color: var(--light-text, #EAEAEA); 
    border: 1px solid #121F28; 
    border-radius: 6px; 
    padding: 0 12px; 
    font-size: 0.85rem; 
    font-weight: 500;
    height: 36px; 
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.project-card-section .upload-button .upload-button-icon {
    width: 1em; 
    height: 1em;
    fill: currentColor;
}

.project-card-section .upload-button:hover {
    opacity: 0.85;
}

/* Shared Details Area Styles (used by both Icon and Card sections) */
.asset-details-area {
    flex: 1 1 auto; 
    display: flex;
    flex-direction: column;
    gap: 6px; 
}

.requirements-title {
    font-size: 0.85rem; 
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 2px 0; 
}

.requirements-list {
    list-style: none;
    padding: 0;
    margin: 0 0 4px 0; 
    font-size: 0.75rem; 
    color: var(--gray-text, #B0B3B8);
    line-height: 1.3; 
}

.separator-line {
    margin: 4px 0; 
    border: none;
    height: 1px;
    background-color: var(--border-color, #262930);
}

/* Added Media Query for Analytics Table responsiveness */
@media (max-width: 430px) {
    .analytics-table {
        --analytics-table-container-height: 400px;
        --analytics-table-header-h: 54px; /* User wants header at 54px */
        --analytics-table-hashtag-h: 40px;
        --analytics-table-chat-list-header-h: 30px;
        /* --analytics-table-row-h will be: (400 - 54 - 40 - 30) / 5 = 55.2px */
    }

    /* Remove less specific rule for .analytics-table .analytics-header */
    /* .analytics-table .analytics-header { ... } */

    /* More specific rule for the header to ensure overrides */
    div.value-prop-content .analytics-table .analytics-header {
        --analytics-table-header-h: 54px; /* Define variable locally for header to ensure 54px */
        height: var(--analytics-table-header-h);   /* Use locally defined variable */
        padding: 4px 12px !important;             /* Existing padding, should be comfortable */
        box-sizing: border-box;
        /* Ensure other essential display properties are here if they were in the old rule and not inherited */
        display: flex; /* Assuming this was needed from the base style */
        align-items: center; /* Assuming this was needed */
        justify-content: space-between; /* Assuming this was needed */
    }

    /* Styles for content within the more specific header rule */
    div.value-prop-content .analytics-table .analytics-header .analytics-header-icon {
        width: 24px;
        height: 24px;
    }
    div.value-prop-content .analytics-table .analytics-header .analytics-header-icon svg {
        width: 14px;
        height: 14px;
    }
    div.value-prop-content .analytics-table .analytics-header .title-group {
        gap: 1px; 
    }
    div.value-prop-content .analytics-table .analytics-header .header-title {
        font-size: 0.85rem; /* Further reduced to help title-group fit */
        margin-bottom: 0; 
    }
    div.value-prop-content .analytics-table .analytics-header .total-impressions {
        font-size: 0.6rem; /* Further reduced to help title-group fit */
    }
    div.value-prop-content .analytics-table .analytics-header .rooms-label {
        font-size: 0.65rem; 
        margin-bottom: 0;
    }
    div.value-prop-content .analytics-table .analytics-header .rooms-count {
        font-size: 1.4rem; 
    }

    .analytics-table .hashtag-container {
        padding: 0 10px; /* Reduced vertical padding, horizontal maintained */
        box-sizing: border-box; /* Ensure padding is included in height */
    }
    .value-prop-content .analytics-table .hashtag-container .hashtag, /* Targeting specific existing rule */
    .analytics-table .hashtag-container .hashtag { /* General fallback */
        padding: 4px 10px;
        font-size: 0.75rem;
        margin-right: 6px;
    }

    .analytics-table .chat-room-section > .section-header {
        padding: 5px 15px;
        font-size: 0.7rem;
        height: var(--analytics-table-chat-list-header-h); /* Explicitly use the overridden variable */
        box-sizing: border-box; /* Ensure padding is included in height */
    }

    .analytics-table .chat-room-section > .chat-room-list {
        /* height: var(--analytics-table-chat-list-available-h); REMOVED - let flex-grow handle height */
        overflow-y: auto; /* CHANGED from hidden - Allow scrolling like desktop if content exceeds space */
        flex-grow: 1; /* MODIFIED - Ensure list takes available space in section */
    }

    .analytics-table .chat-room-section .chat-room-item {
        padding: 5px 15px;
        height: 20%;
        box-sizing: border-box; /* Ensure padding/border included in height */
    }
    .analytics-table .chat-room-section .chat-room-item .room-logo {
        width: 32px;
        height: 32px;
        margin-right: 12px;
    }
    .analytics-table .chat-room-section .chat-room-item .room-info {
        gap: 8px; /* Slightly reduced gap */
    }
    .analytics-table .chat-room-section .chat-room-item .room-name {
        font-size: 0.8rem;
    }
    .analytics-table .chat-room-section .chat-room-item .room-fullname {
        font-size: 0.65rem;
    }
    .analytics-table .chat-room-section .chat-room-item .impression-count {
        font-size: 0.8rem;
    }

    .analytics-table .chat-room-section .chat-room-item:last-child {
        border-bottom: none; /* Ensure last visible item has no bottom border */
    }
}

/* Added Media Query for Team Management responsiveness */
@media (max-width: 430px) {
    .team-management-wrapper {
        padding: 10px 15px; /* Reduced wrapper padding */
        gap: 12px; /* Slightly reduce main gap */
    }

    .team-management-header-group {
        margin-bottom: 10px; /* Reduced space below title group */
        gap: 8px;
    }
    .team-management-header-group .team-section-title {
        font-size: 1.3rem;
    }
    .team-management-header-group .team-title-icon {
        width: 22px;
        height: 22px;
    }

    .team-management-invite-section {
        padding: 12px; /* Reduced padding */
        margin-bottom: 12px; /* Reduced space below invite section */
    }
    .invite-team-form .form-row-inline {
        flex-direction: column; /* Stack form elements */
        gap: 10px; /* Gap between stacked elements */
        align-items: stretch; /* Make form groups take full width */
    }
    .invite-team-form .form-group.button-group {
        justify-content: flex-start; /* Align button to start if not full width */
        /* width: 100%; /* Or make button group full width if button should stretch */
    }
    .invite-team-form input[type="text"],
    .invite-team-form select,
    .invite-team-form .invite-member-button {
        height: 34px;
        font-size: 0.8rem;
        padding: 0 10px; /* Adjusted padding for smaller height */
    }
    .invite-team-form .invite-member-button {
        width: 100%; /* Make button full width in stacked layout */
    }

    .team-list-header {
        padding: 0 8px 6px 8px; /* Reduced padding */
        font-size: 0.7rem;
        margin-bottom: 8px; /* Reduced space before list items */
    }
    .team-list-header .actions-col {
        flex: 0 0 30px; /* Smaller actions col */
    }

    .team-member-item {
        padding: 6px 8px; /* Reduced item padding */
        min-height: auto; /* Allow item to shrink based on content */
        /* flex-grow: 0; Remove if previously added, rely on parent flex */
        /* flex-basis: auto; Remove if previously added */
    }
    .team-member-item .user-info {
        gap: 6px; /* Reduced gap */
    }
    .team-member-item .avatar-container {
        width: 24px;
        height: 24px;
    }
    .team-member-item .status-indicator {
        width: 6px;
        height: 6px;
        top: -2px;
        right: -2px;
        border-width: 1px;
    }
    .team-member-item .username {
        font-size: 0.8rem;
    }
    .team-member-item .user-role select,
    .team-member-item .user-role .role-text {
        height: 28px;
        font-size: 0.75rem; /* Slightly increased for readability */
        padding: 0 8px; /* Adjusted for new height */
        max-width: 110px; /* Slightly wider if space allows */
    }
    .team-member-item .user-role select {
        background-size: 10px;
        padding-right: 20px;
    }
    .team-member-item .user-actions {
        flex: 0 0 30px; /* Match header actions-col */
    }
    .team-member-item .delete-member-button {
        font-size: 0.9rem;
        padding: 2px;
    }
}

@media (max-width: 430px) {
    .team-management-wrapper {
        padding: 10px 15px; 
        gap: 10px; /* Reduced main gap */
    }

    .team-management-header-group {
        margin-bottom: 8px; /* Further reduced */
        gap: 6px; /* Further reduced */
    }
    .team-management-header-group .team-section-title {
        font-size: 1.1rem; /* Further reduced */
    }
    .team-management-header-group .team-title-icon {
        width: 20px; /* Further reduced */
        height: 20px;
    }

    .team-management-invite-section {
        padding: 10px; /* Further reduced */
        margin-bottom: 10px; /* Further reduced */
    }
    .invite-team-form .form-row-inline {
        gap: 8px; /* Further reduced */
    }
    .invite-team-form input[type="text"],
    .invite-team-form select,
    .invite-team-form .invite-member-button {
        height: 30px; /* Further reduced */
        font-size: 0.75rem; /* Further reduced */
        padding: 0 8px;
    }

    .team-list-header {
        padding: 0 4px 4px 4px; /* Further reduced */
        font-size: 0.65rem; /* Further reduced */
        margin-bottom: 6px; /* Further reduced */
    }

    .team-member-item {
        padding: 4px 6px; /* Further reduced item padding */
    }
    .team-member-item .avatar-container {
        width: 20px; /* Further reduced */
        height: 20px;
    }
    .team-member-item .username {
        font-size: 0.75rem; /* Further reduced */
    }
    .team-member-item .user-role select,
    .team-member-item .user-role .role-text {
        height: 26px; /* Further reduced */
        font-size: 0.7rem; /* Further reduced */
        padding: 0 6px; 
        max-width: 100px; /* Adjust as needed */
    }
    .team-member-item .user-role select {
        background-size: 9px;
        padding-right: 18px;
    }
}