/* css/chat.css */
#recent-panel { flex: 0 0 35%; }
#chat-panel { flex-grow: 1; }

#history-list { list-style: none; margin: 0; padding: 10px 20px 20px 20px; }
.history-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #333; font-size: 12px; line-height: 1.5; align-items: flex-start; }
.history-text { flex-grow: 1; padding-right: 15px; overflow-wrap: break-word; }
.history-artist { color: var(--theme-light); font-weight: 700; }
.history-divider { color: #666; margin: 0 1px; }
.history-title { color: #e8e8e8; }
.history-index { font-family: monospace; font-size: 11px; color: #666; flex-shrink: 0; padding-top: 2px; }

#chat-messages { display: flex; flex-direction: column; gap: 8px; }
.chat-msg { font-size: 12px; line-height: 1.4; word-wrap: break-word; }
.chat-time { color: #666; font-family: monospace; margin-right: 5px; }
.chat-name { font-weight: 700; margin-right: 5px; }
.chat-text { color: #e8e8e8; }
#chat-input-area { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #333; padding: 15px; background-color: #110e0c; }
#chat-username, #chat-options { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid #333; color: var(--theme-primary); font-family: monospace; font-size: 11px; padding-bottom: 4px; outline: none; transition: 0.2s; }
#chat-options { color: #888; }
#chat-username:focus, #chat-options:focus { border-bottom: 1px solid var(--theme-primary); }
#chat-input { width: 100%; background: transparent; border: none; color: #e8e8e8; font-family: 'Open Sans', sans-serif; outline: none; }
.chat-spoiler { background-color: #28231f; color: transparent; border-radius: 4px; padding: 0 5px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.chat-spoiler:hover { background-color: rgba(40, 35, 31, 0.4); color: inherit; }

.chat-react-btn { background-color: transparent; color: var(--theme-light); border: none; padding: 0; cursor: pointer; transition: 0.1s; display: flex; align-items: center; justify-content: center; }
.chat-react-btn:hover { color: #e8e8e8; transform: scale(1.2); }
.chat-react-btn:active { transform: scale(0.9); }

#reaction-layer { position: fixed; bottom: 100px; right: 40px; width: 100px; height: 60vh; pointer-events: none; z-index: 9999; }
.floating-heart { position: absolute; bottom: 0; color: #ff5555; opacity: 0; animation: floatUp ease-in forwards; }
@keyframes floatUp { 0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; } 15% { transform: translate(-50%, -30px) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, calc(-60vh)) scale(1); opacity: 0; } }

#mobile-chat-fab, #mobile-chat-close { display: none; }

/* === MOBILE CHAT FIXES === */
@media (max-width: 900px) {
    #reaction-layer { right: 10px; bottom: 80px; }
    #mobile-chat-fab { display: flex; align-items: center; justify-content: center; position: fixed; bottom: 30px; right: 25px; width: 56px; height: 56px; background: var(--theme-primary); border-radius: 50%; border: 4px solid #121212; color: #121212; cursor: pointer; z-index: 100; }
    #recent-panel { display: none !important; }
    #chat-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 150; pointer-events: auto; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.2s ease; }
    #chat-panel.chat-open { opacity: 1; visibility: visible; transform: translateY(0); }
    #mobile-chat-close { display: block; background: transparent; border: none; color: #ff5555; font-size: 16px; font-weight: bold; cursor: pointer; }
    .panel-header { display: flex; justify-content: space-between; align-items: center; }
}