body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
        #chat-container { width: 95%; margin: 4px auto; max-width: 900px; }
    
    #messages {
    height: 550px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 4px;
    background: #fff;
    /* --- Add these two lines --- */
/* display: flex;
    flex-direction: column-reverse; */
}

    
        .message { margin: 5px 0; padding: 5px; padding-right: 30px; border-bottom: 1px solid #eee; word-wrap: break-word; position: relative; }
        .message a { color: #007bff; text-decoration: none; }
        .message a:hover { text-decoration: underline; }
        .message img, .message iframe { max-width: 600px; max-height: 300px; border-radius: 4px; margin: 5px 0; display: block; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .message img:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; }
        
        /* GIF Control Styles */
        .gif-controlled { 
            position: relative; 
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.2s ease;
        }
        .gif-controlled:hover { 
            border-color: #007bff; 
        }
        .gif-controlled::after {
            content: "▶";
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 4px 6px;
            border-radius: 50%;
            font-size: 12px;
            pointer-events: none;
            opacity: 0.9;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gif-controlled.playing::after {
            content: "⏸";
        }
        .gif-controlled.loading::after {
            content: "⏳";
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        #message-form, #prefs-form { display: flex; gap: 4px; margin-bottom: 2px; }
        #message-input { flex-grow: 1; padding-bottom: px; }
        button { padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #0056b3; }
        #image-browser-btn { background: #28a745; padding: 8px 12px; }
        #image-browser-btn:hover { background: #1e7e34; }
        #prefs-panel { background: #f8f9fa; padding: 2px; border-radius: 2px; margin-bottom: 2px; }
        #chat-wrapper { display: flex; flex-wrap: wrap; gap: 4px; }
        #users-panel { background: #f8f9fa; padding: 2px; border-radius: 2px; width: 120px; }
        .message:hover .delete-btn.own-message { display: inline-block; }
        #chat-main { flex-grow: 1; min-width: 300px; }
        .online-user { padding: 2px; border-bottom: 1px solid #eee; }
        .online-user span { display: inline-block; margin-right: 5px; }
        #online-count { font-weight: bold; color: #28a745; margin-bottom: 2px; padding: 2px; border-bottom: 2px solid #28a745; }
        #error-message { color: red; padding: 5px; }
        
        /* Modal Styles */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 1000; }
        .modal-box { background: white; padding: 5px; border-radius: 8px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3); max-width: 90%; }
        .modal-buttons { margin-top: 4px; }
        .modal-buttons button { margin: 0 10px; border-radius: 4px; padding: 8px 16px; }

        /* Image Modal Styles */
        .image-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 1001; cursor: pointer; }
        .image-modal-content { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }

        /* Image Browser Modal Styles */
        .image-browser-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 1002; }
        .image-browser-content { background: white; width: 90%; max-width: 800px; height: 80%; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
        .image-browser-header { padding: 15px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; }
        .image-browser-header h3 { margin: 0; color: #333; }
        .close-browser { background: #dc3545; color: white; border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; }
        .close-browser:hover { background: #c82333; }
        .browser-navigation { padding: 10px 15px; background: #f1f3f4; border-bottom: 1px solid #ddd; }
        .breadcrumb { display: flex; align-items: center; gap: 5px; }
        .breadcrumb-item { color: #007bff; cursor: pointer; text-decoration: none; }
        .breadcrumb-item:hover { text-decoration: underline; }
        .breadcrumb-separator { color: #6c757d; }
        .browser-content { flex: 1; overflow-y: auto; padding: 15px; }
        .directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; margin-bottom: 4px; }
        .directory-item { text-align: center; cursor: pointer; padding: 10px; border-radius: 6px; border: 1px solid #ddd; background: #f8f9fa; }
        .directory-item:hover { background: #e9ecef; border-color: #007bff; }
        .directory-icon { font-size: 24px; margin-bottom: 5px; }
        .directory-name { font-size: 12px; word-break: break-word; }
        .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
        .image-item { position: relative; cursor: pointer; border-radius: 6px; overflow: hidden; border: 2px solid transparent; }
        .image-item:hover { border-color: #007bff; }
        .image-thumbnail { width: 100%; height: 80px; object-fit: cover; display: block; }
        .image-name { font-size: 10px; padding: 4px; background: rgba(0,0,0,0.7); color: white; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
        .loading { text-align: center; padding: 4x; color: #6c757d; }
        .error { text-align: center; padding: 4px; color: #dc3545; }


/* Add these new styles and replace the old ones for .message and .delete-btn */
.message {
    position: relative;
    padding: 8px 5px; /* Add some padding */
}
.message-text, .edited-indicator {
    word-wrap: break-word; /* Ensure long messages wrap */
}
.edited-indicator {
    font-size: 0.8em;
    color: #6c757d;
    font-style: italic;
    margin-left: 8px;
}
.message-actions {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Hide by default */
    gap: 5px;
    z-index: 5; 
    background: #f8f9fa;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}
.message:hover .message-actions {
    display: flex; /* Show on hover */
}
.message-actions button {
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    border: none;
    line-height: 1.5;
}
.edit-btn { background: skyblue; color: black; }
.delete-btn { background: #dc3545; color: white; }
.delete-btn.own-message { display: inline-block; } /* Make sure your own delete button is visible */

/* Styles for the inline editing form */
.edit-container { margin-top: 5px; }
.edit-container textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #007bff;
    border-radius: 4px;
    resize: vertical;
    min-height: 50px;
}
.edit-controls {
    margin-top: 5px;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}
.edit-controls button { font-size: 12px; padding: 4px 10px; }

/* Add these new styles for reactions */
.reactions-display {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 8px;
    margin-left: 5px;
}
.reaction-pill {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    background-color: #f1f3f4;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.reaction-pill:hover {
    background-color: #e9ecef;
}
.reaction-pill.user-reacted {
    background-color: #d1e7fd; /* A light blue to show you've reacted */
    border-color: #0d6efd;
}
.reaction-count {
    margin-left: 4px;
    color: #495057;
    font-weight: 600;
}
.add-reaction-btn {
    font-size: 22px;
background: yellow;
color: black;
    padding: 2px;
    order: -1; /* Puts the '+' button first */
}
/* The pop-up emoji picker */
.reaction-picker {
    position: absolute;
    bottom: 35px; /* Position above the actions menu */
    right: 5px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.reaction-picker button {
    font-size: 24px;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s, background-color 0.2s;
}
.reaction-picker button:hover {
    transform: scale(1.2);
    background-color: #e9ecef;
}

/* --- Wikipedia Embedded Card Styles --- */
.wiki-card {
    border: 1px solid #c8ccd1;
    border-radius: 4px;
    padding: 12px;
    margin-top: 8px;
    background-color: #f8f9fa;
    max-width: 560px; /* Match video width */
}
.wiki-card.is-loading {
    color: #54595d;
    font-style: italic;
}
.wiki-card-content {
    display: flex;
    gap: 15px;
    text-decoration: none; /* Make the whole card a clickable link */
    color: inherit;
    display: flex;
    align-items: flex-start;
}
.wiki-card-content:hover h3 {
    text-decoration: underline; /* Underline title on hover */
}
.wiki-card-text h3 {
    font-size: 16px;
    margin: 0 0 5px 0;
}
.wiki-card-text p {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    max-height: 100px; /* Limit summary height */
    overflow: hidden;
}
.wiki-card-image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

#room-selection { width: 300px; }

    </style>
</head>
<body>
    <div id="chat-container">
        <div id="chat-wrapper">
            <div id="chat-main">
                <div id="room-selection">
                    <label for="room-switcher">Room:</label>
                    <select id="room-switcher">
                        <?php
                            $rooms = file('room_list.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
                            foreach ($rooms as $room) {
                                echo "<option value=\"" . htmlspecialchars($room) . "\">" . htmlspecialchars($room) . "</option>";
                            }
                        ?>
		    </select>
</div>

</div>


        <div id="prefs-panel">
            <form id="prefs-form">
                <input type="text" id="custom-name" name="customName" placeholder="Custom Username" value="">
                <input type="color" id="message-color" name="color" value="#f57900">
                <button type="submit">update</button>
            </form>
	    <div id="error-message"></div>

</div>
            <div id="users-panel">
                <div id="online-count">Users Online: 0</div>
		<div id="online-users-list" hidden></div>






        </div>



                </div>

                <div id="messages">
                    <div id="loading-indicator" style="display: none; text-align: center; padding: 10px;">Loading older messages...</div>
                </div>
                <form id="message-form">
                    <input type="text" id="message-input" placeholder="Type your message..." required>
                    <button type="submit">Send</button>
                    <button type="button" id="image-browser-btn" title="Browse Images">📷</button>
                </form>
        </div>
        </div>
    </div>

    <div id="custom-modal" class="modal-overlay">
        <div class="modal-box">
            <p id="modal-message"></p>
            <div class="modal-buttons">
                <button id="modal-ok">OK</button>
                <button id="modal-cancel">Cancel</button>
            </div>
        </div>
    </div>

    <div id="image-modal" class="image-modal-overlay">
        <img id="image-modal-content" class="image-modal-content" src="" alt="">
    </div>

    <div id="image-browser-modal" class="image-browser-modal">
        <div class="image-browser-content">
            <div class="image-browser-header">
                <h3>Browse Images</h3>
                <button class="close-browser" onclick="closeImageBrowser()">✕</button>
            </div>
            <div class="browser-navigation">
                <div class="breadcrumb" id="breadcrumb"></div>
            </div>
            <div class="browser-content" id="browser-content">
                <div class="loading">Loading...</div>
            </div>
        </div>
    </div>