/* ================================================================
   CHAT-EFFECTS.CSS — Premium Chat Effects, Reactions, Badges
   ================================================================ */

/* ── System Message ── */
.system-msg {
    text-align: center; color: var(--text-muted); font-size: 11px;
    background: rgba(255,255,255,0.03);
    padding: 4px 14px; border-radius: var(--r-full);
    margin: 6px auto; width: fit-content;
    border: 1px solid var(--border-faint);
    font-family: var(--font-body);
}

/* ── Message Action Buttons ── */
.msg-action-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(200,215,240,0.85);
    font-size: 11px; cursor: pointer;
    padding: 3px 7px; border-radius: var(--r-xs);
    transition: all 0.18s var(--ease-io);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-body);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.msg-action-btn:hover {
    background: rgba(59,130,246,0.2);
    color: #93c5fd;
    border-color: rgba(59,130,246,0.4);
    transform: scale(1.1) translateY(-1px);
    box-shadow: 0 3px 8px rgba(59,130,246,0.25);
}

/* ── Reply Quote ── */
.reply-quote {
    font-size: 10.5px; color: var(--text-muted);
    background: rgba(0,0,0,0.2);
    border-left: 2px solid var(--cyan);
    padding: 5px 9px; margin-bottom: 5px;
    border-radius: var(--r-xs);
    display: block; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font-body);
}

/* ── Mention Highlight ── */
.mention-highlight {
    background: rgba(245,158,11,0.15); color: #fbbf24;
    padding: 1px 5px; border-radius: var(--r-xs); font-weight: 700;
    border: 1px solid rgba(245,158,11,0.3);
}

/* ── Emoji Reactions ── */
.reactions-container { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.reaction-badge {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-faint);
    border-radius: var(--r-full); padding: 2px 8px;
    font-size: 10.5px; cursor: pointer; color: var(--text-secondary);
    display: flex; align-items: center; gap: 3px;
    transition: all 0.18s var(--ease-io); font-family: var(--font-body);
}
.reaction-badge:hover { background: rgba(255,255,255,0.1); border-color: var(--border-soft); transform: scale(1.06); }
.reaction-badge.reacted { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.35); color: var(--sapphire-light); }

.reaction-picker {
    position: absolute;
    background: var(--glass-heavy);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md); padding: 6px;
    display: none; gap: 3px; z-index: 1000;
    box-shadow: var(--shadow-lg);
}
.reaction-picker span { cursor: pointer; font-size: 18px; padding: 5px; transition: all 0.15s var(--ease-out); border-radius: var(--r-sm); display: inline-block; }
.reaction-picker span:hover { background: rgba(255,255,255,0.08); transform: scale(1.35) translateY(-2px); }

