/* WP Simple Guest Chat - panels.css */
/* Styles for the right-hand panel (user list, channel list) */

.wsgc-chat-instance-wrapper .wsgc-user-list-panel {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    width: auto; /* MODIFICATION: Removed brittle calc() function. Width is now determined by flex children. */
    margin-left: 5px; /* Optional: space between message column and panel */
    transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out, border-left-color 0.3s ease-in-out;
    position: relative; 
    overflow: hidden; /* Prevent panel itself from expanding due to long content or showing scrollbars */
    box-sizing: border-box;
}

.wsgc-chat-instance-wrapper .wsgc-user-list-toggle-btn {
    background: none;
    border: none;
    color: #555;
    padding: 0; /* Remove padding if width is fixed at 30px */
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    height: 100%; 
    width: 30px; /* Fixed width for the toggle button part */
    box-sizing: border-box;
    border-right: 1px solid #eee; /* Visual separator when expanded */
}
.wsgc-chat-instance-wrapper .wsgc-user-list-toggle-btn:hover {
    background-color: #e0e0e0;
}
.wsgc-chat-instance-wrapper .wsgc-user-list-toggle-btn .wsgc-toggle-icon {
    display: inline-block;
    font-weight: bold;
}

.wsgc-chat-instance-wrapper .wsgc-user-list-column {
    flex-basis: 150px; 
    min-width: 150px; /* Enforce this width when not 0 */
    max-width: 150px; /* Strictly enforce this width */
    flex-shrink: 0;
    padding-left: 10px; /* Inner padding for content, distinct from panel's overall structure */
    height: 100%; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide content that would overflow this column's fixed width */
    transition: flex-basis 0.3s ease-in-out, padding-left 0.3s ease-in-out, opacity 0.3s ease-in-out, min-width 0.3s ease-in-out;
    opacity: 1;
}
.wsgc-chat-instance-wrapper .wsgc-user-list-column-inner {
    overflow-y: auto; 
    overflow-x: hidden; /* Prevent horizontal scrollbar here, rely on text ellipsis */
    height: 100%;
    padding-right: 5px; /* Space for vertical scrollbar if needed */
    display: flex;
    flex-direction: column; 
}

/* Collapsed State for User List Panel */
.wsgc-chat-instance-wrapper.user-list-collapsed .wsgc-user-list-panel {
    width: 30px; /* Only toggle button visible */
}
.wsgc-chat-instance-wrapper.user-list-collapsed .wsgc-user-list-toggle-btn {
    border-right-color: transparent; /* Hide separator when collapsed */
}
.wsgc-chat-instance-wrapper.user-list-collapsed .wsgc-user-list-column {
    flex-basis: 0 !important;
    min-width: 0 !important; /* Allow it to shrink to 0 */
    padding-left: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

/* Panel Section Headers (Channels, Online Users) */
.wsgc-chat-instance-wrapper .wsgc-panel-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 5px; 
    flex-shrink: 0; 
    cursor: pointer; 
}
.wsgc-chat-instance-wrapper .wsgc-panel-section-header h4 {
    font-size: 0.95em;
    color: #333;
    margin: 0;
    flex-grow: 1; 
    white-space: nowrap; /* Prevent header text from wrapping */
    overflow: hidden;    /* Hide overflow if header text is too long */
    text-overflow: ellipsis; /* Show ellipsis for long header text */
}

/* Channel List Section */
.wsgc-chat-instance-wrapper .wsgc-channel-list-section {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0; 
}
.wsgc-chat-instance-wrapper .wsgc-channel-list-toggle,
.wsgc-chat-instance-wrapper .wsgc-create-channel-btn {
    background: none;
    border: none;
    color: #555;
    padding: 2px 5px;
    font-size: 0.9em;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}
.wsgc-chat-instance-wrapper .wsgc-create-channel-btn {
    font-size: 1.2em;
    font-weight: bold;
}
.wsgc-chat-instance-wrapper .wsgc-channel-list-toggle:hover,
.wsgc-chat-instance-wrapper .wsgc-create-channel-btn:hover {
    color: #0073aa; 
}
.wsgc-chat-instance-wrapper .wsgc-channel-list-toggle .wsgc-arrow-icon {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    font-size: 0.8em;
}
.wsgc-chat-instance-wrapper .wsgc-channel-list-toggle[aria-expanded="false"] .wsgc-arrow-icon {
    transform: rotate(-90deg);
}
.wsgc-chat-instance-wrapper .wsgc-channel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 150px; 
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scrollbar, rely on text ellipsis in items */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1;
}
.wsgc-chat-instance-wrapper .wsgc-channel-list.collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
}
.wsgc-chat-instance-wrapper .wsgc-channel-list li.wsgc-channel-item {
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
}
.wsgc-chat-instance-wrapper .wsgc-channel-list li.wsgc-channel-item:hover {
    background-color: #f0f0f0;
}
.wsgc-chat-instance-wrapper .wsgc-channel-list li.wsgc-channel-item.active-channel {
    background-color: #0073aa; 
    color: white;
    font-weight: bold;
}
.wsgc-chat-instance-wrapper .wsgc-channel-list li.wsgc-channel-item.active-channel:hover {
    background-color: #005a87; 
}
.wsgc-chat-instance-wrapper .wsgc-channel-list .wsgc-loading-channels,
.wsgc-chat-instance-wrapper .wsgc-channel-list .wsgc-no-channels {
    padding: 8px;
    font-style: italic;
    color: #777;
    font-size: 0.9em;
    text-align: center;
}
.wsgc-channel-item .wsgc-channel-lock-icon {
    font-size: 0.8em;
    opacity: 0.7;
}

