/* public/css/parties.css */

/* --- SIDEBAR TABS --- */
.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
    margin-top: 10px;
    margin-bottom: 10px;
}

.tab-btn {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.tab-btn:hover { color: var(--text-main); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.sidebar-view { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.sidebar-view.active { display: flex; }

/* --- PARTY SIDEBAR ITEM --- */
.party-sidebar-item {
    background: linear-gradient(45deg, rgba(255, 87, 34, 0.1), rgba(0,0,0,0));
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}
.party-sidebar-item:hover { transform: scale(1.02); border-color: var(--primary); }
.party-tag { font-size: 9px; background: var(--primary); color: white; padding: 2px 6px; border-radius: 4px; font-weight: 800; text-transform: uppercase; display: inline-block; margin-bottom: 5px; }
.party-album { font-size: 13px; font-weight: 700; color: var(--text-main); }
.party-artist { font-size: 11px; color: var(--text-muted); }

.sidebar-action-btn {
    width: 100%;
    margin-top: 8px;
    background: #4caf50;
    color: white;
    border: none;
    padding: 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    animation: pulse 2s infinite;
    transition: opacity 0.2s;
}
.sidebar-action-btn:hover { opacity: 0.9; }

/* --- PARTY BANNER (Inside Room) --- */
#party-banner {
    background: var(--bg-card);
    border-bottom: 1px solid var(--primary);
    padding: 10px 15px;
    display: none; 
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.pb-info { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.pb-badge { background: #ff5252; color: white; font-weight: 800; font-size: 9px; padding: 2px 6px; border-radius: 4px; animation: pulse 2s infinite; }
#pb-host-name { font-weight: 700; color: var(--text-main); text-transform: capitalize; }
#pb-status { color: var(--text-muted); font-size: 11px; }

.pb-controls { display: flex; gap: 10px; }
.pb-controls button {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}
.pb-controls button.active { background: var(--primary); color: white; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }

/* --- [UPDATED] SOLO PROGRESS BANNER --- */
#solo-banner {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 10px 15px;
    display: none; 
    justify-content: space-between;
    align-items: center;
    position: relative; /* For the progress bar absolute positioning */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 48px; /* Fixed height match */
}

.sb-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    z-index: 2; /* Sit above the progress bar */
}

.sb-badge {
    background: #4caf50; /* Green Badge */
    color: white;
    font-weight: 800;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Song Text Truncation */
#sb-song-text {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The Progress Bar - Now a thin line at the bottom of the banner */
.sb-progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    overflow: hidden;
}

.sb-progress-fill {
    height: 100%;
    width: 0%;
    background: #4caf50; /* Green */
    transition: width 1s linear;
}

/* ORANGE STATE (Last 30s) */
.sb-progress-fill.ending {
    background: #ff9800; 
}

/* Button matches the 'End Party' button style but Orange */
.sb-controls button {
    background: transparent;
    border: 1px solid #ff9800;
    color: #ff9800;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    z-index: 2;
}
.sb-controls button:hover {
    background: #ff9800;
    color: white;
}


/* --- LOBBY VIEW --- */
#lobby-view-container {
    background: var(--bg-main); 
}

.lobby-stage {
    height: 280px; 
    display: flex;
    justify-content: space-between;
    padding: 30px 50px;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-card); 
    flex-shrink: 0;
}

.stage-left { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: flex-start;
}

.inst-header {
    font-size: 11px;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.inst-step { 
    margin-bottom: 8px; 
    font-size: 14px; 
    color: var(--text-main);
    display: flex;
    align-items: center;
}
.inst-step span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    margin-right: 12px;
    color: var(--text-muted);
}

.stage-center {
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
}

.stage-right { 
    flex: 1; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    justify-content: center; 
}

/* READINESS DASHBOARD (Phase 2) */
.readiness-grid {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 15px;
    max-width: 300px;
}

.readiness-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
}

.readiness-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--text-main);
    border: 2px solid var(--border);
    transition: all 0.3s;
}