/* ── Gift System ── */
.gift-btn { background: transparent; border: none; color: #f9a8d4; cursor: pointer; font-size: 14px; padding: 0 3px; transition: transform 0.2s; }
.gift-btn:hover { transform: scale(1.3); }

.gift-picker-menu {
    position: absolute;
    background: var(--glass-heavy);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(249,168,212,0.2);
    border-radius: var(--r-md); padding: 9px;
    display: none; flex-direction: column; gap: 3px;
    z-index: 2000; box-shadow: var(--shadow-lg); min-width: 155px;
}
.gift-item { display: flex; align-items: center; gap: 9px; padding: 7px; cursor: pointer; border-radius: var(--r-sm); font-size: 13px; color: var(--text-secondary); font-weight: 500; transition: all 0.18s; font-family: var(--font-body); }
.gift-item:hover { background: rgba(249,168,212,0.1); color: #f9a8d4; }

.msg-gift-box {
    background: linear-gradient(135deg, rgba(249,168,212,0.08), rgba(236,72,153,0.12));
    border: 1px solid rgba(249,168,212,0.25);
    border-radius: var(--r-md); padding: 12px 14px;
    text-align: center; box-shadow: 0 8px 24px rgba(236,72,153,0.12);
    margin: 6px 0; width: 100%; max-width: 260px;
}
.msg-gift-icon { font-size: 32px; margin-bottom: 6px; display: block; animation: giftFloat 2s infinite ease-in-out; }
.msg-gift-text { font-size: 12px; color: var(--text-primary); font-weight: 500; line-height: 1.4; font-family: var(--font-body); }
.msg-gift-text strong { color: #f9a8d4; font-weight: 800; }
@keyframes giftFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── Typing Indicator ── */
.typing-indicator {
    margin-left: auto; background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 8px !important;
    font-size: 10.5px; font-style: italic; color: var(--text-muted) !important;
    display: flex; align-items: center; gap: 5px;
    transition: opacity 0.3s; font-family: var(--font-body);
}
.typing-indicator strong { color: var(--cyan-light); font-weight: 600; font-style: normal; }
.typing-dots { display: flex; gap: 3px; align-items: center; }
.typing-dots span { width: 4px; height: 4px; background: var(--cyan); border-radius: var(--r-full); animation: typingPop 1.4s infinite ease-in-out both; }
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingPop { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* ── XP Badges ── */
.xp-badge { font-size: 9px; padding: 2px 5px; border-radius: var(--r-xs); margin-left: 5px; font-weight: 700; display: inline-block; vertical-align: middle; font-family: var(--font-mono); }
.chat-xp-badge { font-size: 12px; margin-left: 4px; cursor: help; }

/* ── Quote Overlay ── */
.quote-center-overlay { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 9999; pointer-events: none; }
.quote-center-card {
    background: linear-gradient(135deg, rgba(28,22,14,0.98), rgba(38,28,16,0.98));
    border-top: 3px solid var(--warning);
    border-radius: var(--r-xl); padding: 28px 36px;
    max-width: 440px; box-shadow: var(--shadow-lg), 0 0 30px rgba(245,158,11,0.12);
    text-align: center; pointer-events: auto;
    animation: quoteIn 0.4s var(--ease-out), quoteFadeOut 0.5s ease 9.5s forwards;
    backdrop-filter: blur(12px);
}
.quote-center-icon { font-size: 36px; color: rgba(245,158,11,0.3); line-height: 0.5; margin-bottom: 14px; }
.quote-center-text { font-size: 16px; color: #e8e0d0; font-style: italic; line-height: 1.65; font-family: Georgia, serif; }
.quote-center-author { font-size: 13px; color: var(--warning); font-weight: 700; margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(245,158,11,0.25); font-family: var(--font-display); }
.quote-center-info { font-size: 10px; color: var(--text-muted); margin-top: 12px; font-family: var(--font-body); }
@keyframes quoteIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes quoteFadeOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.85); opacity: 0; } }

/* ── Loading / Connecting ── */
.loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.15); border-radius: var(--r-full); border-top-color: var(--cyan); animation: spin 0.9s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.connecting-pulse { animation: connPulse 1.5s infinite; }
@keyframes connPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; box-shadow: 0 0 12px rgba(6,182,212,0.6); } }

/* ── Song Request Card ── */
.msg-song-box {
    background: rgba(8,14,28,0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: var(--r-lg); padding: 14px 16px;
    margin: 10px 0; display: flex; align-items: center; gap: 14px;
    min-width: 265px; max-width: 360px;
    box-shadow: var(--shadow-md);
    position: relative; overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.msg-song-box::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--sapphire), var(--cyan), var(--violet-light));
    background-size: 200% auto; animation: shimmer 3s linear infinite;
}
@keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.msg-song-box:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }

.vinyl-record-container { position: relative; width: 58px; height: 58px; flex-shrink: 0; }
.vinyl-record { width: 100%; height: 100%; background: repeating-radial-gradient(#080e1e, #080e1e 3px, #0c1428 4px, #0c1428 5px); border-radius: var(--r-full); display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 18px rgba(0,0,0,0.7), 0 0 18px rgba(59,130,246,0.3); animation: spinVinyl 3s linear infinite; border: 2px solid #020409; }
.vinyl-record::after { content: ''; width: 20px; height: 20px; background: linear-gradient(135deg, var(--sapphire), var(--cyan)); border-radius: var(--r-full); border: 2px solid #020409; }
.vinyl-record::before { content: ''; position: absolute; width: 5px; height: 5px; background: #020409; border-radius: var(--r-full); z-index: 2; }
@keyframes spinVinyl { 100% { transform: rotate(360deg); } }
.floating-notes { position: absolute; top: -4px; right: -4px; font-size: 14px; animation: floatNote 2.5s ease-in-out infinite alternate; }
@keyframes floatNote { 0% { transform: translateY(0) scale(0.8) rotate(-10deg); opacity: 0.5; } 100% { transform: translateY(-10px) scale(1.1) rotate(12deg); opacity: 1; text-shadow: 0 0 10px var(--cyan); } }

.msg-song-content { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.msg-song-title { font-size: 14px; font-weight: 800; letter-spacing: -0.3px; font-family: var(--font-display); }
.msg-song-title span { background: linear-gradient(90deg, var(--sapphire-light), #e0e7ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.msg-song-for { font-size: 11px; color: var(--text-primary); font-weight: 600; background: rgba(59,130,246,0.15); padding: 3px 10px; border-radius: var(--r-full); width: fit-content; border: 1px solid rgba(59,130,246,0.3); font-family: var(--font-body); }
.msg-song-note { font-size: 11px; color: var(--text-secondary); font-style: italic; background: rgba(0,0,0,0.3); padding: 5px 10px; border-radius: var(--r-xs); border-left: 2px solid var(--sapphire); line-height: 1.4; font-family: var(--font-body); }

/* ── Dice ── */
.dice-message { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(210,105,30,0.08), transparent); padding: 9px 14px; border-left: 2px solid #d2691e; border-radius: var(--r-md); margin: 8px 0; font-weight: bold; font-family: var(--font-body); }
.dice-wrapper { display: flex; gap: 4px; }
.dice-cube { width: 28px; height: 28px; background: #fff; color: #1a1a1a; border-radius: var(--r-xs); display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 900; box-shadow: 0 3px 8px rgba(0,0,0,0.35); animation: diceRoll 0.55s var(--ease-out) forwards; font-family: var(--font-mono); }
.dice-cube.red { color: #ef4444; }
@keyframes diceRoll { 0% { transform: translateY(-18px) rotate(-180deg) scale(0.5); opacity: 0; } 50% { transform: translateY(0) rotate(18deg) scale(1.15); } 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; } }

/* ================================================================
   MESAJ OKUNAKLILIK İYİLEŞTİRMELERİ
   ================================================================ */

/* Mesaj balonları — daha yüksek kontrast ve okunabilir font */
#messages-area {
    font-family: var(--font-body);
}

/* Sistem mesajı */
.system-msg {
    font-size: 11.5px !important;
    letter-spacing: 0.01em;
}

/* Arkaplan varken mesaj balonlarına ek kontrast */
#messages-area.has-bg .system-msg {
    background: rgba(4,8,20,0.75) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #cbd5e1 !important;
}

/* Mesaj action butonları görünürlük */
.msg-action-btn {
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.15s, background 0.15s !important;
}
.msg-action-btn:hover { opacity: 1 !important; }

/* Mesaj username rengi — daha parlak */
/* (chatRenderer.js içindeki nameColor değişkenini override) */
.msg-sender-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.1px;
}

/* Tepki rozetleri */
.reaction-badge { font-size: 11px !important; }

/* Arkaplan varken mesaj balonuna hafif blur arka plan */
#messages-area.has-bg > div > div > div:last-child {
    backdrop-filter: blur(4px);
}
/* ── Nick Animasyonları ── */
.nick-fire {
    background: linear-gradient(90deg,#ff4500,#ff8c00,#ffd700,#ff4500);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nickFire 1.5s linear infinite;
    font-weight: 700;
}
@keyframes nickFire { to { background-position: 200% center; } }

.nick-rainbow {
    background: linear-gradient(90deg,#ff0000,#ff7700,#ffff00,#00ff00,#0000ff,#8b00ff,#ff0000);
    background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nickRainbow 2s linear infinite;
    font-weight: 700;
}
@keyframes nickRainbow { to { background-position: 300% center; } }

.nick-glow {
    color: #60a5fa;
    text-shadow: 0 0 6px rgba(96,165,250,0.8), 0 0 12px rgba(96,165,250,0.5);
    animation: nickGlow 1.5s ease-in-out infinite alternate;
    font-weight: 700;
}
@keyframes nickGlow {
    from { text-shadow: 0 0 4px rgba(96,165,250,0.6); }
    to   { text-shadow: 0 0 12px rgba(96,165,250,1), 0 0 24px rgba(96,165,250,0.6); }
}

.nick-shake {
    display: inline-block;
    color: #a78bfa;
    animation: nickShake 0.4s ease-in-out infinite;
    font-weight: 700;
}
@keyframes nickShake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-2px) rotate(-1deg); }
    75%      { transform: translateX(2px) rotate(1deg); }
}

.nick-neon {
    color: #00f3ff;
    text-shadow: 0 0 4px #00f3ff, 0 0 10px #00f3ff, 0 0 20px #00f3ff;
    animation: nickNeon 1s ease-in-out infinite alternate;
    font-weight: 700;
}
@keyframes nickNeon {
    from { text-shadow: 0 0 4px #00f3ff, 0 0 10px #00f3ff; }
    to   { text-shadow: 0 0 8px #00f3ff, 0 0 20px #00f3ff, 0 0 40px rgba(0,243,255,0.4); }
}