/* Chat List */
.chat-item-wrapper { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-color); background: var(--delete-bg); }
.delete-btn-bg { position: absolute; right: 0; top: 0; bottom: 0; width: 80px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; cursor: pointer; z-index: 1; font-size: 14px; }
.chat-item { 
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; 
    background-color: var(--surface-color); position: relative; z-index: 2; 
    transition: background-color 0.1s, transform 0.2s ease-out; 
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.chat-item:hover { background-color: var(--surface-hover); }
.chat-item.holding { opacity: 0.7 !important; background-color: var(--surface-hover) !important; }

.chat-info { flex: 1; overflow: hidden; pointer-events: none; display: flex; align-items: center; gap: 15px; }
.chat-icon { width: 44px; height: 44px; border-radius: 50%; background-color: var(--border-color); flex-shrink: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-muted); }
.chat-desc { display: flex; flex-direction: column; overflow: hidden; }
.chat-desc h3 { font-size: 16px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.chat-desc p { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top:2px; }

.chat-meta { text-align: right; margin-left: 10px; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; height: 44px; }
.chat-date { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.chat-badge { font-size: 10px; background: var(--border-color); color: var(--text-muted); border-radius: 10px; padding: 2px 6px; }

/* Room */
.virtual-spacer { width: 1px; }
.message-list { position: absolute; top: 0; left: 0; width: 100%; padding: 15px 15px; display: flex; flex-direction: column; }
.message-row { display: flex; flex-direction: column; margin-bottom: 12px; width: 100%; }
.date-label { 
    align-self: center; background-color: var(--border-color); color: var(--text-muted); 
    padding: 6px 14px; border-radius: 14px; font-size: 12px; margin-bottom: 15px; margin-top: 5px; text-align: center; font-weight: 500;
}

.message-wrapper { display: flex; max-width: 85%; align-items: flex-end; transition: flex-direction 0.2s; user-select: text; -webkit-user-select: text; gap: 8px; }
.message-wrapper.sent { align-self: flex-end; flex-direction: row-reverse; }
.message-wrapper.received { align-self: flex-start; }

.bubble { 
    padding: 10px 14px; border-radius: 18px; font-size: 14.5px; word-wrap: break-word; white-space: pre-wrap; line-height: 1.4; 
    border: 1px solid var(--bubble-border);
    cursor: default; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; 
    word-break: break-all; overflow-wrap: anywhere;
}
.bubble a { color: #007aff; text-decoration: underline; pointer-events: auto; }
.message-wrapper.sent .bubble { background-color: var(--bubble-sent); border-bottom-right-radius: 4px; border: 1px solid transparent; color: #fff; }
[data-theme="pop"] .message-wrapper.sent .bubble { color: #fff; }
[data-theme="light"] .message-wrapper.sent .bubble, [data-theme="line"] .message-wrapper.sent .bubble, [data-theme="pop"] .message-wrapper.sent .bubble { color: inherit; }
/* V12: pop sent bubble must have white text for dark purple */
[data-theme="pop"] .message-wrapper.sent .bubble { color: #ffffff; }

.message-wrapper.received .bubble { background-color: var(--bubble-recv); border-bottom-left-radius: 4px; }

/* Favorite Star */
.favorite-star { position: absolute; top: -3px; color: #ffcc00; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); z-index: 5; }
.message-wrapper.sent .favorite-star { left: -8px; }
.message-wrapper.received .favorite-star { right: -8px; }

.user-icon { 
    width: 32px; height: 32px; border-radius: 50%; background-color: var(--border-color); 
    background-size: cover; background-position: center; flex-shrink: 0; 
}
.message-wrapper.sent .user-icon { display: none; }
.time { font-size: 11px; color: var(--text-muted); margin: 0 4px; white-space: nowrap; user-select: none; margin-bottom: 2px; }

.bubble mark { background-color: #ffeb3b; color: #000; font-weight: bold; padding: 0 2px; border-radius: 2px; }

@keyframes pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } }
.active-highlight .bubble { animation: pulse-orange 1.5s infinite; border: 2px solid var(--highlight-border); background-color: var(--active-highlight)!important; }