.readiness-avatar.ready { border-color: #4caf50; box-shadow: 0 0 10px rgba(76, 175, 80, 0.4); }
.readiness-avatar.not-ready { border-color: #ff5252; opacity: 0.7; }

.desktop-badge {
    position: absolute;
    top: -2px; right: 2px;
    width: 14px; height: 14px;
    background: #2196f3;
    color: white;
    border-radius: 50%;
    font-size: 8px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-card);
}

.readiness-name {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* STATUS CARD STRUCTURE */
.lobby-status-card {
    background: var(--bg-main);
    border: 1px solid var(--border);
    padding: 25px 30px; 
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
    max-width: 340px; 
}
.lobby-status-card.ready { border-color: #4caf50; color: #4caf50; background: rgba(76, 175, 80, 0.05); }
.lobby-status-card.not-ready { border-color: #ff5252; color: #ff5252; background: rgba(255, 82, 82, 0.05); }
.lobby-status-card.wrong-track { border-color: #ff9800; color: #ff9800; background: rgba(255, 152, 0, 0.05); }

/* Host Badge inside Card */
.lobby-host-badge {
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* Internal Card Layout (Wrong Album) */
.lobby-card-row {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    text-align: left;
    justify-content: center;
}
.lobby-card-art {
    width: 60px; height: 60px; 
    border-radius: 6px;
    background: #222;
    object-fit: cover;
    border: 1px solid var(--border);
}
.lobby-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--text-main);
}

/* TEXT SIZES */
.lc-header { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.lc-sub { font-size: 12px; }
.lc-status-large { font-size: 26px; font-weight: 900; margin-bottom: 5px; letter-spacing: 1px; }

.lobby-btn { 
    width: 100%;
    max-width: 200px;
    padding: 15px; 
    border-radius: 50px; 
    font-weight: 800; font-size: 14px; 
    cursor: not-allowed; 
    border: none; 
    background: var(--primary); color: white; 
    opacity: 0.5; transition: 0.2s; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.lobby-btn.active { opacity: 1; cursor: pointer; box-shadow: 0 5px 20px rgba(255, 87, 34, 0.3); }

/* LEAVE BUTTON */
.lobby-leave-btn {
    position: absolute;
    top: 0; 
    right: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: #ff5252;
    padding: 6px 15px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}
.lobby-leave-btn:hover { background: rgba(255, 82, 82, 0.1); border-color: #ff5252; }

/* BOTTOM SECTION: THE FLOOR */
.lobby-floor {
    display: flex;
    flex: 1;
    overflow: hidden; 
}

/* CHAT SECTION */
.lobby-chat-section {
    flex: 7;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--bg-base);
}
#lobby-chat-box { 
    flex: 1; 
    overflow-y: auto; 
    padding: 20px 40px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
}
.lobby-chat-input-wrapper { 
    padding: 20px 40px; 
    background: var(--bg-card); 
    border-top: 1px solid var(--border); 
    display: flex;
    gap: 10px;
}
.lobby-chat-input-wrapper input { 
    flex: 1;
    background: var(--bg-main); 
    border: 1px solid var(--border); 
    padding: 12px 15px; 
    color: var(--text-main); 
    border-radius: 8px; 
    outline: none; 
    font-size: 14px;
}
.lobby-chat-input-wrapper button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.lobby-msg-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.lobby-msg-group.mine {
    align-items: flex-end;
}
.lobby-msg-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: capitalize; 
}
.lobby-msg-bubble {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 10px 16px;
    border-radius: 12px 12px 12px 0;
    font-size: 14px;
    line-height: 1.5;
    max-width: 80%;
    word-wrap: break-word;
}
.lobby-msg-group.mine .lobby-msg-bubble {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    border-radius: 12px 12px 0 12px;
}

/* SOCIAL SECTION */
.lobby-social-section {
    flex: 3;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--bg-card);
    min-width: 250px;
}

/* CUSTOM INVITE LIST STYLES */
.lobby-invite-section { 
    border-bottom: 1px solid var(--border); 
    padding-bottom: 15px; 
    margin-bottom: 15px; 
    display: flex;
    flex-direction: column;
}

.lobby-invite-header {
    font-size: 11px; 
    font-weight: 800; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    margin-bottom: 10px; 
    display: flex; 
    justify-content: space-between; 
    cursor: pointer;
    user-select: none;
    padding: 5px 0;
}
.lobby-invite-header:hover { color: var(--primary); }

.lobby-invite-arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
}
.lobby-invite-header.open .lobby-invite-arrow {
    transform: rotate(180deg);
}

.lobby-invite-list {
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px;
    display: none;
}

.lobby-invite-row {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}
.lobby-invite-row:last-child { border-bottom: none; }
.lobby-invite-row:hover { background: var(--bg-hover); }

.lobby-invite-avatar {
    width: 32px; height: 32px; 
    border-radius: 50%;
    background: var(--text-muted);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 12px;
    margin-right: 10px;
    position: relative;
    flex-shrink: 0;
}
.lobby-invite-status {
    width: 8px; height: 8px;
    background: #4caf50;
    border-radius: 50%;
    position: absolute;
    bottom: 0; right: 0;
    border: 2px solid var(--bg-main);
}

.lobby-invite-info { flex: 1; min-width: 0; }
.lobby-invite-name { font-size: 13px; font-weight: 700; color: var(--text-main); text-transform: capitalize; }
.lobby-invite-vibe { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lobby-invite-btn {
    background: var(--bg-card);
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}
.lobby-invite-btn:hover { background: var(--primary); color: white; }
.lobby-invite-btn:disabled { border-color: var(--text-muted); color: var(--text-muted); cursor: default; background: transparent; }

.lobby-header { 
    font-size: 11px; 
    font-weight: 800; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    margin-bottom: 10px; 
    display: flex; 
    justify-content: space-between; 
}

.lobby-user-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }

.lobby-user-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 6px;
    background: var(--bg-main); border: 1px solid var(--border);
}
.lobby-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--text-muted); color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.lobby-username { font-size: 13px; font-weight: 600; text-transform: capitalize; }