/* --- ADDED/MODIFIED for Channel Unread Indicator --- */
.wsgc-chat-instance-wrapper .wsgc-channel-list li.wsgc-channel-item.wsgc-has-unread-indicator {
    font-weight: bold; 
}

@keyframes wsgcChannelUnreadBlink {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

.wsgc-chat-instance-wrapper .wsgc-channel-list li.wsgc-channel-item .wsgc-unread-channel-dot {
    color: #ff0000; 
    font-size: 1.2em; 
    line-height: 1;
    margin-left: 4px; 
    display: inline-block;
    animation: wsgcChannelUnreadBlink 1.5s infinite ease-in-out; 
}

.wsgc-chat-instance-wrapper .wsgc-channel-list li.wsgc-channel-item.wsgc-has-unread-indicator:hover .wsgc-unread-channel-dot {
    animation-play-state: paused;
}
.wsgc-chat-instance-wrapper .wsgc-channel-list li.wsgc-channel-item.wsgc-has-unread-indicator:not(:hover) .wsgc-unread-channel-dot {
    animation-play-state: running; 
}
/* --- END Channel Unread Indicator --- */


/* User List Section */
.wsgc-chat-instance-wrapper .wsgc-user-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; 
    overflow-y: auto; 
    overflow-x: hidden; /* Prevent horizontal scrollbar, rely on text ellipsis in items */
}
.wsgc-user-list li {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    position: relative;
    gap: 6px;
    border-radius: 3px;
    transition: background-color 0.15s ease-in-out;
    /* Ensure list items themselves don't cause parent to scroll horizontally */
    overflow: hidden; 
}
.wsgc-user-list li .wsgc-status-dot { 
    flex-shrink: 0;
}
.wsgc-user-list li .wsgc-user-list-name {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0; /* Helps with flex shrinking and ellipsis */
}
.wsgc-user-list li.wsgc-other-in-list:not(.wsgc-user-has-unread):not(.wsgc-private-chat-active-target):hover {
    background-color: #f0f0f0;
    cursor: pointer;
}
.wsgc-user-list li.wsgc-other-in-list .wsgc-user-chat-icon {
    flex-shrink: 0;
    display: inline-block;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
    color: #555;
    font-size: 1.1em;
    line-height: 1;
    margin-left: auto; 
}
.wsgc-user-list li.wsgc-other-in-list:hover .wsgc-user-chat-icon {
    opacity: 1;
    color: #0073aa; 
}
.wsgc-user-list li.wsgc-other-in-list .wsgc-user-chat-icon::before {
    content: '➤'; 
}

/* Unread Message Indication in User List */
@keyframes wsgcUnreadPulse {
    0% { background-color: #ffebee; }
    50% { background-color: #ffcdd2; }
    100% { background-color: #ffebee; }
}
.wsgc-chat-instance-wrapper .wsgc-user-list li.wsgc-user-has-unread.wsgc-other-in-list:not(.wsgc-private-chat-active-target) {
    animation: wsgcUnreadPulse 1.5s infinite ease-in-out;
}
.wsgc-chat-instance-wrapper .wsgc-user-list li.wsgc-user-has-unread.wsgc-other-in-list:not(.wsgc-private-chat-active-target):hover {
    background-color: #ef9a9a; 
    animation-play-state: paused;
}
.wsgc-chat-instance-wrapper .wsgc-user-list li.wsgc-user-has-unread.wsgc-other-in-list:not(.wsgc-private-chat-active-target):not(:hover) {
    animation-play-state: running; 
}
.wsgc-chat-instance-wrapper .wsgc-user-list li.wsgc-user-has-unread .wsgc-user-list-name {
    font-weight: bold;
}

/* Self in User List & Active Private Chat Target */
.wsgc-user-list li.wsgc-self-in-list:hover {
    background-color: transparent; 
    cursor: default;
}
.wsgc-user-list li.wsgc-private-chat-active-target {
    background-color: #e0e8f0 !important; 
    animation: none !important; 
    font-weight: bold;
}
.wsgc-user-list li.wsgc-private-chat-active-target:hover {
    background-color: #d0d8e0 !important; 
}


/* Status Dots & Changer in Header/User List */
.wsgc-status-dot { 
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background-color: #ccc; 
    border: 1px solid rgba(0,0,0,0.1);
}
.wsgc-chat-instance-wrapper .wsgc-current-status-indicator-dot { 
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}
.wsgc-status-dot.status-online,
.wsgc-chat-instance-wrapper .wsgc-current-status-indicator-dot.status-online {
    background-color: #28a745;
}
.wsgc-status-dot.status-away,
.wsgc-chat-instance-wrapper .wsgc-current-status-indicator-dot.status-away {
    background-color: #ffc107;
}
.wsgc-status-dot.status-dnd,
.wsgc-chat-instance-wrapper .wsgc-current-status-indicator-dot.status-dnd {
    background-color: #dc3545;
}
.wsgc-status-dot.status-offline, 
.wsgc-chat-instance-wrapper .wsgc-current-status-indicator-dot.status-offline {
    background-color: #6c757d;
}

.wsgc-chat-instance-wrapper .wsgc-status-changer-container {
    display: inline-flex; 
    align-items: center;
    gap: 5px;
    margin-left: 5px; 
}
.wsgc-chat-instance-wrapper .wsgc-status-select {
    padding: 2px 5px;
    font-size: 0.8em;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    max-width: 120px; 
}