/* --- RESET & VARIABLES --- */
* { box-sizing: border-box; font-family: 'Space Grotesk', sans-serif; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a35; border-radius: 4px; }

body { 
    /* 100dvh = hauteur réellement visible. Sur Chrome/Safari mobile, 100vh compte aussi la zone
       cachée sous la barre d'adresse, ce qui poussait le bas de la page hors de l'écran.
       100vh reste en secours pour les navigateurs qui ne connaissent pas dvh. */
    margin: 0; background-color: #050508; color: #fff; height: 100vh; height: 100dvh; display: flex; flex-direction: column; position: relative;
}

body::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%2314F195' stroke-width='1.5' fill='none' stroke-opacity='0.07'%3E%3Cpath d='M9 12a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M15 12a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 35px 35px; animation: breatheGlow 6s infinite ease-in-out;
}
@keyframes breatheGlow { 0%, 100% { opacity: 0; filter: blur(1px); } 50% { opacity: 0.55; filter: blur(0px); } }

/* --- HEADER --- */
.header { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: rgba(5, 5, 8, 0.85); border-bottom: 1px solid #1a1a24; backdrop-filter: blur(12px); z-index: 10; }
.logo-container { display: flex; align-items: center; gap: 10px; }
.logo-text { font-size: 22px; font-weight: 700; background: linear-gradient(90deg, #14F195, #9945FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.logo-svg { filter: drop-shadow(0px 0px 8px rgba(20,241,149,0.4)); transform-style: preserve-3d; animation: organicSpin 5s infinite, logoColorBreath 6s infinite ease-in-out; }
@keyframes organicSpin { 0%, 75% { transform: perspective(500px) rotateY(0deg) rotateX(0deg) scale(1); } 85% { transform: perspective(500px) rotateY(180deg) rotateX(15deg) scale(1.1); filter: drop-shadow(0px 0px 15px rgba(20,241,149,0.9)); } 100% { transform: perspective(500px) rotateY(360deg) rotateX(0deg) scale(1); } }
@keyframes logoColorBreath { 0%, 100% { stroke: #14F195; } 33% { stroke: #03E1FF; } 66% { stroke: #9945FF; } }

.header-right { display: flex; align-items: center; gap: 15px; }

/* Onglets de navigation mobile : cachés par défaut, activés dans la media query mobile */
.mobile-tabs { display: none; }
.btn-connect { background: #14F195; color: #000; border: none; padding: 10px 20px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: 0.2s; font-size: 14px; }
.btn-connect:hover { background: #0ed180; box-shadow: 0 0 12px rgba(20,241,149,0.3); }

.sol-badge { display: none; align-items: center; background: #0d0d12; border: 1px solid #2a2a35; border-radius: 8px; padding: 6px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.sol-badge svg.sol-logo { width: 14px; height: 14px; margin-right: 8px; }
.sol-badge { position: relative; }
/* Équivalent USD : bulle sous le badge, au survol (desktop) ou au toucher (mobile, classe .show-usd) */
.balance-tooltip { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 30; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; background: #0d0d12; border: 1px solid #2a2a35; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.8); white-space: nowrap; cursor: default; }
.balance-tooltip::before { content: ""; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; background: #0d0d12; border-left: 1px solid #2a2a35; border-top: 1px solid #2a2a35; transform: translateX(-50%) rotate(45deg); }
.balance-usd-value { font-size: 14px; font-weight: 700; color: #14F195; }
.balance-usd-rate { font-size: 11px; color: #777; font-weight: 600; }
.balance-usd-rate:empty { display: none; }
@media (hover: hover) { .sol-badge:hover .balance-tooltip { display: flex; } }
.sol-badge.show-usd .balance-tooltip { display: flex; }

.menu-container { position: relative; display: none; align-items: center; }
.menu-badge { display: inline-block; background: #ff4444; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.notification-dot { position: absolute; top: 2px; right: 0px; width: 8px; height: 8px; background: #ff4444; border-radius: 50%; border: 2px solid #050508; display: none; }
.username-edit-wrap { display: inline-flex; align-items: center; gap: 2px; margin-right: 2px; }
.header-username-text { font-weight: 600; font-size: 15px; }
.header-username-input { font-weight: 600; font-size: 15px; font-family: inherit; background: #0d0d12; border: 1px solid #14F195; color: #fff; border-radius: 6px; padding: 3px 6px; width: 130px; }
.header-username-input:focus { outline: none; }
.pencil-btn { background: none; border: none; padding: 2px; cursor: pointer; color: #888; opacity: 0; transition: 0.2s; display: flex; align-items: center; }
.username-edit-wrap:hover .pencil-btn { opacity: 1; }
.pencil-btn:hover { color: #14F195; }
.pencil-btn svg { width: 14px; height: 14px; }
.burger-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 4px 5px; position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.burger-btn svg { width: 22px; height: 22px; }
.dropdown { display: none; position: absolute; right: 0; top: 40px; background: #0d0d12; border: 1px solid #2a2a35; border-radius: 8px; width: 160px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.8); }
.dropdown a { display: block; padding: 12px 15px; color: #aaa; text-decoration: none; font-size: 14px; border-bottom: 1px solid #1a1a24; transition: 0.2s; }
.dropdown a:hover { background: #1a1a24; color: #fff; padding-left: 20px; }

/* --- 3-COLUMN LAYOUT --- */
.main-container { display: flex; flex-grow: 1; overflow: hidden; }

/* Sidebar Gauche (Tiers) */
.sidebar { width: 260px; background: rgba(8, 8, 12, 0.8); border-right: 1px solid #1a1a24; display: flex; flex-direction: column; padding: 12px; gap: 12px; }
.room-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid #1a1a24;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.2) 100%);
    transition: 0.2s;
}
.room-card:hover { border-color: #2a2a35; transform: translateY(-2px); }
.room-card.active { border-color: #9945FF; box-shadow: 0 0 20px rgba(153,69,255,0.15); }
/* Shrimp Lounge garde un accent bleu (au lieu du violet par défaut) quand sélectionné */
.room-card.active[data-room="tier_1"] { border-color: #03E1FF; box-shadow: 0 0 20px rgba(3,225,255,0.15); }

/* Contour holographique (style carte rare) réservé au Whale Cartel */
.room-card.room-card-holo {
    position: relative;
}
.room-card.room-card-holo:hover,
.room-card.room-card-holo.active {
    border-color: transparent;
}
.room-card-holo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.5px;
    background: linear-gradient(115deg, #ff9ce6, #9945FF, #03E1FF, #14F195, #ffe28a, #ff9ce6);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: holoShift 5s linear infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.room-card-holo:hover::before,
.room-card-holo.active::before {
    opacity: 1;
}
@keyframes holoShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.room-icon {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
}
.room-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    filter: grayscale(1) opacity(0.45);
    transition: 0.2s;
}
.room-card:hover .room-icon img { filter: grayscale(0.3) opacity(0.8); }
.room-card.active .room-icon img { filter: grayscale(0) opacity(1); }
.room-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0,0,0,0.35);
    border-top: 1px solid #1a1a24;
}
.room-name { font-weight: 600; font-size: 14px; color: #777; transition: 0.2s; }
.room-card:hover .room-name { color: #ccc; }
.room-card.active .room-name { color: #9945FF; }
.room-card.active[data-room="tier_1"] .room-name { color: #03E1FF; }
.tier-price { font-size: 11px; background: #1a1a24; padding: 2px 6px; border-radius: 4px; color: #aaa; white-space: nowrap; }

/* Liens About / Contact en bas de la colonne des salons */
.sidebar-links { flex-shrink: 0; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; color: #444; padding: 2px 0 0; }
.sidebar-links a { color: #666; text-decoration: none; transition: 0.2s; }
.sidebar-links a:hover { color: #14F195; }

/* Zone Centrale (Tchat Main) */
.chat-area { flex-grow: 1; display: flex; flex-direction: column; position: relative; background: rgba(0,0,0,0.2); }
.chat-messages { flex-grow: 1; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 15px; }

/* Sidebar Droite (CA Drop Permanent) */
.ca-sidebar { width: clamp(360px, 30vw, 500px); flex-shrink: 0; background: rgba(8, 8, 12, 0.9); border-left: 1px solid #1a1a24; display: flex; flex-direction: column; }
.ca-header { padding: 15px; border-bottom: 1px solid #1a1a24; font-weight: bold; color: #14F195; display: flex; align-items: center; gap: 10px; }
.ca-header svg { width: 18px; height: 18px; }
/* Marges un peu plus serrées : la ligne d'infos (heure, pseudo, grade, wallet, solde) tient sur une ligne dès 1440px */
#ca-chat-messages { padding: 16px 14px; }
#ca-chat-messages .message-header { gap: 5px; }

/* Composants Tchat Communs */
.chat-input-area { display: flex; padding: 15px; border-top: 1px solid #1a1a24; background: rgba(5,5,8,0.9); }
.chat-input { flex-grow: 1; padding: 12px; background: #0d0d12; border: 1px solid #2a2a35; color: white; border-radius: 8px; margin-right: 10px; font-size: 13px; }
.chat-input:focus { outline: none; border-color: #14F195; }

.message { padding: 4px 0; }
.message-header { font-size: 11px; color: #555; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; font-family: 'Courier New', monospace; flex-wrap: wrap; }
.message-username { font-weight: bold; cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 13px; }
.message-body { color: #ddd; font-size: 13px; line-height: 1.4; padding-left: 8px; border-left: 2px solid #222; margin-top: 4px; word-break: break-all; }

/* Réactions (emotes) : ligne sous le message, bouton d'ajout en fin de ligne */
.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; min-height: 20px; }
.reactions.has-reactions { margin-top: 6px; }
.reaction-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; background: #0d0d12; border: 1px solid #2a2a35; border-radius: 12px; cursor: pointer; color: #aaa; font-size: 12px; font-weight: 600; font-family: inherit; transition: 0.15s; }
.reaction-pill img { width: 20px; height: 20px; object-fit: contain; }
.reaction-pill:hover { border-color: #3a3a48; color: #fff; }
.reaction-pill.mine { background: rgba(20,241,149,0.1); border-color: rgba(20,241,149,0.5); color: #14F195; }

.react-btn { background: none; border: 1px solid transparent; border-radius: 12px; padding: 2px 6px; cursor: pointer; color: #666; opacity: 0; transition: 0.15s; display: inline-flex; align-items: center; }
.react-btn svg { width: 16px; height: 16px; }
.react-btn:hover { color: #14F195; }
/* Invisible tant qu'on ne survole pas le message, sauf s'il a déjà des réactions (façon Discord) */
.message:hover .react-btn, .pm-bubble-wrap:hover .react-btn, .reactions.has-reactions .react-btn { opacity: 1; }
.reactions.has-reactions .react-btn { background: #0d0d12; border-color: #2a2a35; padding: 3px 8px; }
/* Écrans tactiles : pas de survol possible, le bouton reste visible (discret) */
@media (hover: none) { .react-btn { opacity: 0.6; } }

/* Emotes insérées dans le texte (:nom:) dans les salons payants */
/* Dans une bulle de message privé, l'emote ne doit pas élargir la ligne de texte */
.pm-bubble .inline-emote { height: 24px; margin: -3px 1px; }
.inline-emote { height: 28px; width: auto; max-width: 56px; vertical-align: middle; margin: -4px 1px; object-fit: contain; }

/* Bouton emotes à côté de la saisie du tchat payant */
.input-emote-btn { background: #0d0d12; border: 1px solid #2a2a35; color: #888; border-radius: 8px; width: 42px; flex-shrink: 0; margin-right: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.15s; }
.input-emote-btn svg { width: 20px; height: 20px; }
.input-emote-btn:hover { color: #14F195; border-color: #14F195; }

.emote-picker { display: none; position: fixed; z-index: 70; width: 340px; background: #0d0d12; border: 1px solid #2a2a35; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); overflow: hidden; }
.emote-picker.open { display: flex; flex-direction: column; }
.emote-picker-header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #1a1a24; }
.emote-picker-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #777; font-weight: 600; white-space: nowrap; }
.emote-picker-search { flex: 1; min-width: 0; background: #050508; border: 1px solid #2a2a35; color: #fff; border-radius: 6px; padding: 6px 9px; font-size: 12px; font-family: inherit; }
.emote-picker-search:focus { outline: none; border-color: #14F195; }
.emote-picker-count { font-size: 11px; font-weight: 700; color: #14F195; white-space: nowrap; }
.emote-picker-count.full { color: #ff4444; }
.emote-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 10px; max-height: 280px; overflow-y: auto; align-content: start; }
.emote-cell { background: none; border: none; border-radius: 8px; padding: 5px; cursor: pointer; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; transition: 0.15s; }
.emote-cell:hover { background: #1a1a24; transform: scale(1.12); }
.emote-cell img { width: 100%; height: 100%; object-fit: contain; }
.emote-picker-empty { display: none; grid-column: 1 / -1; text-align: center; color: #555; font-size: 12px; margin: 16px 0; }

/* Toast (message temporaire) */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: #1a1a24; color: #fff; border: 1px solid #2a2a35; padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 80; opacity: 0; pointer-events: none; transition: 0.25s; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* DexScreener Card */
.dex-card { background: #0d0d12; border: 1px solid #2a2a35; border-radius: 8px; padding: 12px; margin-top: 8px; font-family: 'Space Grotesk', sans-serif; display: flex; flex-direction: column; gap: 5px; }
.dex-title { font-weight: bold; color: #14F195; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.dex-title span { flex-grow: 1; }
.dex-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dex-change-up { color: #14F195; font-size: 12px; font-weight: 700; }
.dex-change-down { color: #ff4d4d; font-size: 12px; font-weight: 700; }
.dex-data { display: flex; flex-wrap: wrap; gap: 4px 15px; font-size: 12px; color: #aaa; }
.dex-data > div { white-space: nowrap; }
.dex-data span { color: #fff; font-weight: 600; }
.dex-link { color: #9945FF; text-decoration: none; font-size: 11px; display: inline-block; }
.dex-link-primary { color: #14F195; font-weight: 700; }
.dex-ca { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 10px; background: #050508; border: 1px solid #1a1a24; border-radius: 6px; cursor: pointer; transition: 0.2s; width: fit-content; max-width: 100%; }
.dex-ca:hover { border-color: #14F195; }
.dex-ca-label { font-size: 10px; font-weight: 700; color: #777; letter-spacing: 0.5px; }
.dex-ca-value { font-family: 'Courier New', monospace; font-size: 12px; color: #ddd; }
.dex-ca-icon { width: 13px; height: 13px; color: #777; flex-shrink: 0; transition: 0.2s; }
.dex-ca:hover .dex-ca-icon, .dex-ca.copied .dex-ca-icon { color: #14F195; }
.dex-ca.copied .dex-ca-value { color: #14F195; font-family: 'Space Grotesk', sans-serif; }
.dex-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.dex-actions { display: flex; gap: 12px; align-items: center; }
.dex-socials { display: flex; gap: 8px; }
.dex-social-link { color: #777; transition: 0.2s; display: flex; align-items: center; }
.dex-social-link:hover { color: #9945FF; }
.dex-social-link svg { width: 14px; height: 14px; }
/* Logo X officiel : plus large que haut, un peu plus petit pour le même poids visuel que les autres icônes */
.dex-social-link svg.dex-social-x { width: 13px; height: 12px; }

.locked-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(12px); background: rgba(5,5,8,0.8); flex-direction: column; align-items: center; justify-content: center; z-index: 5; }
.locked-overlay h2 { color: #fff; margin-bottom: 10px; font-size: 28px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.lock-icon { width: 26px; height: 26px; flex-shrink: 0; color: #9945FF; }
.locked-learn-more { margin-top: 14px; font-size: 13px; color: #888; text-decoration: none; transition: 0.2s; }
.locked-learn-more:hover { color: #14F195; }
.btn-unlock { background: linear-gradient(90deg, #9945FF, #7a36cc); color: white; border: none; padding: 12px 24px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: 0.2s; }

#wallet-modal, #profile-modal, #public-profile-modal, #private-messages-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; z-index: 50; }
.modal-content { background: #0d0d12; padding: 30px; border-radius: 16px; width: 340px; max-width: 90vw; text-align: center; border: 1px solid #2a2a35; }
.wallet-btn { width: 100%; margin: 8px 0; padding: 14px; font-size: 15px; border: none; border-radius: 8px; cursor: pointer; color: white; font-weight: 600; }
.wallet-btn-detected, .wallet-btn-link { display: flex; align-items: center; gap: 12px; padding-left: 16px; background: #1a1a24; border: 1px solid #2a2a35; text-decoration: none; box-sizing: border-box; font-family: inherit; transition: 0.15s; }
.wallet-btn-detected:hover, .wallet-btn-link:hover { border-color: #14F195; background: #1f1f2b; }
.wallet-btn-detected img { width: 22px; height: 22px; border-radius: 6px; }
.wallet-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wallet-modal-hint { color: #aaa; font-size: 13px; margin: 0 0 6px; }
#wallet-list { max-height: 60vh; overflow-y: auto; }

/* --- MODALE PROFIL --- */
.profile-modal-content { width: 380px; max-width: 90vw; text-align: left; position: relative; }
.modal-close-btn { position: absolute; top: 14px; right: 16px; background: none; border: none; color: #888; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; z-index: 5; }
.modal-close-btn:hover { color: #fff; }

.profile-balance-block { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(20,241,149,0.06); border: 1px solid rgba(20,241,149,0.25); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
#profile-balance, #public-profile-balance { font-size: 24px; font-weight: 700; color: #14F195; }
.profile-balance-label { font-size: 13px; color: #888; font-weight: 600; }

.profile-tier-highlight { text-align: center; margin-bottom: 18px; }
.profile-tier-highlight .tier-badge { font-size: 14px; padding: 6px 18px; }

.profile-bio-display { font-size: 13px; color: #ccc; line-height: 1.5; margin: 0; padding: 10px; background: #050508; border: 1px solid #1a1a24; border-radius: 8px; min-height: 16px; }

.profile-row { margin-bottom: 16px; }
.profile-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #777; margin-bottom: 6px; }
.profile-input { background: #050508; border: 1px solid #2a2a35; color: #fff; border-radius: 8px; padding: 10px; font-size: 13px; font-family: inherit; width: 100%; box-sizing: border-box; }
.profile-input:focus { outline: none; border-color: #14F195; }
.profile-input:disabled { opacity: 0.5; }
.profile-textarea { resize: none; }
.profile-inline-edit { display: flex; gap: 8px; }
.profile-inline-edit .profile-input { flex-grow: 1; }
.profile-save-btn { padding: 8px 14px !important; font-size: 12px !important; white-space: nowrap; }
.profile-bio-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.profile-hint { font-size: 11px; color: #666; margin: 6px 0 0; }
.profile-feedback { font-size: 12px; margin: 6px 0 0; min-height: 14px; }

.profile-info-grid { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; border-top: 1px solid #1a1a24; margin-top: 4px; }
.profile-info-item { display: flex; justify-content: space-between; align-items: center; }
.profile-info-item .profile-label { margin-bottom: 0; }
.profile-wallet-copy { cursor: pointer; font-family: 'Courier New', monospace; font-size: 13px; color: #ccc; }
.profile-wallet-copy:hover { color: #14F195; }

.tier-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; border: 1px solid transparent; }
.tier-badge-0 { background: rgba(136,136,136,0.15); color: #999; }
.tier-badge-1 { background: rgba(20,241,149,0.15); color: #14F195; border-color: rgba(20,241,149,0.4); box-shadow: 0 0 10px rgba(20,241,149,0.25); animation: badgeGlowGreen 2.5s infinite ease-in-out; }
.tier-badge-2 { background: rgba(153,69,255,0.15); color: #9945FF; border-color: rgba(153,69,255,0.45); box-shadow: 0 0 12px rgba(153,69,255,0.35); animation: badgeGlowPurple 2.5s infinite ease-in-out; }
.tier-badge-3 { background: rgba(255,183,0,0.18); color: #ffb700; border-color: rgba(255,183,0,0.5); box-shadow: 0 0 16px rgba(255,183,0,0.45); animation: badgeGlowGold 2s infinite ease-in-out; }

/* --- LISTES VIDES (amis / demandes) --- */
.friend-requests-empty { text-align: center; color: #555; font-size: 13px; padding: 24px 0; margin: 0; }

/* --- MODALE MESSAGES PRIVÉS --- */
.pm-modal-content { width: 640px; max-width: 92vw; padding: 0; overflow: hidden; position: relative; }
.pm-layout { display: flex; height: 460px; max-height: 70vh; }
.pm-sidebar { width: 190px; flex-shrink: 0; border-right: 1px solid #1a1a24; display: flex; flex-direction: column; background: rgba(0,0,0,0.25); }
.pm-tabs { display: flex; border-bottom: 1px solid #1a1a24; }
.pm-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: #777; font-family: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 4px 10px; cursor: pointer; transition: 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.pm-tab:hover { color: #ccc; }
.pm-tab.active { color: #14F195; border-bottom-color: #14F195; }
.pm-request-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 10px 9px 14px; }
.pm-request-item:hover { background: #14161c; }
.pm-request-user { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.pm-request-name { font-size: 13px; color: #ccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-request-tier { font-size: 10px; font-weight: 600; }
.tier-text-0 { color: #999; } .tier-text-1 { color: #14F195; } .tier-text-2 { color: #9945FF; } .tier-text-3 { color: #ffb700; }
.pm-request-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pm-request-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #2a2a35; background: #0d0d12; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: 0.15s; }
.pm-request-btn svg { width: 14px; height: 14px; }
.pm-request-btn.accept { color: #14F195; }
.pm-request-btn.accept:hover { background: rgba(20,241,149,0.12); border-color: #14F195; }
.pm-request-btn.reject { color: #ff4444; }
.pm-request-btn.reject:hover { background: rgba(255,68,68,0.12); border-color: #ff4444; }
.pm-friends-list { flex-grow: 1; overflow-y: auto; }
.pm-friend-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; cursor: pointer; font-size: 13px; color: #ccc; transition: 0.15s; }
.pm-friend-item:hover { background: #14161c; }
.pm-friend-item.active { background: rgba(20,241,149,0.08); color: #14F195; font-weight: 600; }
.pm-friend-unread-dot { min-width: 16px; height: 16px; padding: 0 4px; background: #ff4444; color: #fff; border-radius: 8px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pm-chat-panel { flex-grow: 1; display: flex; flex-direction: column; position: relative; min-width: 0; }
.pm-chat-empty { flex-grow: 1; display: flex; align-items: center; justify-content: center; color: #555; font-size: 13px; text-align: center; padding: 20px; }
.pm-chat-active { display: none; flex-direction: column; height: 100%; }
.pm-chat-header { padding: 14px 46px 14px 16px; border-bottom: 1px solid #1a1a24; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.15s; }
.pm-chat-header:hover { color: #14F195; }
.pm-chat-messages { flex-grow: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.pm-bubble-wrap { display: flex; flex-direction: column; max-width: 75%; }
.pm-bubble-wrap.mine { align-self: flex-end; align-items: flex-end; }
.pm-bubble-wrap.theirs { align-self: flex-start; align-items: flex-start; }
.pm-bubble { max-width: 100%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; word-break: break-word; }
.pm-bubble.mine { align-self: flex-end; background: #14F195; color: #000; border-bottom-right-radius: 3px; }
.pm-bubble.theirs { align-self: flex-start; background: #1a1a24; color: #eee; border-bottom-left-radius: 3px; }
.pm-bubble-time { font-size: 10px; opacity: 0.6; margin-top: 3px; display: block; }

@keyframes badgeGlowGreen { 0%, 100% { box-shadow: 0 0 8px rgba(20,241,149,0.2); } 50% { box-shadow: 0 0 16px rgba(20,241,149,0.5); } }
@keyframes badgeGlowPurple { 0%, 100% { box-shadow: 0 0 10px rgba(153,69,255,0.3); } 50% { box-shadow: 0 0 20px rgba(153,69,255,0.65); } }
@keyframes badgeGlowGold { 0%, 100% { box-shadow: 0 0 12px rgba(255,183,0,0.35); } 50% { box-shadow: 0 0 24px rgba(255,183,0,0.8); } }

/* ==================================================================
   MOBILE (<= 900px) : les 3 colonnes ne tiennent pas côte à côte
   (260px + libre + 350px), donc on n'en affiche qu'une à la fois,
   pilotée par les onglets .mobile-tabs / la fonction switchMobileView().
   ================================================================== */
@media (max-width: 900px) {
    .mobile-tabs { display: flex; background: rgba(5,5,8,0.95); border-bottom: 1px solid #1a1a24; }
    .mobile-tab-btn { flex: 1; background: none; border: none; color: #777; font-family: inherit; font-weight: 600; font-size: 13px; padding: 12px 0; cursor: pointer; border-bottom: 2px solid transparent; transition: 0.2s; }
    .mobile-tab-btn.active { color: #14F195; border-bottom-color: #14F195; }

    .main-container { flex-direction: column; }

    .sidebar, .chat-area, .ca-sidebar { display: none; width: 100%; }
    /* flex:1 + min-height:0 est indispensable : sans ça, la liste de messages
       (flex-grow:1 + overflow-y:auto) grandit sans limite au lieu de scroller,
       et pousse la barre de saisie hors de l'écran. */
    .sidebar.mobile-visible, .chat-area.mobile-visible, .ca-sidebar.mobile-visible {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
    }

    .sidebar { border-right: none; overflow-y: auto; }
    /* Sélecteur d'emotes : panneau collé en bas de l'écran, plus facile à viser au doigt */
    .emote-picker { left: 0; right: 0; bottom: 0; top: auto; width: 100%; border-radius: 14px 14px 0 0; border-bottom: none; }
    .emote-picker-grid { max-height: 38vh; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }

    .slide-from-right { animation: slideFromRight 0.22s ease-out; }
    .slide-from-left { animation: slideFromLeft 0.22s ease-out; }
    /* Crevette et baleine sont des PNG carrés : en "cover" dans une carte large et basse,
       ils étaient agrandis puis rognés. En "contain", l'image entière tient dans la carte. */
    .room-icon-shrimp img, .room-icon-whale img { object-fit: contain; }
    .ca-sidebar { border-left: none; width: 100%; }

    /* L'en-tête reste TOUJOURS sur une ligne : c'est le pseudo qui se raccourcit ("…") s'il manque de place */
    .header { padding: 10px 14px; flex-wrap: nowrap; gap: 8px; }
    .logo-container { flex-shrink: 0; }
    .header-right { min-width: 0; }
    .sol-badge { flex-shrink: 0; }
    .menu-container { min-width: 0; }
    .username-edit-wrap { min-width: 0; }
    .header-username-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
    .burger-btn { flex-shrink: 0; }
    .logo-text { font-size: 18px; }
    .logo-svg { width: 26px; height: 26px; }
    .header-right { gap: 8px; }
    .btn-connect { padding: 9px 14px; font-size: 13px; }
    .sol-badge { padding: 5px 9px; font-size: 12px; }
    .header-username-text, .header-username-input { font-size: 13px; }

    /* 150px : assez pour un pseudo + les boutons Accepter/Refuser de l'onglet Requests */
    .pm-sidebar { width: 150px; }
    .pm-request-item { padding: 8px 8px 8px 10px; }
    .pm-tab { font-size: 10px; letter-spacing: 0.3px; }
    .pm-layout { height: 70vh; }
}

@keyframes slideFromRight { from { transform: translateX(40px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideFromLeft { from { transform: translateX(-40px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }

/* Téléphones étroits (<= 380px) : header encore un peu plus compact */
@media (max-width: 380px) {
    .logo-text { font-size: 16px; }
    .header-username-text { max-width: 90px; }
}

/* Écrans tactiles : le crayon n'apparaît qu'au survol, impossible au doigt. Il prenait de la place
   pour rien entre le pseudo et le burger (le pseudo reste modifiable depuis "My Profile"). */
@media (hover: none) {
    .username-edit-wrap { margin-right: 0; position: relative; }
    /* Le crayon ne prend plus de place à côté du pseudo : il se superpose au pseudo quand on le touche */
    .pencil-btn { position: absolute; inset: 0; justify-content: center; background: rgba(5,5,8,0.8); border-radius: 6px; color: #14F195; opacity: 0; pointer-events: none; }
    .pencil-btn svg { width: 16px; height: 16px; }
    .username-edit-wrap:hover .pencil-btn { opacity: 0; }
    .username-edit-wrap.show-pencil .pencil-btn { opacity: 1; pointer-events: auto; }
    .header-username-input { width: 120px; max-width: 40vw; }
}