/* COUNTDOWN (Phase 2) */
#countdown-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9); z-index: 9999;
    display: none; align-items: center; justify-content: center;
    flex-direction: column;
}
#countdown-number { font-size: 150px; font-weight: 900; color: white; line-height: 1; }
#countdown-sub { font-size: 24px; color: var(--primary); text-transform: uppercase; font-weight: 800; letter-spacing: 2px; margin-top: 10px; }
.count-anim { animation: zoomFade 1s linear infinite; }
@keyframes zoomFade {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* --- GLOBAL TOAST NOTIFICATIONS --- */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Let clicks pass through gaps */
}

.toast-notification {
    background: var(--bg-card);
    border: 1px solid var(--primary);
    color: var(--text-main);
    padding: 15px;
    border-radius: 8px;
    width: 300px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    pointer-events: auto;
    animation: slideInRight 0.3s ease-out;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.toast-header {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}

.toast-body {
    font-size: 13px;
    line-height: 1.4;
}

.toast-action-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
    margin-top: 5px;
    cursor: pointer;
    width: 100%;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* --- CHAT INVITE CARD (Inside DMs) --- */
.dm-invite-card {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.dm-invite-header {
    font-size: 10px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
}

.dm-invite-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
}
.dm-invite-btn:hover {
    opacity: 0.9;
}

/* --- CHAT SYSTEM MESSAGES (ADDED v8.2) --- */
.sys-msg-row {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    width: 100%;
    animation: slideInRight 0.3s ease-out;
}

.sys-msg-bubble {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%);
    border: 1px solid var(--primary);
    border-radius: 12px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.sys-msg-bubble.ended {
    border-color: var(--border);
    filter: grayscale(1);
    opacity: 0.7;
}

.sys-msg-content { flex: 1; display: flex; flex-direction: column; }
.sys-msg-title { font-size: 10px; font-weight: 800; color: var(--primary); text-transform: uppercase; margin-bottom: 2px; }
.sys-msg-text { font-size: 12px; color: var(--text-main); line-height: 1.3; }

.sys-msg-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    transition: transform 0.2s;
}
.sys-msg-btn:hover { transform: scale(1.05); }
.sys-msg-btn:disabled { background: var(--text-muted); cursor: default; opacity: 0.7; transform: none; }
.sys-msg-icon { font-size: 16px; }