body { font-family: 'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background: linear-gradient(180deg,       #f7f9fc 0,       #fff 35%,       #f8fbff 100%); color: #1154a1; margin: 0; min-width: 0; }

/* Evita pull-to-refresh no mobile */
body, html { width: 100%; min-height: 100%; }

/*Isso impede o index de “puxar para baixo” por trás do painel. 10-05-2026*/
body.profile-open { overflow: hidden; height: 100vh; touch-action: none; position: fixed; width: 100%; overscroll-behavior: none; }

*, *::after, *::before { box-sizing: border-box; }

canvas, img, svg, video { max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; }

body.chat-loading .message { animation: none!important; opacity: 1!important; transform: none!important; }

/* Trava de pull-to-refresh no painel de emojis/stickers */
#emojiList, #expressionContent, #stickerList, #stickerPanel { overscroll-behavior: contain; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

/* Trava o refresh da página inteira enquanto qualquer painel flutuante estiver visível */
body.panel-open { overscroll-behavior-y: none; }
/* Oculta o botão do lapis de editar capa quando o painel VIP estiver aberto */
body #profilePanel.vip-mode-active .profile-cover-actions #editProfileCoverBtn { display: none; }

/* ========================================================================= 
   MAPEAMENTO DE FONTES LOCAIS EXCLUSIVAS VIP (MÉTODO LOCAL SEGURO)
   ========================================================================= */
/* ========================================================================= 
   MAPEAMENTO DE FONTES LOCAIS EXCLUSIVAS VIP (COM FONT-DISPLAY SWAP)
   ========================================================================= */
@font-face {
font-family: 'BebasNeue'; src: url('./fonts/BebasNeue-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'RubikVinyl'; src: url('./fonts/RubikVinyl-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Gamaa'; src: url('./fonts/GaMaamli-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Barrio'; src: url('./fonts/Barrio-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'BraahOne'; src: url('./fonts/BraahOne-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'BungeeShade'; src: url('./fonts/BungeeShade-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'CaesarDressing'; src: url('./fonts/CaesarDressing-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Charm-Bold'; src: url('./fonts/Charm-Bold.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'CherryBombOne'; src: url('./fonts/CherryBombOne-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'CinzelDecorative'; src: url('./fonts/CinzelDecorative-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Cuprum-Italic'; src: url('./fonts/Cuprum-Italic-VariableFont_wght.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'EduAUVICWANTHand'; src: url('./fonts/EduAUVICWANTHand-VariableFont_wght.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'FasterOne'; src: url('./fonts/FasterOne-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'GeostarFill'; src: url('./fonts/GeostarFill-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Kablammo'; src: url('./fonts/Kablammo-Regular-VariableFont_MORF.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'KumarOneOutline'; src: url('./fonts/KumarOneOutline-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'LibertinusKeyboard'; src: url('./fonts/LibertinusKeyboard-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Limelight'; src: url('./fonts/Limelight-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'ManufacturingConsent'; src: url('./fonts/ManufacturingConsent-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Matangi'; src: url('./fonts/Matangi-VariableFont_wght.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Matemasie'; src: url('./fonts/Matemasie-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'MeaCulpa'; src: url('./fonts/MeaCulpa-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'PlaywriteBEVLG'; src: url('./fonts/PlaywriteBEVLG-VariableFont_wght.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Praise'; src: url('./fonts/Praise-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Pridi'; src: url('./fonts/Pridi-Medium.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Pridi-ExtraLight'; src: url('./fonts/Pridi-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Pridi-SemiBold'; src: url('./fonts/Pridi-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'RockSalt'; src: url('./fonts/RockSalt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Tangerine'; src: url('./fonts/Tangerine-Bold.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'TASAExplorer'; src: url('./fonts/TASAExplorer-VariableFont_wght.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'TiltPrism'; src: url('./fonts/TiltPrism-Regular-VariableFont_XROT,YROT.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'UnifrakturMaguntia'; src: url('./fonts/UnifrakturMaguntia-Regular.ttf') format('truetype'); font-display: swap; }
@font-face {
font-family: 'Urbanist-Italic'; src: url('./fonts/Urbanist-Italic-VariableFont_wght.ttf') format('truetype'); font-display: swap; }

/* ================== HERO =================== */
#background-animation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #160172, #010177); display: flex; align-items: center; justify-content: center; text-align: center; padding: 90px 20px 40px; min-height: 70vh; }

.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at center, rgba(2, 6, 114, 0.596), rgba(2, 6, 114, 0.596)),rgba(2, 6, 114, 0.466); }

.hero .container { position: relative; z-index: 2; }

.hero .row { min-height: 320px; }

.hero .animate-slide { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; margin: 0 auto; }

/*posição dos elemento dentro do hro texto img e botoes */
.hero .animate-slide img { width: 297px; height: auto; margin-bottom: 8px; }

.hero img { opacity: 1; }

.hero p { color: rgba(255, 255, 255, 0.92); min-height: 28px; margin-bottom: 14px; }

.hero .btn { color: #fff; border-color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.08); font-weight: 700; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }

.hero .btn:hover { color: #000; background: rgb(255, 255, 255); }

/* ================== HERO / PHOTO WALL =================== */

.photo-wall { position: absolute; top: 0; left: 0; width: 200%; height: 100%; display: flex; transform: translate3d(0, 0, 0); will-change: transform; animation: movePhotoWall 25s linear infinite; }

.photo-grid { width: 100%; height: auto; display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: auto; gap: 6px; padding: 6px; }

.photo-grid img { width: 100%; aspect-ratio: 1/1; height: auto; object-fit: cover; opacity: 0.55; filter: grayscale(25%) blur(1px); }

@keyframes movePhotoWall {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ================== HERO MOBILE =================== */

@media (max-width: 768px) {
  .hero { min-height: 70vh; padding: 88px 14px 34px; }
  .hero h1 { font-size: clamp(1.45rem, 7vw, 1.9rem); }
  .hero p { font-size: 1rem; }
  .hero-content p { font-size: 1rem; }
  .hero-content button { width: 100%; max-width: 280px; }
  .photo-wall { transform: translate3d(0, 0, 0); will-change: transform; animation: movePhotoWall 10s linear infinite; }
  .photo-grid { width: 50%; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 90px; gap: 8px; padding: 6px; }
}

/* ================== NAVBAR INDEX =================== */

.navbar { position: absolute; top: 0; left: 0; right: 0; z-index: 999; background: linear-gradient(135deg, #0000001c); border-bottom: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); color: #fff!important; }

.navbar>.container, .navbar>.container-fluid { position: relative; }

.navbar-brand { font-size: 17px; letter-spacing: 0.9px; font-family: Cambria,Cochin,Georgia,Times,'Times New Roman',serif; margin-right: 10px; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }

.navbar-brand img { width: 45px; height: 45px; object-fit: contain; flex-shrink: 0; }

.txtlogo img { padding-right: 1px; width: 45px; height: 45px; object-fit: contain; }

.nav-link { color: #fff!important; margin-right: 20px; }

.nav-link:hover { text-decoration: underline; }

.navbar .nav-link { color: #fff!important; font-weight: 600; }

.navbar .nav-link:hover { color: #dfe9ff!important; }

/* ================== USER AREA NAVBAR =================== */

#userArea { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; max-width: 260px; min-height: 44px; flex-wrap: nowrap; overflow: visible; }

.navbar, .navbar .container { overflow: visible; }

#userArea .user-area-name, #userArea span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; flex-shrink: 1; }

#userArea .user-area-avatar, #userArea img { width: 38px; height: 38px; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; padding: 3px; flex-shrink: 0; transition: transform 0.2s ease,box-shadow 0.2s ease; }

#userArea .user-area-avatar:hover, #userArea img:hover { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }

.user-area-shell { display: flex; align-items: center; min-width: 0; max-width: 260px; min-height: 44px; }

.user-area-loading { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; overflow: hidden; }

.user-area-name { color: #fff; font-weight: 700; line-height: 1; }

.user-area-ghost-btn { opacity: 0.7; pointer-events: none; white-space: nowrap; flex-shrink: 0; }

/* ================== MENU HAMBÚRGUER / X =================== */

.navbar-toggler { border: none; margin-left: 10px; flex-shrink: 0; }

.navbar-toggler:focus { box-shadow: none; }

.navbar .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.5); }

.navbar-toggler-icon { background-image: none; width: 24px; height: 18px; position: relative; }

.navbar .navbar-toggler-icon { filter: brightness(10); }

.navbar-toggler-icon span, .navbar-toggler-icon::after, .navbar-toggler-icon::before { content: ""; position: absolute; left: 0; width: 100%; height: 3px; background: #fff; transition: all 0.3s ease; }

.navbar-toggler-icon::before { top: 0; }

.navbar-toggler-icon span { top: 7px; }

.navbar-toggler-icon::after { bottom: 0; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: rotate(45deg); top: 7px; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span { opacity: 0; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { transform: rotate(-45deg); bottom: 7px; }

/* ================== MINI MENU DO USUÁRIO / NAVBAR index 08-05-2026 =================== */

.user-menu-wrap { position: relative; display: flex; align-items: center; min-width: 0; }

.user-menu-btn { display: flex; align-items: center; gap: 9px; flex-direction: row-reverse; background: transparent; border: none; padding: 4px 6px; border-radius: 999px; cursor: pointer; color: #fff; min-width: 0; -webkit-tap-highlight-color: transparent; }

.user-menu-btn:hover { background: rgba(255, 255, 255, 0.12); }

.user-menu-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.75); padding: 2px; flex-shrink: 0; }

.user-menu-name { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 700; font-size: 15px; }

.user-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 190px; background: #fff; border-radius: 14px; padding: 10px; border: 1px solid #2f2cb971; z-index: 3000; }

.user-dropdown-item { width: 100%; border: none; background: transparent; color: #1f2937; padding: 10px 12px; border-radius: 10px; text-align: left; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 10px; }

.user-dropdown-item:active, .user-dropdown-item:hover { background: #42424227; }

.user-dropdown-item.logout { color: #111; }

@media (max-width: 576px) {
  .user-dropdown { width: 180px; }
  .user-menu-name { max-width: 95px; font-size: 14px; }
}

.user-dropdown-header { display: flex; align-items: center; gap: 12px; padding: 6px 18px 14px; margin-bottom: 8px; border-bottom: 1px solid #eef0f4; }

.user-dropdown-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #e6e9f2; padding: 2px; }

.user-dropdown-name { color: #111; font-size: 15px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-dropdown-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: #0ea5e9; font-size: 17px; flex-shrink: 0; }

.user-dropdown-item.logout .user-dropdown-icon { color: #0c00b8; }

.user-dropdown-icon { width: 22px; height: 22px; background: transparent; color: #0ea5e9; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }

.user-dropdown-item.logout .user-dropdown-icon { color: #ef4444; }

/* ================== MENU HAMBURGUE MOBILE OVERLAY =================== */

@media (max-width: 991px) {
  #navbarNav { position: absolute; top: 100%; left: 0; right: 0; background: #1a1d20; z-index: 998; padding: 10px 0; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25); }
  #navbarNav .navbar-nav { width: 100%; text-align: center; }
  #navbarNav .nav-link { margin-right: 0; padding: 12px 16px; color: #fff!important; font-weight: 700; }
}

/*edita os card da sala 17-05-26*/
.chat-rooms { position: relative; background: rgb(255, 255, 255); border-radius: 32px; padding: clamp(4px, 4vw, 2px); border: 1px solid rgba(255, 255, 255, 0.7); backdrop-filter: blur(14px); overflow: hidden; }

.chat-rooms::before { content: ""; position: absolute; inset: 0; pointer-events: none; }

.cta-banner { background: linear-gradient(120deg, #0d6efd, #5da8ff); color: #fff; border-radius: 20px; padding: clamp(20px, 4vw, 32px); box-shadow: 0 14px 30px rgba(13, 110, 253, 0.3); }

/* ================== BOTÕES =================== */

.btn { transition: transform 0.2s ease,box-shadow 0.2s ease,background-color 0.2s ease; }

.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); }

/* ================== ANIMAÇÕES =================== */

.animate-fade { animation: fadeIn 0.9s ease forwards; opacity: 0; }

.animate-slide { animation: slideUp 0.9s ease forwards; opacity: 0; }

.delay-1 { animation-delay: 0.15s; }

.delay-2 { animation-delay: 0.3s; }

.delay-3 { animation-delay: 0.45s; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* ================== CHAT PAGE NAVBAR =================== */

.chat-page .navbar { justify-content: space-between; }

.chat-page .navbar-toggler { margin-left: auto; }

.chat-page .navbar>.container, .chat-page .navbar>.container-fluid { display: flex; align-items: center; min-width: 0; }

/* ========================= FIXAR MENU TOGGLER NO CHAT.HTML ========================= */
.chat-page .navbar { justify-content: space-between; }

.chat-page .navbar-toggler { margin-left: auto; }

/* garante alinhamento vertical */
.chat-page .navbar>.container, .chat-page .navbar>.container-fluid { display: flex; align-items: center; min-width: 0; }

/* ================== SALAS ======================================================== */
.salas-container { margin-top: 40px; }

.room-card-left { display: inline-flex; align-items: center; gap: 14px; }

/*edita o icone dentro dos card das salas*/
.room-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 12px; flex-shrink: 0; }

.room-icon i { font-size: 20px; color: #2800b9; }

.room-content strong { display: block; margin-bottom: 2px; }

.sala-btn { background: #226fff; color: #fff; font-weight: bold; padding: 20px; border-radius: 12px; margin: 8px; transition: 0.25s ease-in-out; text-decoration: none; display: block; text-align: center; }

.sala-btn:hover { background: #6146f8; color: #fff; transform: scale(1.05); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); }

/* ================== MENÇÃO ===================================================== */
.mention:hover { text-decoration: underline; background-color: rgba(255, 64, 129, 0.1); }

/* ================== RESPONSIVIDADE INDEX =================== */
/* 1. Ajuste geral para dispositivos pequenos */
@media (max-width: 768px) {
  .sala-btn { padding: 14px; font-size: 0.95rem; margin: 6px; }
  #userArea, .user-area-shell { max-width: 190px; }
  #userArea .user-area-name, #userArea span { max-width: 96px; }
}

/* 2. Layout com 2 colunas de salas no celular */
@media (max-width: 576px) {
  .sala-col { flex: 0 0 48%; max-width: 48%; }
  .navbar .nav-link { margin-right: 0; font-size: 0.9rem; }
  .hero h1 { font-size: clamp(1.35rem, 8vw, 1.7rem); }
  .hero p { font-size: 0.9rem; }
  .sala-btn { font-size: 0.85rem; padding: 12px; }
  .chat-rooms { border-radius: 16px; }
}

/* 3. Ajuste do rodapé em telas menores */
@media (max-width: 400px) {
  footer p { font-size: 0.8rem; }
  .sala-col { flex: 0 0 100%; max-width: 100%; }
}

/* 4. Footer fixo e leve */

/*================ DAQUI PRA BAIXO EDITA AS PARTE DO CHAT ISSO EDITA O PAINEL TAMBEM ========================*/

#salaTitulo { text-align: center; background: #186dec; color: #fff; padding: 12px; font-weight: 400; font-size: 1.1rem; border-bottom: 3px solid #0b5ed7; display: none; }

/*edita os nomes da salas que aparece no chat IMPORTANTE*/
.chat-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; overflow: hidden; }

.chat-page #chat-container { flex: 1; overflow-y: auto; }
/*EDITAR o espacamento das lateral dentro do chat */
#chat-container { padding-left: 6px; }

/* ------------------------ BASE DO CAMPO DE ENVIO 11-05-26 -------------------------- */
#message-input-wrapper { position: relative; flex-shrink: 0; width: 100%; }

/* ------------------------ OFUSCAR CAMPO DE ENVIO  SEM PERFIL COMPLETO ENVIAR MENSAGEM 11-05-26-------------------------- 
#message-input-wrapper.profile-locked #message-input-area {
  opacity: 0.57;
  background-color: #1900ff02;
  /*cor doc campo de enviar mensagem
  filter: grayscale(100%);
  pointer-events: none;
}*/

/* ------------------------ OFUSCAR CAMPO DE ENVIO SEM PERFIL COMPLETO ENVIAR MENSAGEM -------------------------- */
#message-input-wrapper.profile-locked #message-input-area { opacity: 0.65; background-color: #f5f5f5; pointer-events: none; }

.message-profile-lock { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 80; background: #fff; color: #2f006b; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); white-space: nowrap; }

.message-profile-lock::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; }

/* ------------------------ OFUSCAR CAMPO DE ENVIO MOBILE 11-05-26-------------------------- */
@media (max-width: 576px) {
  .message-profile-lock { font-size: 13px; padding: 7px 12px; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
}

#chat-layout { flex: 1; min-height: 0; display: flex; overflow: hidden; width: 100%; }

#chat-main-column { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/*COR DE FUNDO DO CAMPO E ENVIAR MSG*/
#message-input-area { display: flex; align-items: center; gap: 8px; background: #fff; border-top: 1px solid #ddd; padding: 10px; width: 100%; box-sizing: border-box; min-height: var(--input-area-height, 62px); flex-shrink: 0; }

/*todos os botao do input de eviar */
#message-input-area button { background: none; border: none; color: #555; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; padding: 6px; min-width: 40px; min-height: 40px; cursor: pointer; transition: 0.2s; flex-shrink: 0; }

/*botao de enviar */
#message-input-area button:hover { color: #3700ff; }

#message-input-area input { flex: 1; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 50px; padding: 10px 15px; font-size: 1rem; outline: none; min-width: 0; }

#sendBtn { background: #0d6efd; color: #fff; border-radius: 50%; width: 42px; height: 42px; min-width: 42px; min-height: 42px; display: flex; align-items: center; justify-content: center; border: none; flex-shrink: 0; }

@media (max-width: 600px) {
  #message-input-area { gap: 5px; padding: 8px; min-height: var(--input-area-height, 58px); }
  #message-input-area input { font-size: 0.9rem; padding: 8px 12px; }
  #sendBtn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
}

/* EDITAR O NOVO navbar do CHAT.HTML 07-03-2026*/
.chat-navbar { position: sticky; top: 0; z-index: 1000; height: 60px; min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 122px; 
  /*espaçamento na foto do usuario no index*/ /*  background: linear-gradient(180deg, #2f23c7, #3b2fd6);*/ 
  color: #fff; flex-shrink: 0; }

/* lados */
.chat-left, .chat-right { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* nome das salas aparece do lado do nome do usuario no chat dentro do nav centro */
.chat-center { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 600; font-size: 16px; letter-spacing: 0.9px; font-family: Arial,Helvetica,sans-serif; max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* botão */
.nav-btn img { width: 28px; height: auto; }

/* ================== AJUSTES RESPONSIVOS DO CHAT BASE ================== */
@media (max-width: 768px) {
  .chat-navbar { height: 56px; min-height: 56px; padding: 0 32px; /*espaçamento na foto do usuario no index*/ }
  .chat-center { font-size: 15px; max-width: 54vw; }
  /*EDITAR o espacamento das lateral dentro do chat */
  #chat-container { padding-left: 6px; padding-right: 4px; }
}

@media (max-width: 480px) {
  /*Botao de enviar mensagem altura e largura */
  #message-input-area button { min-width: 36px; min-height: 36px; padding: 5px; font-size: 1.75rem; }
  .chat-left, .chat-right { gap: 6px; }
  .chat-center { max-width: 50vw; left: 35%; font-weight: 600; font-size: 16px; font-family: Arial,Helvetica,sans-serif; }
  .nav-btn img { width: 25px; }
  #chat-container { padding-left: 8px; padding-right: 4px; }
}

/*======================== EDITA O CAMPO DE RESPONDER OS USUARIOS MENCIONADOS ==================================*/

/* --------------------- REPLY PREVIEW (BLOCO ÚNICO E ORGANIZADO) --------------------------- */
.reply-preview { position: absolute; left: 10px; bottom: calc(100% + 10px); z-index: 50; display: inline-block; flex-direction: row; align-items: flex-start; gap: 17px; 
  width: auto; max-width: min(80vw, 680px); background-color: var(--reply-bg-color, #000); background-image: linear-gradient(rgb(231, 231, 231),       rgb(218, 216, 216)); 
  color: #fff; border-left: 4px solid var(--reply-border-color, #353434); border-right: 4px solid var(--reply-border-color, #353434); border-radius: 12px; padding: 8px 9px 21px; 
  animation: slideUp 0.2s ease; width: fit-content; min-width: unset; flex: unset; }

/*  REPLY PREVIEW – TEXTO GRANDE mostra mais dentro da menção 16-02-26  */
.reply-preview .reply-text { position: relative; font-size: 0.94rem; color: #0000009f; white-space: normal; line-height: 1.25em; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; }

.reply-preview .reply-text:not(.expanded) { max-height: calc(1.25em * 3); }

.reply-preview .reply-text.expanded { max-height: none; padding-right: 0; }

/* EDITA o botão ver mais e ver menos da mencao nao apagar 17-02-26*/
.reply-toggle { position: absolute; right: 8px; bottom: 2px; font-size: 14px; color: var(--author-color, #0d6efd); cursor: pointer; padding-left: 10px; user-select: none; }

/*edita o botao da mencao icone */
.reply-preview .reply-toggle { width: 32px; height: 32px; font-size: 0; border-radius: 50%; background-image: url("img/botao1.png"); background-repeat: no-repeat; background-position: center; background-size: 25px; -webkit-tap-highlight-color: transparent; }

.reply-preview .reply-text.expanded+.reply-toggle { background-image: url("img/botao2.png"); }

/* IMAGEM / STICKER */
.reply-preview img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }

/* largura do Bloco de menção */
.reply-preview .reply-info { display: flex; flex-direction: column; overflow: hidden; max-width: min(80vw, 560px); min-width: 0; }

.reply-preview .reply-author { display: block; font-weight: 700; margin-bottom: 2px; background: transparent; color: var(--author-color, #000); padding: 0; border-radius: 0; font-size: 14px; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; padding: 4px 28px 5px 0; }

/* Botao X Fechar dentro do campo de menção */
.reply-preview .close-reply { margin-left: auto; font-size: 20px; cursor: pointer; color: #fff; margin-top: -7px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }

/* AJUSTE MOBILE – botao X mencao 18-02-26*/
@media (max-width: 915px) {
  .reply-preview { left: 8px; right: auto; width: fit-content; max-width: min(78vw, 320px); gap: 8px; }
  .reply-preview .reply-info { max-width: none; flex: 1; }
  .reply-preview .close-reply { width: 32px; height: 44px; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
  .reply-preview .close-reply:active { background: rgba(7, 0, 0, 0.15); }
}

/* AJUSTE MOBILE */
@media (max-width: 480px) {
  .reply-preview { padding: 1px 5px 20px; border-radius: 10px; }
  /*STICKER */
  /*edita o espacamento do nome do usuario dentro do campo de menção 03-08-26 */
  .reply-preview .reply-author { font-size: 1.1rem; padding: 4px 48px 5px 0; }
  .reply-preview .reply-text { font-size: 0.88rem; }
  .reply-preview .close-reply { width: auto; height: 44px; font-size: 24px; }
}

/* animação */
@keyframes slideUp {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Wrapper geral para deixar o preview alinhado SEM invadir o input reply */
.input-wrapper { position: relative; }

.quoted-text { color: #353232; white-space: pre-wrap; display: block; font-family: Arial,Helvetica,sans-serif; font-size: 1rem; /*edita o tamanho do texto dentro da resposta */ }

.login-box { width: 100%; max-width: 380px; }

#loginBtn img { margin-right: 8px; }

/*=============== EDITA campo de enviar mensagens no chat textarea cresce de acordo com o texto ======================= */
.message-input { width: 100%; min-width: 0; border: 1px solid #5856568e; border-radius: 18px; padding: 10px 14px; resize: none; overflow-y: auto; max-height: 95px; line-height: 20px; font-size: 17px; white-space: pre-wrap; word-break: break-word; transition: border-color 0.2s ease; }
/* Padroniza a cor do placeholder e do texto digitado no mobile/iOS */
/* Padroniza a cor do placeholder e permite que o texto digitado receba a cor VIP */
#message-input-area .message-input { -webkit-text-fill-color: currentColor; }

#message-input-area .message-input::placeholder { color: #777; -webkit-text-fill-color: #777777; opacity: 1; }

.message-input:focus { border-color: #3d3c3ca1; outline: none!important; }

/*=========================== ESSA PARTE EDITA O login do google Botao de SAIR =============================================*/
#loginBtn { background-color: #0050a0e1!important; color: #fff!important; border: none; padding: 6px 12px; border-radius: 46px; font-weight: bold; font-size: 15px; min-height: 38px; }

#loginBtn:hover { background-color: #012346!important; color: #fff!important; }

/*EDITA A COR DE FUNDO DAS mensagens*/
.message { background: #fffdfd; border-radius: 18px; max-width: 98%; margin-top: 1px; margin-bottom: 1px; word-wrap: break-word; overflow-wrap: anywhere; }

/*tamanho do texto do chat e o espaçamento do texto*/
.message span { font-size: 0.95em; line-height: 1.7em; }
/*tamanho do texto do nome no chat e o espaçamento do texto*/
.message-author-name { font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/*editar o Botao de sair*/
.btn-logout { background: #2604bd00!important; color: #fff!important; border-radius: 6px; border: none; padding: 5px 14px; font-weight: 600; min-height: 36px; white-space: nowrap; }

/*================== Edita as imagem e a Hora ===========================================================*/
.user-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 3px; flex-shrink: 0; }

.message-time { font-size: 0.68em; color: #5756568f; margin-top: 1px; text-align: right; }

/* ================= mini MENU CONTEXTUAL DAS MENSAGENS ================= 06-05-26 */

.message-header { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }

.message-more-btn { display: none; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: transparent; color: #555; font-size: 20px; line-height: 1; border-radius: 50%; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }

.message.show-actions .message-more-btn { display: inline-flex; }

.message-more-btn:active { background: rgba(0, 0, 0, 0.08); }

/* menu flutuante */
.message-context-menu { position: fixed; z-index: 3500; min-width: 165px; background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); border: 1px solid rgba(0, 0, 0, 0.06); }

.message-context-menu>button { width: 100%; border: none; background: transparent; color: #222; padding: 10px 12px; border-radius: 10px; font-size: 14px; text-align: left; display: flex; align-items: center; gap: 9px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.message-context-menu>button:active, .message-context-menu>button:hover { background: #f1f3f7; }

.message-context-menu #contextReportBtn { color: #d93025; }

/*================================ formatacao geral dos TEXTOS texto, palavras que aparece dentro do chat==============================================*/
/* ajuste mobile */
@media (max-width: 600px) {
  .message-more-btn { width: 30px; height: 30px; font-size: 22px; }
  /*menu flutuante */
  .message-context-menu { min-width: 175px; border-radius: 16px; box-shadow: 0 10px 28px rgba(97, 96, 96, 0.24); border: 1px solid rgba(150, 149, 149, 0.733); }
  .message-context-menu button { padding: 12px; font-size: 15px; }
  .message span { font-size: 1.07rem; }
  .quoted-text { font-size: 1rem; /*edita o tamanho do texto dentro da resposta */ font-weight: 300; }
}

.message-more-btn { display: none; }

.message.show-actions .message-more-btn { display: inline; }

.context-menu-header { position: relative; height: 20px; margin-bottom: 6px; }

#closeContextMenu { position: absolute; top: -2px; right: -2px; border: none; background: transparent; font-size: 18px; cursor: pointer; color: #555; padding: 4px; border-radius: 6px; }

#closeContextMenu:active { background: rgba(0, 0, 0, 0.1); }

.msg-text { display: block; white-space: pre-wrap; max-height: 4.5em; overflow: hidden; color: #e00606; overflow-wrap: anywhere; word-break: break-word; }

.toggle-expand { background: transparent; border: none; color: #00000079; padding: 0; font-size: 14px; cursor: pointer; text-decoration: underline; -webkit-tap-highlight-color: transparent; }

.toggle-expand:hover { text-decoration: underline; }

/* ===================================== IMPORTANTE BASE DOS PAINEIS FLUTUANTES 24-02-26 ==================== */

.floating-panel { position: absolute; bottom: 100%; margin-bottom: 8px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); display: flex; flex-direction: column; overflow: hidden; max-width: calc(100vw - 20px); z-index: 1200; /* Camada superior a todas as mensagens */ /* Estado Inicial Oculto sem quebrar a transição */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity 0.22s ease,transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),visibility 0.22s; will-change: transform,opacity; }

.floating-panel.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.floating-panel.hide { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.16s ease,transform 0.16s ease,visibility 0.16s; }
/* MOBILE (PADRÃO PARA TODOS) */
@media (max-width: 768px) {
  .floating-panel { left: 10px; right: 10px; width: auto; max-width: 360px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 480px) {
  .floating-panel { margin-bottom: 6px; max-width: calc(100vw - 16px); }
}

/* ================== Z-INDEX PADRÃO DO SISTEMA 24-02-26 ================== */
emoji-picker { z-index: 2100!important; }

#toast { z-index: 3000; }

.feedback-modal { z-index: 4000; }

.global-overlay { z-index: 5000; }

/*======================================== PAINEL DE CORES ================================================*/
#colorPanel { right: 15px; padding: 12px; width: 290px; max-height: 200px; overflow-y: hidden; }

.color-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.color-title { font-weight: bold; font-size: 14px; text-align: center; flex: 1; background: #4c03f71f; border-radius: 28px; }

.color-close-btn { background: transparent; border: none; font-size: 18px; cursor: pointer; color: #444; padding: 2px 6px; border-radius: 6px; min-width: 34px; min-height: 34px; }

.color-close-btn:hover { background: rgba(0, 0, 0, 0.08); }

#colorPanel.show { opacity: 1; transform: translateY(0); }

.color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 160px; overflow-y: auto; padding-right: 4px; overflow-x: hidden; }

.color-box { position: relative; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s ease,border 0.2s ease,box-shadow 0.15s ease; display: flex; align-items: center; justify-content: center; }

.color-box:hover { transform: perspective(200px) rotateX(6deg); border-color: #d3c5fa5e; }

.color-check { color: #fff; font-size: 20px; font-weight: bold; display: none; }

.color-box.selected .color-check { display: block; }

/* Zoom quando a cor é selecionada */
.color-box.selected { transform: scale(1.45); border: 2px solid #ffffffcc; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); z-index: 10; }

@media (max-width: 480px) {
  #colorPanel { width: calc(100vw - 24px); right: 12px; left: 12px; max-height: 260px; }
  .color-box { width: 38px; height: 38px; border-radius: 8px; }
  .color-grid { grid-template-columns: repeat(5, minmax(38px, 1fr)); gap: 8px; }
  .color-panel-header { padding-bottom: 6px; }
  .color-title { font-size: 15px; }
  .color-close-btn { font-size: 20px; }
}

/*======================================== FIGURINHAS STICKER ================================================*/
#message-input-wrapper { position: relative; }
#stickerPanel { right: 12px; left: auto; width: min(370px, calc(100vw - 24px)); height: 45vh; max-height: 380px; min-height: 260px; border: 1px solid #ccc; padding: 10px; overflow: hidden; padding-top: 0.1rem; z-index: 1200; /* Garante que o painel fique acima de qualquer avatar ou texto do chat */ }

#stickerPanel.show { display: flex; }

#expressionContent { flex: 1; overflow: hidden; padding: 4px 2px; min-height: 0; }

#stickerList { padding: 3px; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 0; -webkit-overflow-scrolling: touch; }

#stickerList img { width: 52px; height: 52px; border-radius: 10px; cursor: pointer; transition: transform 0.2s; object-fit: cover; }

#stickerList img:hover { transform: scale(1.15); }

/* Scroll bonito no sticker */
#stickerList::-webkit-scrollbar { width: 3px; }

#stickerList::-webkit-scrollbar-thumb { background: #4d04f734; border-radius: 10px; }

.sticker-categories::-webkit-scrollbar-thumb { background: #8034fa33; border-radius: 10px; }

/* edita sticker Figurinhas no chat */
.sticker-img { width: 33px; max-width: 35vw; border-radius: 12px; display: block; margin: 4px 0; transition: transform 0.2s; }

.sticker-img:hover { transform: scale(1.08); }

/* Reply */
.quoted-reply-box { flex-direction: column; }

.quoted-reply-box .sticker-img { margin-top: 6px; }

.sticker-reply-thumb { width: 60px; max-width: 35vw; border-radius: 8px; display: block; margin: 4px 0; }

/* HEADER do painel do emoji */
.sticker-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; border-bottom: 1px solid #eaeaea; order: 1; min-height: 40px; flex-shrink: 0; }

.sticker-categories { order: 2; display: none; gap: 6px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scroll-behavior: smooth; padding-bottom: 6px; flex-shrink: 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* Trava a rolagem horizontal apenas dentro da lista */ touch-action: pan-x; }
.sticker-categories::-webkit-scrollbar { height: 6px; }

.sticker-categories.active { display: flex; }

#expressionContent { order: 3; }

/* Cabeçalho do painel troca de salas E O  BOTAO X  */
.rooms-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

.rooms-modal-title { margin: 0; font-size: 19px; font-weight: 700; color: #1e1b4b; }

#closeRoomsModal.rooms-modal-close-btn, .rooms-modal-close-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; border: none; background: rgba(71, 70, 70, 0.075); /* <--- Defina a cor de fundo desejada aqui */ color: #666; font-size: 18px; line-height: 1; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease,color 0.15s ease,transform 0.1s ease; }

#closeRoomsModal.rooms-modal-close-btn:hover, .rooms-modal-close-btn:hover { background-color: rgba(0, 0, 0, 0.12); color: #111; }

#closeRoomsModal.rooms-modal-close-btn:active, .rooms-modal-close-btn:active { transform: scale(0.92); }

/*BOTAO X dentro do painel do emoji*/
#stickerClose, .attachment-close-btn { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: none; background: rgba(71, 70, 70, 0.075); color: #555; font-size: 22px; font-weight: 500; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; z-index: 20; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease,color 0.15s ease,transform 0.1s ease; }

#stickerClose:hover, .attachment-close-btn:hover { background-color: rgba(0, 0, 0, 0.08); color: #111; }

#stickerClose:active, .attachment-close-btn:active { transform: scale(0.92); background-color: rgba(0, 0, 0, 0.12); }

/*BOTAO X dentro do painel do emoji MOBILE*/
@media (max-width: 768px) {
  #stickerClose, .attachment-close-btn { top: 6px; right: 8px; width: 38px; height: 38px; font-size: 25px; }
}

.sticker-cat { border: none; padding: 4px 10px; border-radius: 20px; font-size: 12px; background: #0b08c927; cursor: pointer; flex-shrink: 0; min-height: 30px; }

.sticker-cat.active { background: #1d0dfd5d; color: #fff; }

/* ================== AJUSTES MOBILE DOS PAINÉIS DA PARTE 2 ================== */
@media (max-width: 768px) {
  #stickerPanel { right: 10px; left: 10px; width: auto; height: min(52vh, 420px); max-height: 420px; min-height: 260px; }
  #stickerList img { width: 56px; height: 56px; }
  .message-input { font-size: 16px; max-height: 88px; }
  .message { max-width: 100%; }
}

@media (max-width: 480px) {
  #stickerPanel { right: 8px; left: 8px; height: min(50vh, 390px); min-height: 240px; border-radius: 14px; }
  #stickerList { gap: 7px; }
  #stickerList img { width: 52px; height: 52px; }
  .message-input { font-size: 16px; line-height: 19px; padding: 9px 12px; max-height: 82px; }
  .user-photo { width: 40px; height: 40px; }
  /*  .sticker-img {
    width: 56px;
    height: 56px;
  }*/
}

/*====================== EMOJIS ================================================== */
#emojiList { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; font-size: 22px; text-align: center; overflow: auto; min-height: 0; -webkit-overflow-scrolling: touch; }

.emoji-item { cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 8px; -webkit-tap-highlight-color: transparent; }

/* MOBILE */
@media (max-width: 768px) {
  #stickerPanel { left: 10px; right: 10px; width: auto; max-width: 360px; margin: 0 auto; height: 42vh; max-height: 360px; min-height: 220px; border-radius: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
  #message-input-area { padding: 10px 8px; gap: 6px; }
  #attachBtn,   #emojiBtn, #sendBtn { font-size: 1.45rem; }
}
@media (max-width: 480px) {
  #stickerPanel { height: 38vh; max-height: 380px; min-height: 280px; }
  #expressionContent { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: 6px; }
  #stickerList { padding-bottom: 24px; /* Garante que a última fileira de figurinhas apareça 100% */ }
  #stickerList img { width: 54px; height: 54px; }
  #emojiList { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; font-size: 20px; padding-bottom: 2px; /* Espaço para a última linha de emojis rolar livremente sem corte */ overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .emoji-item { padding: 6px; font-size: 24px; justify-content: center; }
}

.expr-list { display: none; padding: 8px; max-height: 260px; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }

.expr-tab { background: transparent; border: none; font-size: 14px; padding: 6px 10px; cursor: pointer; opacity: 0.6; min-height: 34px; border-radius: 8px; -webkit-tap-highlight-color: transparent; }

.expr-tab.active { opacity: 1; font-weight: bold; }

/* EMOJI PICKER (LIB) */
emoji-picker { animation: fadeInUp 0.25s ease forwards; border-radius: 10px!important; box-shadow: 0 4px 14px rgba(2, 1, 1, 0.2)!important; overflow: hidden!important; border: 1px solid #ddd!important; z-index: 2100!important; background-color: #0080ff; max-width: calc(100vw - 20px); }

#emojiList::-webkit-scrollbar { width: 4px; }

#emojiList::-webkit-scrollbar-track { background: transparent; }

#emojiList::-webkit-scrollbar-thumb { background: #6b44c757; border-radius: 10px; }

#emojiList::-webkit-scrollbar-thumb:hover { background: #6b44c757; }

/* ANIMACAO */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 768px) {
  /* Oculta a aba de emojis comuns no mobile */
  .expr-tab[data-mode="emoji"] { display: none!important; }
}

/* ================ ============================== PRÉVIA DE VÍDEOS YOUTUBE ===================================== */
.youtube-preview { position: relative; display: inline-block; cursor: pointer; max-width: 100%; }

.youtube-preview .youtube-thumb { width: min(40%, 320px); min-width: 180px; max-width: 100%; border-radius: 12px; display: block; }

.youtube-preview .youtube-play { position: absolute; top: 50%; left: 20%; transform: translate(-50%, -50%); background: rgba(189, 5, 5, 0.849); color: #fff; font-size: 36px; width: 44px; height: 30px; line-height: 27px; border-radius: 34%; text-align: center; pointer-events: none; }

.youtube-reply-thumb { position: relative; display: inline-block; cursor: pointer; overflow: hidden; max-width: 100%; }

.youtube-reply-thumb .youtube-thumb { display: block; width: 120px; max-width: 100%; border-radius: 6px; }

/*EDITA AS CORES DOS AVISO EXIBIDO NO CHAT show toast */
.custom-toast { position: fixed; bottom: calc(70px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) scale(0.9); padding: 12px 20px; background: #4f5bfc94; color: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); display: flex; align-items: center; gap: 8px; opacity: 0; transition: all 0.5s ease; z-index: 9999; font-size: 17px; max-width: calc(100vw - 24px); text-align: center; }

.custom-toast.show { opacity: 1; transform: translateX(-50%) scale(1); }

.custom-toast.success { background: #34c759; }

.custom-toast.warning { background: #fc0; }

/* ========================= MODAL LOGIN — BASE ==================================================================== */
.modal-reset { all: unset; display: flex; width: 100%; max-width: 1050px; height: 620px; justify-content: center; align-items: center; box-sizing: border-box; }

.modal-reset * { box-sizing: border-box; }

.login-modal { position: fixed; inset: 0; background: #00000080; display: flex; justify-content: center; align-items: center; z-index: 9999; padding: 12px; }

.hidden { display: none!important; }

/* ================= 30-05-26 modal DO LOGIN no index inicial  (TRAVA DE LOGIN) ================= */
.bloqueado { opacity: 0.4!important; pointer-events: none!important; filter: grayscale(100%); transition: all 0.3s ease; }

/*-------modal de login inicial inicio ----------------*/
.modal-login-box { width: 100%; max-width: 980px; height: 580px; background: #fff; border-radius: 18px; display: flex; overflow: hidden; position: relative; }

.back-login, .close-login { position: absolute; background: none; border: none; cursor: pointer; z-index: 5; -webkit-tap-highlight-color: transparent; }

.close-login { right: 12px; font-size: 32px; }

.back-login { right: 92px; font-size: 19px; color: #333; margin-top: 10px; }

#closeAvatarModal { position: absolute; background: none; border: none; cursor: pointer; right: 12px; font-size: 32px; z-index: 5; }

.back-login:hover { color: #ff6b6b; }

.close-login:hover { color: #ff6b6b; }

/* =============================== LAYOUT ========================================================================== */
.login-left { width: 50%; height: 100%; display: flex; min-width: 0; }

.login-left img { width: 100%; height: 100%; object-fit: cover; }

.login-right { width: 50%; padding: 0 60px; display: flex; flex-direction: column; justify-content: center; gap: 14px; font-family: Arial,sans-serif; min-width: 0; }

.login-right h1 { font-size: 38px; margin-bottom: 6px; }

.login-right p { margin: 0; font-size: 18px; color: #444; }

/* ================================ BOTÕES ========================================================================== */
.social { width: 95%; padding: 9px; border: 1px solid #ddd; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 16px; cursor: pointer; min-height: 42px; -webkit-tap-highlight-color: transparent; }

.social img { width: 24px; height: 24px; object-fit: contain; }

.social.google { background: #f5f5f5; font-weight: 500; }

.login-right button[style*="background:#ff6b6b"] { border: none; padding: 11px; font-size: 15px; font-weight: 600; border-radius: 9px; min-height: 42px; }

.social1 { width: 59%; justify-content: center; }

/* ================================== INPUTS (UNDERLINE) ========================================================== */
.login-right input { width: 100%; padding: 10px 2px; border: none; border-bottom: 1.5px solid #dcdcdc; background: transparent; font-size: 15px; outline: none; min-height: 40px; }

.login-right input::placeholder { color: #777; font-size: 14px; }

.login-right input:focus { border-bottom-color: #ff6b6b; }

.login-right input+input { margin-top: 14px; }

#registerView input:last-of-type { margin-bottom: 24px; }

.login-right input:-webkit-autofill { box-shadow: 0 0 0 1000px #fff inset!important; -webkit-text-fill-color: #000!important; }

/* ===============================INPUT COM ÍCONE ========================================================================= */
.input-icon { position: relative; width: 100%; }

.input-icon .icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; opacity: 0.55; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; }

.icon.user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.75 7.5a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a7.5 7.5 0 0115 0'/%3E%3C/svg%3E"); }
.icon.email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21.75 6.75v10.5A2.25 2.25 0 0119.5 19.5h-15A2.25 2.25 0 012.25 17.25V6.75m19.5 0L12 13.5 2.25 6.75'/%3E%3C/svg%3E"); }
.icon.lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75M6 10.5h12v9H6v-9z'/%3E%3C/svg%3E"); }

/* =============================== AVATAR PICKER ====================================================== */
.avatar-picker { margin: 18px 0; padding: 12px 14px; border: 1.5px dashed #ccc; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.2s; width: 100%; }
.avatar-picker:hover { border-color: #ff6b6b; background: #fff7f7; }
.avatar-picker span { font-size: 14px; }
.avatar-preview { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-preview img { width: 58px; height: 58px; opacity: 0.7; object-fit: contain; }
/* ===============================TERMOS =========================================================== */
.terms { margin-top: 12px; font-size: 12px; color: #555; text-align: center; }
.terms a { color: #1a73e8; }
/* =============================== MOBILE LOGIN MODAL ======================================================== */
@media (max-width: 768px) {
  .modal-reset { height: 92vh; align-items: flex-start; padding: 12px 0; }
  .modal-login-box { flex-direction: column; width: 94%; height: auto; max-height: 94vh; border-radius: 16px; }
  .login-left { width: 100%; height: 180px; min-height: 160px; flex-shrink: 0; }
  .login-left img { object-fit: cover; }
  .login-right { width: 100%; max-height: calc(94vh - 180px); overflow-y: auto; padding: 22px 22px 26px; align-items: center; text-align: center; -webkit-overflow-scrolling: touch; }
  .login-right h1 { font-size: 26px; }
  .login-right p { font-size: 15px; }
  .login-right input { font-size: 14px; }
  .avatar-picker { margin: 14px 0; }
  .back-login { top: 3px; left: 14px; right: auto; color: rgb(255, 255, 255); margin-top: 0; }
  .close-login { top: 2px; right: 15px; color: rgb(255, 255, 255); }
  #closeAvatarModal { color: rgb(0, 0, 0); margin-top: 19px; }
  .social, .social1 { width: 100%; }
}

/*EDITA as mensagem de informação no input*/
.input-hint { display: block; margin-top: -13px; margin-bottom: 8px; padding-left: 28px; font-size: 11px; color: #1a191971; line-height: 1.1; }

/* ===========================================================================
NES Anexos estilo WhatsApp zap EDITA O BOTAO SHEET TAMBEM 27-02-26 
======================================================================================*/
.attachment-wrapper { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.btn-attach { background: none; border: none; color: #555; font-size: 1.4rem; display: inline-flex; align-items: center; justify-content: center; padding: 6px; min-width: 44px; min-height: 44px; border-radius: 50%; touch-action: manipulation; transition: color 0.2s ease,transform 0.15s ease; }
.btn-attach:hover { color: #0d6efd; transform: translateY(-1px); }
.btn-attach:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; color: #0dfd35; }

#attachmentPanel { position: absolute; left: 0; bottom: calc(72px + env(safe-area-inset-bottom)); width: 390px; max-width: calc(100vw - 20px); max-height: 65vh; background: #fff; border: 1px solid #edf0f5; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); border-radius: 18px; padding: 14px 12px 12px 12px; overflow-y: auto; overscroll-behavior: contain; z-index: 1200; -webkit-overflow-scrolling: touch; }

#attachmentPanel.show { display: block; animation: attachmentIn 0.18s ease; }

@keyframes attachmentIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Botão X perfeitamente isolado e posicionado no canto */
#attachmentPanel #closeAttachmentPanel { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; margin: 0; border: none; background: rgba(73, 72, 72, 0.082); color: #666; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; z-index: 20; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease,color 0.15s ease; }

#attachmentPanel #closeAttachmentPanel:hover { background-color: rgba(0, 0, 0, 0.08); color: #111; }

#attachmentPanel #closeAttachmentPanel:active { transform: scale(0.92); }

/* Grade de 4 colunas restaurada */
#attachmentPanel .attachment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; padding-top: 26px; /* Abre espaço confortável abaixo do X */ box-sizing: border-box; }

/* Reseta qualquer largura quebrada nos botões de itens */
#attachmentPanel .attachment-item { width: 100%; min-width: 0; box-sizing: border-box; }

/* BOTAO X fixo no topo direito DENTRO DO PAINEL CLIPE */
.attachment-close-btn { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: none; background: rgba(71, 70, 70, 0.075); color: #666; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; z-index: 10; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease,color 0.15s ease; }

.attachment-close-btn:hover { background-color: rgba(0, 0, 0, 0.08); color: #111; }

.attachment-close-btn:active { transform: scale(0.92); }

.attachment-grid { display: grid; grid-template-columns: repeat(4, minmax(82px, 1fr)); gap: 12px; padding-top: 26px; /* Espaço para não cobrir o X */ }

.attachment-label { font-size: 0.82rem; font-weight: 700; color: #2f3542; text-align: center; max-width: 100%; line-height: 1.15; white-space: normal; word-break: normal; overflow-wrap: normal; }

.attachment-item { border: 1px solid rgba(2, 49, 238, 0.18); background: linear-gradient(180deg, #fff, #f8faff); border-radius: 18px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #2f2f2f; font-size: 0.9rem; cursor: pointer; min-width: 0; min-height: 92px; box-shadow: 0 6px 16px rgba(20, 30, 80, 0.06); transition: transform 0.16s ease,box-shadow 0.2s ease,border-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.attachment-item:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20, 30, 80, 0.12); border-color: rgba(87, 66, 211, 0.35); }
.attachment-icon { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.65rem; flex-shrink: 0; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); }
.attachment-item img { width: 24px; height: 24px; object-fit: contain; }
.icon-gallery { background: linear-gradient(135deg, #4e9efc, #5be0ff); }
.icon-camera { background: linear-gradient(135deg, #ff5f6d, #ff9a44); }
.icon-location { background: linear-gradient(135deg, #2ecc71, #1abc9c); }
.icon-contact { background: linear-gradient(135deg, #7b68ee, #9b59b6); }
.icon-document { background: linear-gradient(135deg, #6c7efc, #8fcbff); }
.icon-audio { background: linear-gradient(135deg, #ff9f1c, #ff6f61); }
.icon-poll { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.icon-event { background: linear-gradient(135deg, #ff6cab, #7366ff); }
.icon-sticker { background: linear-gradient(135deg, #ffc371, #ff5f6d); }
.icon-color { background: linear-gradient(135deg, #f953c6, #b91d73); }
.icon-ai { background: linear-gradient(135deg, #1e3c72, #2a5298); }

/*=============== edita o Botao de feedback sujestao de melhoria ====================*/
/* =============================== MODAL DE FEEDBACK — ESTÉTICA ================================ */
.feedback-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn 0.2s ease; padding: 14px; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.feedback-box { background: #fff; width: 92%; max-width: 400px; border-radius: 16px; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); animation: scaleIn 0.2s ease; }

@keyframes scaleIn {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.feedback-box h4 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: #1f2937; }

.feedback-box textarea { width: 100%; min-height: 110px; padding: 12px 14px; border-radius: 12px; border: 1px solid #d1d5db; font-size: 14px; resize: none; outline: none; transition: border 0.2s,box-shadow 0.2s; }

.feedback-box textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }

/* ===============================BOTAO do feedback================================ */
.feedback-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.feedback-actions button:first-child { background: transparent; border: 1px solid #d1d5db; color: #374151; padding: 8px 14px; border-radius: 10px; font-size: 13px; cursor: pointer; min-height: 36px; }

.feedback-actions button:first-child:hover { background: #f3f4f6; }

.feedback-actions button:last-child { background: linear-gradient(135deg, #2563eb, #1d4ed8); border: none; color: #fff; padding: 8px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35); transition: transform 0.15s ease,box-shadow 0.15s ease; min-height: 36px; }

.feedback-actions button:last-child:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(37, 99, 235, 0.45); }

.feedback-actions button:last-child:active { transform: scale(0.97); }

/* =============================== UTIL ================================ */
.hidden { display: none; }

/* =============================== EDITA O BOTAO DE MOSTRA MENSAGEM NOVA ===============================*/
.whatsapp-scroll-btn { position: absolute; right: 15px; bottom: calc(80px + env(safe-area-inset-bottom)); border-radius: 50%; border: none; background: #0000fa00; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; z-index: 10; width: 98px; height: 98px; -webkit-tap-highlight-color: transparent; }

/*modo dektop */
@media (min-width: 768px) {
  .whatsapp-scroll-btn { right: clamp(16px, 28vw, 485px); }
}

.scroll-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 0; background: #e2e2f3; border-radius: 50%; width: 40px; height: 40px; }

.scroll-icon svg { width: 23px; height: 23px; color: rgb(109, 68, 204); }

.arrow1 { margin-bottom: -16px; opacity: 0.7; }

.arrow2 { opacity: 1; }

.msg-badge { position: absolute; top: 21px; right: 21px; background: #03cf03; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 12px; min-width: 20px; text-align: center; display: none; }

@media (max-width: 480px) {
  .youtube-preview .youtube-thumb { width: 40%; min-width: 0; }
  .custom-toast { font-size: 14px; padding: 10px 14px; }
  .whatsapp-scroll-btn { right: 4px; width: 76px; height: 76px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .msg-badge { top: 12px; right: 12px; }
  .youtube-preview .youtube-play { left: 20%; top: 20%; top: 62px; }
}

/* ============================================== 26-02-2026=======
BOTTOM SHEET – MOBILE (BASE) NÃO ALTERA LAYOUT EXISTENTE
===================================================== */

.bottom-sheet { left: 0; right: 0; bottom: 0; height: 30vh; max-height: 60vh; background: #fff; border-top: solid #00000049 1px; transition: transform 0.3s ease; z-index: 9999; display: flex; flex-direction: column; transform: translateY(100%); will-change: transform; }

.bottom-sheet.open { transform: translateY(0); }

.bottom-sheet.hidden { display: none; }

.bottom-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 1px 16px; border-bottom: 1px solid #fff; font-weight: 600; font-size: 14px; flex-shrink: 0; }

.bottom-sheet-title { color: #333; padding: 0 16px; font-weight: 600; border-bottom: 1px solid #e0e0e0; }

.bottom-sheet-close { cursor: pointer; font-size: 22px; line-height: 1; padding: 4px; min-width: 36px; min-height: 36px; display: grid; place-items: center; }

.bottom-sheet-content { flex: 1; overflow-y: auto; padding: 7px; min-height: 0; -webkit-overflow-scrolling: touch; }

@media (min-width: 769px) {
  .bottom-sheet { display: none!important; }
}

/* ======BOTTOM SHEET – SELETOR INTERNO (MOBILE)*/
.bottom-sheet-selector { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; }

.bottom-sheet-selector button { flex: 1; padding: 6px 10px; border-radius: 999px; border: 1px solid #ddd; background: #f7f7f7; font-size: 11px; cursor: pointer; min-height: 32px; }

.bottom-sheet-selector button.active { background: #1e88e5; color: #fff; border-color: #1e88e5; }

/* BOTTOM SHEET – GRID REAL PARA STICKERS / ANIMAÇÕES */
.bottom-sheet-content .bottom-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; align-items: center; }

.bottom-sheet-content .bottom-sheet-grid .sticker-img:not(.animation-img) { max-width: 60px; border-radius: 7px; }

.bottom-sheet-content .bottom-sheet-grid .sticker-img.animation-img { max-width: 38px; border-radius: 6px; }

@media (max-width: 360px) {
  .bottom-sheet-content .bottom-sheet-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* BOTTOM SHEET – CATEGORIAS (MOBILE) */
.bottom-sheet-categories { display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; -webkit-overflow-scrolling: touch; }

.bottom-sheet-categories::-webkit-scrollbar { display: none; }

.bottom-sheet-categories button { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; border: none; background: #eee; font-size: 12px; cursor: pointer; white-space: nowrap; min-height: 32px; }

.bottom-sheet-categories button.active { background: #1e88e5; color: #fff; }

/* BOTTOM SHEET — ANEXOS (BASE) BOTAO ZAP  *
.bottom-sheet-attachments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px;
}

.color-panel {
max-height: 60vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
will-change: transform;
}

/*EDIAR OS BOTAO sheet ZAP a altura no modo mobile*/
@media (max-width: 420px) {
  .bottom-sheet { height: 36vh; max-height: 68vh; }
  .bottom-sheet-attachments { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px; }
  .online-users-panel { width: 88%; }
  .profile-editor-avatar-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .profile-editor-avatar-grid img { width: 56px; height: 56px; }
}

/*-------------- modo tablet botao sheet -----------*/
@media (min-width: 521px) and (max-width: 1024px) {
  #attachmentPanel { left: 0; right: auto; min-width: 430px; width: min(520px, calc(100vw - 32px)); max-width: 520px; max-height: 62vh; padding: 14px; border-radius: 20px; }
  .attachment-grid { display: grid; grid-template-columns: repeat(6, minmax(82px, 1fr)); gap: 14px; }
  .attachment-item { min-height: 98px; padding: 13px 8px; border-radius: 18px; }
  .attachment-icon { width: 46px; height: 46px; font-size: 1.75rem; border-radius: 15px; }
  .attachment-label { font-size: 0.86rem; line-height: 1.18; }
}

/* =========================EMOJIS – GRID VERTICAL(somente emoji) ========================= */
#bottomSheet .bottom-sheet-body:not(.bottom-sheet-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; overflow-y: auto; overflow-x: hidden; padding: 10px; min-height: 0; }

#bottomSheet .emoji-item { display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; cursor: pointer; }

.bottom-sheet-backdrop { position: fixed; inset: 0; background: transparent; z-index: 9998; }

:root { --input-area-height: 72px; }

/* ============================= MENSAGEM DO ADIMINISTRADOR ADM 15-03 =============================*/
.admin-message { background: rgba(107, 59, 218, 0.08); border-left: 4px solid rgb(109, 68, 204); padding: 6px 8px; border-radius: 6px; }

/* ================================= PAINEL LATERAL dentro do Botao usuari on line 15-03 ================================== */
.online-users-panel { width: 380px; min-width: 80px; max-width: 260px; background: #fff; display: flex; flex-direction: column; border-left: solid 1px #6d39fc4d; overflow: hidden; position: static; right: auto; top: auto; bottom: auto; height: 100%; box-shadow: none; transform: none; min-height: 0; }

.online-users-panel .online-users-list { flex: 1; overflow-y: auto; min-height: 0; }

.online-users-panel.hidden { display: none; }

.online-users-panel.open { right: 0; }

.online-overlay { display: none; }
/*edita a parte que ofusca no painel lateral*/
@media (max-width: 750px) {
  .online-overlay.open { display: block; opacity: 1; pointer-events: auto; background: rgba(0, 0, 0, 0.178); backdrop-filter: blur(2px); top: 56px; height: calc(100vh - 56px); }
}

/* HEADER */
.online-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 600; border-bottom: 1px solid #ececec; background: #0889f111; flex-shrink: 0; }

#closeOnlinePanel { background: none; border: none; font-size: 18px; cursor: pointer; min-width: 36px; min-height: 36px; }

.online-users-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; -webkit-overflow-scrolling: touch; }

.online-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; transition: background 0.2s; cursor: pointer; min-width: 0; }

.online-user:hover { background: #001aff1f; }

.online-user img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.online-user span { font-size: 16px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* modo mobile */
@media (max-width: 768px) {
  body, html { overflow-x: hidden; }
  #chat-layout { position: relative; overflow-x: hidden; }
  .online-users-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(83%, 280px); z-index: 1500; transform: translateX(100%); transition: transform 0.35s ease; will-change: transform; }
  .online-users-panel.open { transform: translateX(0); }
  .online-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 1400; }
  .online-overlay.open { opacity: 1; pointer-events: auto; }
}

@media (min-width: 769px) {
  .online-overlay { display: none!important; }
  .online-users-panel { position: static; right: auto; top: auto; height: auto; transform: none; transition: none; }
}

/* =============================== AVATAR COM STATUS ONLINE bolinha verde 17-03-26 ============================================== */
.avatar-wrapper { position: relative; width: 40px; height: 40px; flex-shrink: 0; }

.avatar-wrapper img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.status-dot { position: absolute; top: 0; right: 0; width: 11px; height: 11px; background: #22c55e; border: 2px solid #fff; border-radius: 50%; z-index: 30; }

/* bolinha verde no avatar grande do perfil */
.profile-avatar .status-dot { top: 16px; right: 16px; width: 15px; height: 15px; border-width: 3px; transform: translate(45%, -45%); }

/* ================= SHEET LATERAL (PERFIL) ================= */
.bottom-sheet.open-side { position: fixed; top: 0; right: 0; left: auto; bottom: 0; width: 300px; height: 100%; transform: translateX(100%); transition: transform 0.3s ease; }

.bottom-sheet.open-side.open { transform: translateX(0); }

/* ===================== PROFILE PAINEL PERFIL NO CHAT===================== */
.profile-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 92dvh; /*edita a altura do painel no chat modo mobile*/ background: #fff; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(100%); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),opacity 0.28s ease; border: 1px solid rgba(0, 0, 0, 0.363); z-index: 9999; will-change: transform,opacity; }

/*  PERFIL PAINEL USUARIO DESKTOP CHAT  13-05-2026  */

@media (min-width: 992px) {
  body.chat-page .profile-panel { top: 72px; right: 18px; left: auto; bottom: auto; width: 490px; height: calc(100vh - 92px); max-height: 720px; /*edita a altura do painel */ border-radius: 22px; transform: scale(0.96); transform-origin: top right; opacity: 0; pointer-events: none; transition: opacity 0.22s ease,transform 0.22s ease; }
  body.chat-page .profile-panel.open { opacity: 1; pointer-events: auto; transform: scale(1); }
}

/* PROFILE PAINEL USUARIO TABLET CHAT  */

@media (min-width: 769px) and (max-width: 991px) {
  body.chat-page .profile-panel { top: 68px; right: 14px; left: auto; bottom: auto; width: min(400px, calc(100vw - 28px)); height: calc(100vh - 86px); max-height: 630PX; border-radius: 22px; transform: scale(0.97); transform-origin: top right; opacity: 0; pointer-events: none; transition: opacity 0.22s ease,transform 0.22s ease; }
  body.chat-page .profile-panel.open { opacity: 1; pointer-events: auto; transform: scale(1); }
}

/* ================== PERFIL do usuario NO desktop INDEX (MODAL NORMAL) 10-05-2026  =================== */
body.index-page .profile-panel { top: 76px; right: clamp(14px, 3vw, 40px); left: auto; bottom: auto; width: min(420px, calc(100vw - 24px)); max-height: min(88dvh, 720px); height: auto; border-radius: 22px; opacity: 0; pointer-events: none; transform-origin: top right; transform: scale(0.96); transition: opacity 0.22s ease,transform 0.22s ease; }

body.index-page .profile-panel.open { opacity: 1; pointer-events: auto; transform: scale(1); }

/**/
.profile-panel.open { opacity: 1; transform: translateY(0); }

.profile-panel.hidden { opacity: 0; pointer-events: none; }

.profile-header { position: absolute; top: 0; left: 0; right: 0; height: 58px; min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 14px 0 18px; background: transparent; border-bottom: none; z-index: 5; }

.profile-body { flex: 1; min-height: 0; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; }

.profile-cover { position: relative; flex-shrink: 0; }

/*botao x e lapis */
.profile-cover-actions { position: absolute; top: 14px; right: 14px; z-index: 10; display: flex; align-items: center; gap: 10px; }

/*botao lapis e o X   23-07-26*/
#closeProfilePanel, #editProfileCoverBtn { width: 38px; height: 38px; border: none; background: rgba(0, 0, 0, 0.26); border-radius: 50%; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background 0.2s ease,transform 0.2s ease,opacity 0.2s ease; }

#closeProfilePanel:hover, #editProfileCoverBtn:hover { background: rgba(255, 255, 255, 0.16); }

#closeProfilePanel:active, #editProfileCoverBtn:active { transform: scale(0.96); }

#editProfileCoverBtn i { font-size: 18px; }

.profile-title { font-size: 15px; font-weight: 700; color: #fff; }

.profile-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: transparent; display: flex; flex-direction: column; padding-top: 0; -webkit-overflow-scrolling: touch; }

/*cor de fundo E ALTURA E LARGURA  do baner tambem tem no main*/
.profile-cover { position: relative; width: 100%; min-height: 200px; background: #00000063; flex-shrink: 0; }

.profile-avatar-wrap { position: relative; display: flex; justify-content: center; margin-top: -58px; z-index: 2; padding: 0 16px; }
/*edita a foto do usuario no painel*/
.profile-avatar { width: 116px; height: 116px; border-radius: 50%; border: 5px solid #fff; /* BORDA BRANCA TRADICIONAL NATIVA */ flex-shrink: 0; position: relative; z-index: 1; }
/* Força a imagem interna a ser cortada em círculo sem estourar o fundo */
#profileAvatar, .profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

#profileAvatar, .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*edita o nome do usuario no perfil*/
.profile-user-info { padding: 23px 18px 18px; text-align: center; }

#profileName, .profile-user-info h3 { margin: 0; font-size: 22px; font-weight: 700; color: #111; line-height: 1.25; word-break: break-word; }

/*recado de baixo do nome do perfil*/
.profile-user-info { padding: 14px 18px -8px; text-align: center; min-width: 0; /* Isso aqui impede que containers flex do Bootstrap estiquem para os lados com textos compridos */ margin: 0 0 -6px; /* Pequeno espaçamento inferior para separar do conteúdo abaixo */ }

/*edita a parte da informação, editar perfil e vip*/
.profile-tab { flex: 1; min-height: 32px; border: none; border-radius: 99px; background: #fbfcfd; color: #565557ce; font-size: 17px; font-weight: 700; cursor: pointer; transition: background 0.2s ease,color 0.2s ease,transform 0.2s ease; }
/*edita os dados da informacao info do painel do usuario*/
/*edita os dados da informacao info do painel do usuario*/
.dados-info { padding: 2px; font-weight: 400; color: #00000096; }

/* Ajusta a cor e o peso do texto em negrito (Cidade, Idade, Instagram, etc) */
.dados-info strong { color: #555; /* Clareia a cor de preto/escuro para cinza médio */ font-weight: 500; /* Diminui a espessura do negrito para ficar mais suave */ }

.profile-tab:hover { background: #e9ebee; }
.profile-tab:active { transform: scale(0.98); }
.profile-tab.active { background: #adadaf; color: #fff; }

.profile-section { display: none; animation: profileFade 0.2s ease; }
.profile-section.active { display: block; }
.profile-section p { margin: 0 0 1px; padding: 10px 6px; background: #fff; border-radius: 16px; color: #222; font-size: 14px; line-height: 1.45; word-break: break-word; }

.profile-section p strong { color: #111; }

#profileEdit { display: none; }

#profileEdit.active { display: block; }

#profileEdit input { width: 100%; min-height: 48px; border: 1px solid #d8dde3; border-radius: 14px; padding: 0 14px; font-size: 14px; color: #111; background: #fff; outline: none; margin-bottom: 12px; transition: border-color 0.2s ease,box-shadow 0.2s ease; }

#profileEdit input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(255, 2, 2, 0.08); }

#saveProfileBtn { display: block; width: 120px; max-width: 100%; min-height: 48px; margin: 10px auto 0; border: none; border-radius: 14px; background: #28065e; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }

#saveProfileBtn:hover { opacity: 0.96; }

#saveProfileBtn:active { transform: scale(0.985); }

@keyframes profileFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

#profileOverlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease,visibility 0.2s ease; }

#profileOverlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

/*impede a atualização da pagina quando o painel sheet estiver aberto no modo mobile 13-05-26*/
body.profile-open, html:has(body.profile-open) { overflow: hidden; height: 100%; width: 100%; overscroll-behavior-y: none; overscroll-behavior-x: none; touch-action: pan-y; }

body:has(.profile-panel.open) { overflow: hidden; touch-action: none; }

#profileOverlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

/*  - PERFIL PAINEL do usuario NO INDEX RESPONSIVO  11-05 */
/* ================= PERFIL INDEX RESPONSIVO PROFISSIONAL ================= */

body.index-page .profile-panel { top: 76px; right: clamp(14px, 3vw, 40px); left: auto; bottom: auto; width: min(420px, calc(100vw - 24px)); max-height: min(88dvh, 720px); transform-origin: top right; transform: scale(0.96); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }

body.index-page .profile-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ================= PAINEL ÚNICO EDITAR PERFIL E AVATAR 25-04-26================= */
/* ================= PAINEL ÚNICO EDITAR PERFIL E AVATAR 25-04-26================= */
.profile-editor-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }

.profile-editor-modal.open { opacity: 1; pointer-events: auto; }

.profile-editor-modal.hidden { display: none; }

.profile-editor-card { width: min(580px, 95vw); height: 490px; max-height: 90vh; overflow: hidden; background: #fff; border-radius: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); padding: 18px; display: flex; flex-direction: column; min-height: 0; }

.profile-editor-header { display: flex; align-items: center; gap: 10px; justify-content: flex-start; margin-bottom: 12px; flex-shrink: 0; height: 40px; }

.profile-editor-tab { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border: 2px solid transparent; background: #f5f5f5; color: #222; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; box-sizing: border-box; vertical-align: middle; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; transition: background 0.15s ease,color 0.15s ease; }

.profile-editor-tab.active { background: #5742d3; border-color: #1b0a68; color: #fff; }

.profile-editor-banner-preview { height: 52px; border-radius: 14px; background: #000; position: relative; margin-bottom: 10px; flex-shrink: 0; }

.profile-editor-banner-colors { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px; -webkit-overflow-scrolling: touch; }

.profile-banner-editor-color-box { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; flex-shrink: 0; }

.profile-banner-editor-color-box.selected { border-color: #111; }

.profile-editor-avatar-area { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }

.profile-editor-avatar-grid { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; align-content: start; gap: 12px 10px; padding: 4px 6px 12px; -webkit-overflow-scrolling: touch; }

.profile-editor-avatar-grid img { width: 65px; height: 65px; object-fit: contain; cursor: pointer; border-radius: 12px; padding: 4px; border: 2px solid transparent; }

.profile-editor-avatar-grid img:hover { transform: scale(1.08); background: #00000050; }

.profile-editor-avatar-grid img.selected { border-color: #0d55a5; background: #eef5ff; }

#saveProfileEditorBtn { width: 30%; min-width: 110px; height: 42px; display: block; margin: 10px auto 0; border: 0; border-radius: 14px; background: #120366; color: #fff; font-weight: 700; padding: 0; cursor: pointer; flex-shrink: 0; }

/* BOTAO X DENTRO DO BOTAO LAPIS  */
#closeProfileEditorBtn { margin-left: auto; width: 32px; height: 32px; min-width: 32px; min-height: 32px; border: none; background-color: rgba(71, 70, 70, 0.08); color: #666; font-size: 18px; font-weight: 500; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease,color 0.15s ease,transform 0.1s ease; }

#closeProfileEditorBtn:hover { background-color: rgba(0, 0, 0, 0.12); color: #111; }

#closeProfileEditorBtn:active { transform: scale(0.92); }

@media (max-width: 768px) {
  .profile-editor-avatar-grid { grid-template-columns: repeat(4, 58px); gap: 10px 18px; height: 240px; }
  .profile-editor-avatar-grid img { width: 48px; height: 48px; }
}

@media (max-width: 600px) {
  .profile-editor-header { gap: 9px; }
  .profile-editor-tab { padding: 7px 12px; font-size: 13px; }
  #closeProfileEditorBtn { font-size: 24px; padding: 2px 6px; }
}

/* MOBILE - TAMANHO DO PAINEL PERFIL EDITAR CAPA/AVATAR dentrodo botao lapis */
@media (max-width: 768px) {
  .profile-editor-modal { padding: 10px; align-items: flex-end; padding-top: 10px; }
  .profile-editor-card { width: 100%; max-width: 100%; height: 400px; max-height: 85vh; padding: 14px 10px 10px; overflow: hidden; display: flex; flex-direction: column; border-radius: 18px 18px 0 0; }
  .profile-editor-header { flex-shrink: 0; background: #fff; z-index: 20; margin-bottom: 8px; }
  .profile-editor-banner-preview { height: 44px; flex-shrink: 0; margin-bottom: 8px; }
  .profile-editor-banner-colors { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; gap: 10px; -webkit-overflow-scrolling: touch; }
  .profile-banner-editor-color-box { width: 39px; height: 39px; }
  .profile-editor-avatar-area { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  .profile-editor-avatar-grid { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; align-content: start; gap: 10px 6px; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; }
  .profile-editor-avatar-grid img { width: 56px; height: 56px; }
  #saveProfileEditorBtn { width: 40%; min-width: 110px; height: 40px; flex-shrink: 0; margin: 8px auto 0; }
}

@media (max-width: 450px) {
  .profile-editor-avatar-grid { height: 390px; max-height: 390px; overflow-y: scroll; overflow-x: hidden; grid-template-columns: repeat(5, 1fr); gap: 10px 4px; }
}

/*==================================================================================*/
/* ===== UX APP - CAMPOS DO EDITAR PERFIL =====   29-04-2026 */

#profileEdit { padding: 0 6px 12px; }

#profileEdit .profile-field { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; margin-bottom: 4px; padding: 4px 4px; background: transparent; border: none; border-bottom: 1px solid rgba(40, 6, 94, 0.12); border-radius: 0; box-shadow: none; }

#profileEdit .profile-field:focus-within { border-bottom-color: #28065e; }

.profile-field-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(40, 6, 94, 0.06); color: #28065e; font-size: 22px; flex-shrink: 0; }

.profile-field-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; transform: translateY(-1px); }
/*edita os nomes dentro editar perfil*/
.profile-field-label { display: block; margin: 0 0 3px 0; padding: 0; font-size: 15px; line-height: 1; font-weight: 500; color: #28065e; }

/*-------  04-06-26 -------  */
/* Ajuste unificado e limpo para os campos de entrada de texto */
#profileEdit .profile-field input, #profileEdit .profile-field textarea { width: 100%; margin: 0; padding: 0; border: none!important; border-radius: 0!important; background: transparent!important; box-shadow: none!important; font-size: 15px; color: #111; outline: none; }

/* Customização cirúrgica para o textarea do recado se comportar perfeitamente */
#profileEdit .profile-field textarea { height: 44px; line-height: 20px; resize: none; /* Trava o redimensionamento manual */ white-space: pre-wrap; /* Permite quebras automáticas de palavras */ word-wrap: break-word; word-break: break-word; /* Força a descida de linha ao encostar na margem direita */ overflow-y: auto; /* Adiciona scroll sutil se o texto passar de 2 linhas */ font-family: 'Poppins',sans-serif; }

#profileEdit .profile-field textarea::-webkit-scrollbar { width: 0; /* Remove a barra de rolagem visual do campo */ }

#profileEdit .profile-field input:focus { border: none!important; box-shadow: none!important; }

#profileEdit .profile-field input::placeholder { color: #9aa0aa; }

/* ========================================================================= 
   BARRA DE ROLAGEM ULTRAFINA / TRANSLÚCIDA (EXPERIÊNCIA APP NATIVO)
   ========================================================================= */

/* 1. Suporte Firefox */
#profileVip, .profile-body, .profile-panel, .vip-content-panels { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }

/* 2. Suporte Chrome, Edge e Safari WebKit */
#profileVip::-webkit-scrollbar, .profile-body::-webkit-scrollbar, .profile-panel::-webkit-scrollbar, .vip-content-panels::-webkit-scrollbar { width: 4px; height: 4px; }

#profileVip::-webkit-scrollbar-track, .profile-body::-webkit-scrollbar-track, .profile-panel::-webkit-scrollbar-track, .vip-content-panels::-webkit-scrollbar-track { background: transparent; }

#profileVip::-webkit-scrollbar-thumb, .profile-body::-webkit-scrollbar-thumb, .profile-panel::-webkit-scrollbar-thumb, .vip-content-panels::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 999px; transition: background 0.2s ease; }

#profileVip::-webkit-scrollbar-thumb:hover, .profile-body::-webkit-scrollbar-thumb:hover, .profile-panel::-webkit-scrollbar-thumb:hover, .vip-content-panels::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

#saveProfileBtn { width: 150px; min-height: 48px; margin-top: 12px; }

/* ============================= 01-05-26 edita o cidade de baixo do nome do usuario ================ */
.message-user-info { display: flex; flex-direction: column; min-width: 0; }

.message .message-user-info .user-city { font-size: 14px; line-height: 1.2; color: #4e05fa91; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "arial"; background: #6200ff1a; border-radius: 45px; padding: 0 12px 0 6px; }

/* ============================= 01-05-26 edita a lista de cidade dentro do painel perfil  ================ */

.city-dropdown-profile { margin-top: 8px; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); max-height: 220px; overflow-y: auto; padding: 6px; z-index: 9999; }

.city-dropdown-profile.hidden { display: none; }

.city-dropdown-item { width: 100%; border: 0; background: transparent; padding: 7px 12px; text-align: left; border-radius: 10px; font-size: 14px; cursor: pointer; }

.city-dropdown-item:hover { background: #f3edff; color: #36006b; }

.city-dropdown-profile, .gender-dropdown-profile { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ============================= 01-05-26 edita a lista de genero dentro do painel perfil  ================ */
.gender-dropdown-profile { margin-top: 8px; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); max-height: 180px; overflow-y: auto; padding: 6px; z-index: 9999; }

.gender-dropdown-profile.hidden { display: none; }

.gender-dropdown-item { width: 100%; border: 0; background: transparent; padding: 10px 12px; text-align: left; border-radius: 10px; font-size: 14px; cursor: pointer; }

.gender-dropdown-item:hover { background: #f3edff; color: #36006b; }

/*bolinha verde dentro do painel perfil 03-05-2026*/

/* bolinha verde no avatar grande do perfil */
.profile-avatar-wrap { position: relative; }

.profile-online-dot { position: absolute; top: 8px; right: calc(50% - 52px); width: 20px; height: 20px; background: #22c55e; border: 3px solid #fff; border-radius: 50%; z-index: 80; pointer-events: none; }

.profile-online-dot.hidden { display: none; }

/*================================TOOLTIP DO INDEX 11-05-2026 =========================*/
.profile-edit-tooltip { position: fixed; z-index: 9999; width: 260px; background: #fff; color: #222; padding: 18px 20px; border-radius: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: 0.25s ease; }

.profile-edit-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

.profile-edit-tooltip::before { content: ""; position: absolute; top: -10px; right: 70px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; }

.profile-edit-tooltip strong { display: block; font-size: 1rem; margin-bottom: 6px; }

.profile-edit-tooltip p { margin: 0; font-size: .88rem; line-height: 1.35; }

.profile-tooltip-close { position: absolute; top: 8px; right: 10px; border: none; background: transparent; font-size: 22px; cursor: pointer; }

@media (max-width: 576px) {
  .profile-edit-tooltip { width: 280px; max-width: calc(100vw - 32px); left: auto!important; right: 14px; }
  .profile-edit-tooltip::before { left: auto; right: 34px; }
}

/*ATIVIDADE 16-05-26*/
/* =========================================================
   CONTEUDO DAS SALAS NO INDEX 
========================================================= */

.live-community-section { padding: 20px 0 10px; }

.live-card { background: linear-gradient(180deg, #fff, #f8fbff); border-radius: 28px; padding: 28px; border: 1px solid #e8eef6; box-shadow: 0 10px 30px rgba(15, 23, 42, .05),0 2px 8px rgba(15, 23, 42, .03); height: 100%; width: 100%; position: relative; overflow: hidden; }

.live-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }

.live-header h3 { font-size: 24px; font-weight: 700; margin: 0; color: #111827; }

.live-badge { background: #2563eb; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }

.live-room-list { display: flex; flex-direction: column; gap: 14px; }

/*largura dos card das salas */
.live-room-item { width: 72%; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #edf2f7; text-decoration: none; transition: transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease; }

.live-room-item:hover { transform: translateY(-4px); background: #001aff15; border-color: #dbe7ff; box-shadow: 0 12px 30px rgba(37, 99, 235, .10); }

.live-room-item strong { display: block; color: #111827; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 4px; }

.live-room-item p { margin: 0; color: #6b7280; font-size: 14px; line-height: 1.5; }

.live-room-item::before { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; background: linear-gradient(135deg,       rgba(37, 99, 235, .03),       transparent 40%); opacity: 0; transition: .2s ease; }

.live-room-item:hover::before { opacity: 1; }

.live-room-item span { color: #0a7a31; font-weight: 700; font-size: 14px; background: #ecfdf3; padding: 8px 14px; border-radius: 999px; white-space: nowrap; border: 1px solid #d4f5df; }

.online-stats { text-align: center; margin-bottom: 24px; }

.online-number { font-size: 58px; font-weight: 800; color: #2563eb; line-height: 1; }

.online-stats p { margin-top: 10px; color: #6b7280; }

.mini-online-list { display: flex; flex-direction: column; gap: 14px; }

.mini-user { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #374151; }

.dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }

@media(max-width:768px) {
  .live-header h3 { font-size: 20px; }
  .online-number { font-size: 42px; }
  .live-card { padding: 18px; border-radius: 20px; }
  .live-room-item { padding: 16px; gap: 12px; align-items: flex-start; width: 100%; }
  .live-room-item strong { font-size: 16px; line-height: 1.25; }
  .live-room-item p { font-size: 13px; line-height: 1.45; margin-top: 6px; }
  .live-room-item span { font-size: 14px; min-width: 58px; text-align: right; flex-shrink: 0; }
  .live-header { margin-bottom: 16px; }
  .live-room-list { gap: 10px; }
}

/* =========================================================
   TRENDING 16-05-26
========================================================= */

.trending-section { padding: 10px 0 40px; }

.trending-wrapper { background: #fff; border-radius: 24px; padding: 24px; border: 1px solid #edf0f5; box-shadow: 0 10px 30px rgba(0, 0, 0, .04); }

.trending-header { margin-bottom: 20px; }

.trending-header h3 { font-size: 24px; font-weight: 700; color: #111827; margin: 0; }

.trending-tags { display: flex; flex-wrap: wrap; gap: 14px; }

.trending-tag { text-decoration: none; background: #f3f6fb; color: #2563eb; padding: 14px 22px; border-radius: 999px; font-weight: 600; transition: .2s ease; border: 1px solid #e5edff; }

.trending-tag:hover { background: #2563eb; color: #fff; transform: translateY(-2px); }

@media(max-width:768px) {
  .trending-header h3 { font-size: 20px; }
  .trending-tag { width: 100%; text-align: center; }
}

/* =========================================
   AGRUPANDO AS MENSAGEM AGRUPAMENTO VISUAL DE MENSAGENS (UX)  09-06-26 
   ========================================= */

/* 1. Esconde o cabeçalho (foto, nome e cidade) nas mensagens agrupadas */
.message.is-grouped .message-click-area { display: none!important; }

/* 2. Zera todas as margens para as mensagens se fundirem e colarem umas nas outras */
.message.is-grouped { margin-top: 3px!important; margin-bottom: 0!important; padding-top: 0!important; padding-bottom: 0!important; }

/* 3. Zera os espaços internos invisíveis das divs do texto */
.message.is-grouped>div { margin-top: 0!important; margin-bottom: 0!important; }

/* 4. O GARGALO REAL: Essa regra oculta a hora das frases soltas no meio do agrupamento. 
      A data/hora só vai aparecer na ÚLTIMA mensagem do bloco (Padrão WhatsApp de UX). */
.message:has(+ .message.is-grouped) .message-time { display: none!important; }

/* 5. Mantém o respiro maior SOMENTE quando for uma mensagem nova de outro usuário */
.message:not(.is-grouped) { margin-top: 3px; }

/* ========================================================================= 10-06-26
   MELHORIA DE MODERAÇÃO E UX: BOTÃO DE DENUNCIA ISOLADO
   ========================================================================= */

/* Modifica cirurgicamente o comportamento do balão ativo para abrir espaço na base */
#replyPreview.reply-preview { padding-bottom: 38px; /* Aumentado de 21px para 28px para desgrudar o texto do botão */ }

/* Posiciona o botão de denuncia bandeira com margens confortáveis em cima e embaixo */
.reply-report-action { position: absolute; left: 14px; bottom: 8px; /* Ajustado para alinhar a base do ícone perfeitamente */ 
  color: #3b3a3a7e; font-size: 19px; 
  /* Aumentado levemente para o ícone ter uma boa área de clique */
   cursor: pointer; text-decoration: none; z-index: 60; line-height: 1; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease,opacity 0.15s ease; }

/* Feedback visual quando o usuário clica em "Denunciado" */
.reply-report-action.reported { color: #3b3a3a7e; cursor: not-allowed; font-size: 20px; }

/* ESTILO DA LINHA DE MENSAGEM OCULTADA */
.msg-hidden { color: #5756568f; font-style: italic; background: transparent; pointer-events: none; }
/* ESTILO DA CAIXA DE MENSAGEM EXCLUIDA - SUAVE E ESTÁVEL */
/* ESTILO DA CAIXA DE MENSAGEM EXCLUIDA - FIXO E SEM LAYOUT SHIFT */
.msg-deleted-box { display: flex; align-items: center; gap: 6px; color: #5756568f; font-style: italic; margin-top: 4px; padding: 4px 0; min-height: 24px; font-size: 0.92rem; font-weight: 400; }

/* ========================================================================= 
   01-07-26  BOTÃO DE DENUNCIA DENTRO DO PAINEL DO USUARIO ESQUERDO COM BANDEIRA (UX PREMIUM)
   ========================================================================= */

#reportUserBtn { position: absolute; top: 14px; left: 25px; width: 38px; height: 38px; border: none; background: rgba(0, 0, 0, 0);
   /* Mesmo fundo cinza transparente do lápis/X nao apagar */ border-radius: 50%; color: #fff; 
   /* Vermelho suave para alerta */ 
   font-size: 19px; display: grid; place-items: center; cursor: pointer; z-index: 10; -webkit-tap-highlight-color: transparent; }

#reportUserBtn:active { transform: scale(0.96); }

/* Oculta o botão automaticamente se o usuário abrir o próprio perfil para editar */
.profile-panel:has(#profileEdit.active) #reportUserBtn { display: none!important; }

/* ============================== 13-07-26 =========================================== 
   BOTÃO DE CAMERA UPLOAD DE FOTO DE PERFIL (CANTINHO DA FOTO)
   ========================================================================= */

.profile-avatar-wrap { position: relative; /* Garante que o posicionamento absoluto do botão seja em relação a todo o bloco do avatar */ }

.profile-photo-upload-btn { position: absolute;
/* Posiciona o botão ligeiramente mais para baixo e ajustado à curva do círculo */
bottom: -20px; 
/* Mudamos de 4px para -4px para ele descer mais */ 
left: calc(50% - 18px); 
/* Ajustado sutilmente para acompanhar a descida na curva do círculo */ 
width: 36px; height: 36px; background: #0808089a; border-radius: 50%; 
/* Borda branca grossa para dar o destaque de app profissional */ 
display: flex; align-items: center; justify-content: center; cursor: pointer; 
/* Garante que o botão fique na camada acima de qualquer corte de imagem */
z-index: 90; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),background-color 0.2s ease; -webkit-tap-highlight-color: transparent; }

.profile-photo-upload-btn i { font-size: 24px; color: #faf7ff; /* Mantém a identidade de cor dos seus botões */ }

.profile-photo-upload-btn:hover { transform: scale(1.1); background: #020202; }

.profile-photo-upload-btn:active { transform: scale(0.95); }

/* Oculta o botão automaticamente se você estiver visitando o perfil de outra pessoa */
body.viewing-other-profile .profile-photo-upload-btn { display: none!important; }

/* ========================================================================= 
   14-07-26  MODAL DE CORTE NATIVO DO ZERO (MÁSCARA CIRCULAR E SLIDER)
   ========================================================================= */
.crop-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; }

.crop-modal-content { background: #fffefe; padding: 24px; border-radius: 28px; width: 90%; max-width: 420px; position: relative; display: flex; flex-direction: column; align-items: center; }

.crop-close { position: absolute; top: 14px; right: 20px; font-size: 26px; font-weight: bold; color: #000; cursor: pointer; user-select: none; }

/* Container da Imagem com Overflow Oculto para simular o visor de corte */
.crop-container-box { position: relative; width: 280px; height: 280px; background: #5c5a5a3a; overflow: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; }

#cropPreviewImg { position: absolute; max-width: none; max-height: none; transform-origin: center center; cursor: move; user-select: none; touch-action: none; /* ESSA LINHA: Libera o arraste com os dedos no celular sem travar */ }

/* Máscara inteligente: cria o círculo transparente com fundo escurecido nas bordas */
.crop-mask-circle { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 10; border: 2px solid #fff; }

/* Área do Slider de Zoom */
.crop-zoom-wrapper { display: flex; align-items: center; justify-content: center; width: 85%; margin: 20px 0; gap: 12px; }

.zoom-btn { background: transparent; border: none; font-size: 16px; font-weight: bold; color: #333; cursor: pointer; padding: 0 6px; }

#cropZoomSlider { -webkit-appearance: none; /* Mantém para navegadores mais antigos e Safari */ appearance: none; /* Propriedade padrão que remove a linha amarela */ flex: 1; height: 6px; }

#cropZoomSlider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #8e8e93; cursor: pointer; }

/* Botões Inferiores */
.crop-buttons-container { display: flex; gap: 14px; width: 100%; justify-content: center; }

.btn-crop-select { background: #212121; color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }

.btn-crop-save { background: #26035e; color: #fff; border: none; padding: 10px 32px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }

/* ========================================================================= 
   16-07-26  MÓDULO DE ESTILOS VIP (RECURSOS EXCLUSIVOS E PREMIUM)
   ========================================================================= */

/* Abas de Perfil - Destaque VIP */
.profile-tabs .tab-vip-highlight { position: relative; font-weight: 700; color: #6f42c1; transition: all 0.25s ease; }

.profile-tabs .tab-vip-highlight:hover { color: #a020f0; }

.profile-tabs .profile-tab.tab-vip-highlight.active { background: linear-gradient(135deg, #6f42c1, #a020f0); color: #fff; box-shadow: 0 4px 12px rgba(111, 66, 193, 0.35); }

/* Card Principal VIP de Status */
#profileVip .vip-card-status { box-shadow: 0 4px 15px rgba(255, 193, 7, 0.15); animation: vipGlow 3s infinite alternate; }

@keyframes vipGlow {
  0% { box-shadow: 0 4px 15px rgba(255, 193, 7, 0.1); border-color: rgba(255, 193, 7, 0.2); }
  100% { box-shadow: 0 4px 22px rgba(255, 193, 7, 0.3); border-color: rgba(255, 193, 7, 0.5); }
}

.animate-pulse { animation: pulseIcon 1.8s infinite ease-in-out; }

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.18); opacity: 1; }
}

/* Lista de Benefícios VIP da interface de Atração */
#profileVip .vip-preview-benefits .bg-light { background-color: #f8fafc; border: 1px solid #e2e8f0; transition: transform 0.2s ease; }

#profileVip .vip-preview-benefits .bg-light:hover { transform: translateX(4px); background-color: #f1f5f9; }

/* Box de Preview Real da Mensagem */
/* Box de Preview Real da Mensagem - Fixado no topo para UX Mobile */
/* Box de Preview Real da Mensagem - Fixado e Isolado com Sucesso */
#profileVip .vip-preview-box { border: 1px dashed rgba(111, 66, 193, 0.3); background-color: #fdfbfe; /* Mantém a cor sólida para cobrir os elementos que sobem */ position: sticky; top: 0; z-index: 20; /* Camada superior para empurrar as cores para trás dele */ margin-bottom: 16px; border-radius: 12px; }

/* Força os elementos que sobem na rolagem a passarem por baixo do Preview */
#profileVip .vip-control-card { position: relative; z-index: 5; /* Camada inferior à do preview fixo */ }

/* CARDS INDIVIDUAIS DE CONFIGURAÇÃO VIP (UX MOBILE) */
/* ========================================================================= 
   ESTRUTURA BASE RESPONSIVA PARA O CARD VIP (#profileVip .vip-control-card)
   ========================================================================= */

#profileVip .vip-control-card { border: 1px solid rgba(111, 66, 193, 0.14); background-color: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03); padding: 16px; margin-bottom: 12px; width: 100%; box-sizing: border-box; transition: border-color 0.2s ease,box-shadow 0.2s ease; }

/* Ajuste nos títulos e labels dentro do card vermelho */
#profileVip .vip-control-card h6, #profileVip .vip-control-card label { color: #fff; /* Ajustado para branco para dar contraste com o fundo vermelho */ word-break: break-word; }

/* O seletor de cores e botões ocupam a largura completa sem ultrapassar as bordas */
#profileVip .vip-control-card .form-select-sm, #profileVip .vip-control-card .vip-custom-select-btn { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Ajuste no carrossel de cores para caber dentro do card em qualquer dispositivo */
#profileVip .vip-control-card .vip-carousel-wrapper { width: 100%; box-sizing: border-box; overflow: hidden; border-radius: 12px; padding: 6px 4px; }

/* 1. REGRA PARA TABLETS E NOTEBOOKS (Telas acima de 577px até 1024px) */
@media (min-width: 577px) and (max-width: 1024px) {
  #profileVip .vip-control-card { padding: 7px 85px 7px 85px; }
  #profileVip .vip-control-card .vip-carousel-wrapper .color-grid .color-box { flex: 0 0 32px; width: 32px; height: 32px; }
}

/* 2. REGRA PARA MOBILE (Telas até 576px - Celulares novos e antigos desde 2010) */
@media (max-width: 576px) {
  #profileVip .vip-control-card { padding: 7px 55px 7px 55px; /* Reduz espaçamento interno no celular */ border-radius: 12px; }
  /* Ajusta os botões e seletores dropdown para telas pequenas */
  #profileVip .vip-control-card .form-select-sm, #profileVip .vip-control-card .vip-custom-select-btn { min-height: 40px; font-size: 13px; padding: 0 10px; }
  /* Carrossel e blocos de cor no Mobile */
  #profileVip .vip-control-card .vip-carousel-wrapper { padding: 4px 0; }
  #profileVip .vip-control-card .vip-carousel-wrapper .color-grid { gap: 6px; }
  #profileVip .vip-control-card .vip-carousel-wrapper .color-grid .color-box { flex: 0 0 28px; /* Tamanho do quadrado de cor reduzido para celular */ width: 28px; height: 28px; }
  /* Setas do carrossel no Mobile */
  #profileVip .vip-control-card .vip-carousel-wrapper .carousel-arrow { width: 30px; height: 30px; }
  #profileVip .vip-control-card .vip-carousel-wrapper .carousel-arrow i { font-size: 20px; }
}
#profileVip .vip-control-card:focus-within { border-color: #6f42c1; box-shadow: 0 4px 14px rgba(111, 66, 193, 0.1); }

/* Customização Estética dos Dropdowns nativos do Bootstrap */
#profileVip .vip-control-card .form-select-sm { height: 42px; border-radius: 10px; border: 1px solid #cbd5e1; font-size: 13.5px; color: #0f172a; background-color: #f8fafc; padding-left: 10px; }

#profileVip .vip-control-card .form-select-sm:focus { border-color: #6f42c1; box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.15); }

/* Títulos internos h6 e labels */
#profileVip .vip-control-card h6 { font-size: 14px; color: #1e1b4b; margin-bottom: 12px; }

#profileVip .vip-control-card label { font-weight: 600; color: #475569; margin-bottom: 5px; }

/* Customização Limpa do Seletor de Cores Sólidas */
#profileVip .vip-control-card .form-control-color { width: 44px; height: 38px; border-radius: 10px; border: 1px solid #cbd5e1; background-color: #fff; padding: 3px; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); }

/* ========================================================================= 
   ISOLAMENTO DO ICONE DE DIAMANTE VIP (ESPECIFICIDADE LIMPA SEM !IMPORTANT)
   ========================================================================= */
#profileName[class*="nick-"] .bi-gem, #vipTopPreviewTag .bi-gem, .message-author-name[class*="nick-"] .bi-gem, .online-user span[class*="nick-"] .bi-gem, .quoted-header[class*="nick-"] .bi-gem { text-shadow: none; filter: none; color: #01b1f7; -webkit-text-fill-color: #01b1f7; display: inline-block; }

/* ========================================================================= 
   MÓDULO DE FONTES E DEGRADÊS - PERFIL, MENSAGEM E REPLY (SEM !IMPORTANT)
   ========================================================================= */

/* Regra reativa: a transparência e mascaramento de texto ativam para todos os elementos */
#profileName[class*="nick-anim-"], #profileName[class*="nick-gradient-"], #profileVip #vipPreviewName[class*="nick-anim-"], #profileVip #vipPreviewName[class*="nick-gradient-"], 
.message-author-name[class*="nick-anim-"], .message-author-name[class*="nick-gradient-"], .online-user span[class*="nick-anim-"], .online-user span[class*="nick-gradient-"], 
.quoted-header[class*="nick-anim-"], .quoted-header[class*="nick-gradient-"] { display: inline-block; background-color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.quoted-header[class*="nick-glow-"] { display: inline-block; }

/* ========================================================================= 
   TODOS OS 64 DEGRADÊS E ANIMAÇÕES (APLICADOS NO PERFIL, CHAT E REPLY)
   ========================================================================= */
/*1*/
#profileName.nick-gradient-cotton, #profileVip #vipPreviewName.nick-gradient-cotton, .message-author-name.nick-gradient-cotton, .quoted-header.nick-gradient-cotton { background-image: linear-gradient(135deg, #ff9a9e, #fecfef); }
/*2*/
#profileName.nick-gradient-blue-purple, #profileVip #vipPreviewName.nick-gradient-blue-purple, .message-author-name.nick-gradient-blue-purple, .quoted-header.nick-gradient-blue-purple { background-image: linear-gradient(135deg, #0d6efd, #a020f0); }
/*3*/
#profileName.nick-gradient-gold, #profileVip #vipPreviewName.nick-gradient-gold, .message-author-name.nick-gradient-gold, .quoted-header.nick-gradient-gold { background-image: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); font-weight: bold; }
/*4*/
#profileName.nick-gradient-sunset, #profileVip #vipPreviewName.nick-gradient-sunset, .message-author-name.nick-gradient-sunset, .quoted-header.nick-gradient-sunset { background-image: linear-gradient(135deg, #ff512f, #dd2476); }
/*5*/
#profileName.nick-gradient-ocean, #profileVip #vipPreviewName.nick-gradient-ocean, .message-author-name.nick-gradient-ocean, .quoted-header.nick-gradient-ocean { background-image: linear-gradient(135deg, #02aab0, #00cdac); }
/*6*/
#profileName.nick-gradient-forest, #profileVip #vipPreviewName.nick-gradient-forest, .message-author-name.nick-gradient-forest, .quoted-header.nick-gradient-forest { background-image: linear-gradient(135deg, #11998e, #38ef7d); }
/*7*/
#profileName.nick-gradient-ruby, #profileVip #vipPreviewName.nick-gradient-ruby, .message-author-name.nick-gradient-ruby, .quoted-header.nick-gradient-ruby { background-image: linear-gradient(135deg, #cb2d3e, #ef473a); }
/*8*/
#profileName.nick-gradient-cyberpunk, #profileVip #vipPreviewName.nick-gradient-cyberpunk, .message-author-name.nick-gradient-cyberpunk, .quoted-header.nick-gradient-cyberpunk { background-image: linear-gradient(135deg, #f12711, #f5af19); }
/*9*/
#profileName.nick-gradient-lavender, #profileVip #vipPreviewName.nick-gradient-lavender, .message-author-name.nick-gradient-lavender, .quoted-header.nick-gradient-lavender { background-image: linear-gradient(135deg, #a18cd1, #fbc2eb); }
/*10*/
#profileName.nick-gradient-fire, #profileVip #vipPreviewName.nick-gradient-fire, .message-author-name.nick-gradient-fire, .quoted-header.nick-gradient-fire { background-image: linear-gradient(135deg, red, #ff7300, #fc0); }
/*11*/
#profileName.nick-gradient-platinum, #profileVip #vipPreviewName.nick-gradient-platinum, .message-author-name.nick-gradient-platinum, .quoted-header.nick-gradient-platinum { background-image: linear-gradient(135deg, #434343, #d7dde8, #fff, #757f9a); }
/*12*/
#profileName.nick-gradient-vintage, #profileVip #vipPreviewName.nick-gradient-vintage, .message-author-name.nick-gradient-vintage, .quoted-header.nick-gradient-vintage { background-image: linear-gradient(135deg, #ca7345, #735135); }
/*13*/
#profileName.nick-gradient-bubblegum, #profileVip #vipPreviewName.nick-gradient-bubblegum, .message-author-name.nick-gradient-bubblegum, .quoted-header.nick-gradient-bubblegum { background-image: linear-gradient(135deg, #f0c, #339); }
/*14*/
#profileName.nick-gradient-galaxy, #profileVip #vipPreviewName.nick-gradient-galaxy, .message-author-name.nick-gradient-galaxy, .quoted-header.nick-gradient-galaxy { background-image: linear-gradient(135deg, #654ea3, #eaafc8); }
/*15*/
#profileName.nick-gradient-mint, #profileVip #vipPreviewName.nick-gradient-mint, .message-author-name.nick-gradient-mint, .quoted-header.nick-gradient-mint { background-image: linear-gradient(135deg, #00c6ff, #0072ff); }
/*16*/
#profileName.nick-glow-green, .message-author-name.nick-glow-green, .quoted-header.nick-glow-green { color: #15803d; text-shadow: 0 0 2px #22c55e,0 0 8px rgba(34, 197, 94, 0.55); }
/*17*/
#profileName.nick-glow-purple, .message-author-name.nick-glow-purple, .quoted-header.nick-glow-purple { color: #6b21a8; text-shadow: 0 0 2px #c084fc,0 0 8px rgba(192, 132, 252, 0.55); }
/*18*/
#profileName.nick-glow-red, .message-author-name.nick-glow-red, .quoted-header.nick-glow-red { color: #b91c1c; text-shadow: 0 0 2px #ef4444,0 0 8px rgba(239, 68, 68, 0.55); }
/*19*/
#profileName.nick-glow-gold, .message-author-name.nick-glow-gold, .quoted-header.nick-glow-gold { color: #a16207; text-shadow: 0 0 2px #eab308,0 0 8px rgba(234, 179, 8, 0.6); }
/*20*/
#profileName.nick-glow-cyan, .message-author-name.nick-glow-cyan, .quoted-header.nick-glow-cyan { color: #0369a1; text-shadow: 0 0 2px #38bdf8,0 0 8px rgba(56, 189, 248, 0.55); }
/*21*/
#profileName.nick-glow-pink, .message-author-name.nick-glow-pink, .quoted-header.nick-glow-pink { color: #be185d; text-shadow: 0 0 2px #f43f5e,0 0 8px rgba(244, 63, 94, 0.55); }
/*22*/
#profileName.nick-glow-blue, .message-author-name.nick-glow-blue, .quoted-header.nick-glow-blue { color: #1e40af; text-shadow: 0 0 2px #60a5fa,0 0 8px rgba(96, 165, 250, 0.55); }
/*23*/
#profileName.nick-glow-orange, .message-author-name.nick-glow-orange, .quoted-header.nick-glow-orange { color: #c2410c; text-shadow: 0 0 2px #ff7426,0 0 8px rgba(255, 116, 38, 0.55); }
/*24*/
#profileName.nick-glow-emerald, .message-author-name.nick-glow-emerald, .quoted-header.nick-glow-emerald { color: #065f46; text-shadow: 0 0 2px #34d399,0 0 8px rgba(52, 211, 153, 0.55); }
/*25*/
#profileName.nick-glow-wine, .message-author-name.nick-glow-wine, .quoted-header.nick-glow-wine { color: #881337; text-shadow: 0 0 2px #f43f5e,0 0 8px rgba(244, 63, 94, 0.55); }
/*26*/
#profileName.nick-glow-amber, .message-author-name.nick-glow-amber, .quoted-header.nick-glow-amber { color: #78350f; text-shadow: 0 0 2px #fbbf24,0 0 8px rgba(251, 191, 36, 0.6); }
/*27*/
#profileName.nick-glow-teal, .message-author-name.nick-glow-teal, .quoted-header.nick-glow-teal { color: #0f766e; text-shadow: 0 0 2px #2dd4bf,0 0 8px rgba(45, 212, 191, 0.55); }
/*28*/
#profileName.nick-glow-indigo, .message-author-name.nick-glow-indigo, .quoted-header.nick-glow-indigo { color: #3730a3; text-shadow: 0 0 2px #818cf8,0 0 8px rgba(129, 140, 248, 0.55); }
/*29*/
#profileName.nick-glow-coral, .message-author-name.nick-glow-coral, .quoted-header.nick-glow-coral { color: #9f1239; text-shadow: 0 0 2px #ff6b81,0 0 8px rgba(255, 107, 129, 0.55); }
/*30*/
#profileName.nick-glow-silver, .message-author-name.nick-glow-silver, .quoted-header.nick-glow-silver { color: #1f2937; text-shadow: 0 0 2px #9ca3af,0 0 8px rgba(156, 163, 175, 0.55); }
/*31*/
#profileName.nick-glow-lime, .message-author-name.nick-glow-lime, .quoted-header.nick-glow-lime { color: #3f6212; text-shadow: 0 0 2px #84cc16,0 0 8px rgba(132, 204, 22, 0.6); }
/*32*/
#profileName.nick-gradient-royal-purple, .message-author-name.nick-gradient-royal-purple, .quoted-header.nick-gradient-royal-purple { background-image: linear-gradient(135deg, indigo, #d80073); }
/*33*/
#profileName.nick-gradient-midnight-cyan, .message-author-name.nick-gradient-midnight-cyan, .quoted-header.nick-gradient-midnight-cyan { background-image: linear-gradient(135deg, #0f2027, #0083b0); }
/*34*/
#profileName.nick-gradient-deep-ruby, .message-author-name.nick-gradient-deep-ruby, .quoted-header.nick-gradient-deep-ruby { background-image: linear-gradient(135deg, #580000, #b91d73); }
/*35*/
#profileName.nick-gradient-dark-emerald, .message-author-name.nick-gradient-dark-emerald, .quoted-header.nick-gradient-dark-emerald { background-image: linear-gradient(135deg, #0b486b, #005c53); }
/*36*/
#profileName.nick-gradient-cosmic-violet, .message-author-name.nick-gradient-cosmic-violet, .quoted-header.nick-gradient-cosmic-violet { background-image: linear-gradient(135deg, #1f1c2c, #928dab); }
/*37*/
#profileName.nick-gradient-inferno-fire, .message-author-name.nick-gradient-inferno-fire, .quoted-header.nick-gradient-inferno-fire { background-image: linear-gradient(135deg, #870000, #190a05); }
/*38*/
#profileName.nick-gradient-deep-sapphire, .message-author-name.nick-gradient-deep-sapphire, .quoted-header.nick-gradient-deep-sapphire { background-image: linear-gradient(135deg, #06f7ff, #ff09ea); }
/*39*/
#profileName.nick-gradient-electric-magenta, .message-author-name.nick-gradient-electric-magenta, .quoted-header.nick-gradient-electric-magenta { background-image: linear-gradient(135deg, #61045f, #aa076b); }
/*40*/
#profileName.nick-gradient-poison-green, .message-author-name.nick-gradient-poison-green, .quoted-header.nick-gradient-poison-green { background-image: linear-gradient(135deg, #00ffbf, #6404ff); }
/*41*/
#profileName.nick-gradient-bronze-gold, .message-author-name.nick-gradient-bronze-gold, .quoted-header.nick-gradient-bronze-gold { background-image: linear-gradient(135deg, #362612, #8e6d32, #4a3410); font-weight: bold; }
/*42*/
#profileName.nick-gradient-black-ocean, .message-author-name.nick-gradient-black-ocean, .quoted-header.nick-gradient-black-ocean { background-image: linear-gradient(135deg, #120078, #bdb76b); }
/*43*/
#profileName.nick-gradient-dark-magma, .message-author-name.nick-gradient-dark-magma, .quoted-header.nick-gradient-dark-magma { background-image: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
/*44*/
#profileName.nick-gradient-plum-berry, .message-author-name.nick-gradient-plum-berry, .quoted-header.nick-gradient-plum-berry { background-image: linear-gradient(135deg, #3a1c71, #d76d77); }
/*45*/
#profileName.nick-gradient-electric-petroleum, .message-author-name.nick-gradient-electric-petroleum, .quoted-header.nick-gradient-electric-petroleum { background-image: linear-gradient(135deg, #036, #00b4db); }
/*46*/
#profileName.nick-gradient-carmine-pink, .message-author-name.nick-gradient-carmine-pink, .quoted-header.nick-gradient-carmine-pink { background-image: linear-gradient(135deg, #fd0c0c, #26a337); }
/*47*/
#profileName.nick-gradient-deep-indigo, .message-author-name.nick-gradient-deep-indigo, .quoted-header.nick-gradient-deep-indigo { background-image: linear-gradient(135deg, #11002c, #480048); }
/*48*/
#profileName.nick-gradient-coffee-amber, .message-author-name.nick-gradient-coffee-amber, .quoted-header.nick-gradient-coffee-amber { background-image: linear-gradient(135deg, #2c1603, #e65c00); }
/*49*/
#profileName.nick-gradient-night-teal, .message-author-name.nick-gradient-night-teal, .quoted-header.nick-gradient-night-teal { background-image: linear-gradient(135deg, #00223e, #1d976c); }
/*50*/
#profileName.nick-gradient-cyber-red, .message-author-name.nick-gradient-cyber-red, .quoted-header.nick-gradient-cyber-red { background-image: linear-gradient(135deg, #430007, #c8102e, #4a00e0); }
/*51*/
#profileName.nick-gradient-dark-chrome, .message-author-name.nick-gradient-dark-chrome, .quoted-header.nick-gradient-dark-chrome { background-image: linear-gradient(135deg, #161616, #434343, #161616); font-weight: bold; }
/*52*/
#profileName.nick-gradient-neon, .message-author-name.nick-gradient-neon, .quoted-header.nick-gradient-neon { background-image: linear-gradient(90deg, #ff007f, #39ff14, #00f0ff, #ff007f); background-size: 300% 100%; }
/*53*/
#profileName.nick-anim-rainbow, .message-author-name.nick-anim-rainbow, .quoted-header.nick-anim-rainbow { background-image: linear-gradient(90deg, red, orange, #ff0, green, #00f, indigo, violet, red); background-size: 300% 100%; }
/*54*/
#profileName.nick-anim-aurora, .message-author-name.nick-anim-aurora, .quoted-header.nick-anim-aurora { background-image: linear-gradient(90deg, #0575e6, #00f260, #0575e6); background-size: 200% 100%; }
/*55*/
#profileName.nick-anim-magma, .message-author-name.nick-anim-magma, .quoted-header.nick-anim-magma { background-image: linear-gradient(90deg, #f12711, #f5af19, #f12711); background-size: 200% 100%; }
/*56*/
#profileName.nick-anim-matrix, .message-author-name.nick-anim-matrix, .quoted-header.nick-anim-matrix { background-image: linear-gradient(90deg, #0f0, #030, #0f0); background-size: 200% 100%; }
/*57*/
#profileName.nick-anim-electric, .message-author-name.nick-anim-electric, .quoted-header.nick-anim-electric { background-image: linear-gradient(90deg, #0ff, #fff, #0072ff, #0ff); background-size: 300% 100%; }
/*58*/
#profileName.nick-anim-gold-flow, .message-author-name.nick-anim-gold-flow, .quoted-header.nick-anim-gold-flow { background-image: linear-gradient(90deg, #bf953f, #aa771c, #fcf6ba, #bf953f); background-size: 300% 100%; }
/*59*/
#profileName.nick-anim-ice, .message-author-name.nick-anim-ice, .quoted-header.nick-anim-ice { background-image: linear-gradient(90deg, #e0f7fa, #80deea, #00bcd4, #e0f7fa); background-size: 300% 100%; }
/*60*/
#profileName.nick-anim-vampire, .message-author-name.nick-anim-vampire, .quoted-header.nick-anim-vampire { background-image: linear-gradient(90deg, #4a0000, red, #4a0000); background-size: 200% 100%; }
/*61*/
#profileName.nick-anim-candy, .message-author-name.nick-anim-candy, .quoted-header.nick-anim-candy { background-image: linear-gradient(90deg, #ff758c, #ff7eb3, #ff758c); background-size: 200% 100%; }
/*62*/
#profileName.nick-anim-toxic, .message-author-name.nick-anim-toxic, .quoted-header.nick-anim-toxic { background-image: linear-gradient(90deg, #56ab2f, #a8ff78, #56ab2f); background-size: 200% 100%; }
/*63*/
#profileName.nick-anim-miami, .message-author-name.nick-anim-miami, .quoted-header.nick-anim-miami { background-image: linear-gradient(90deg, #00f2fe, #4facfe, #00f2fe); background-size: 200% 100%; }
/*64*/
#profileName.nick-anim-phoenix, .message-author-name.nick-anim-phoenix, .quoted-header.nick-anim-phoenix { background-image: linear-gradient(90deg, #f857a6, #ff5858, #f857a6); background-size: 200% 100%; }

@keyframes nameFlowAnim {
  0% { background-position: 0 50%; }
  100% { background-position: 300% 50%; }
}

#profileVip #vipPreviewName[style*="font-family"] { display: inline-block; }

/* Borda lateral, do Reply herda degradê e neon quando o autor citado for VIP */
/* ========================================================================= 
   BARRINHA LATERAL ARREDONDADA DO REPLY (PADRÃO WHATSAPP / TELEGRAM)
   ========================================================================= */
.quoted-reply-box { position: relative; background-color: #6969691c; padding: 6px 10px 6px 14px; border-radius: 8px; margin-bottom: 6px; display: inline-block; max-width: 90%; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; /* <--- Adicione esta linha para prender a barra na curva */ }

/* A barrinha lateral acompanhando a curvatura do reply */
.quoted-reply-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--reply-bar-color, #3f3f3f); }

/* Todos os degradês e efeitos VIP aplicados na barrinha */
.quoted-reply-box.nick-gradient-cotton::before { background: linear-gradient(135deg, #ff9a9e, #fecfef); }
.quoted-reply-box.nick-gradient-blue-purple::before { background: linear-gradient(135deg, #0d6efd, #a020f0); }
.quoted-reply-box.nick-gradient-gold::before { background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); }
.quoted-reply-box.nick-gradient-sunset::before { background: linear-gradient(135deg, #ff512f, #dd2476); }
.quoted-reply-box.nick-gradient-ocean::before { background: linear-gradient(135deg, #02aab0, #00cdac); }
.quoted-reply-box.nick-gradient-forest::before { background: linear-gradient(135deg, #11998e, #38ef7d); }
.quoted-reply-box.nick-gradient-ruby::before { background: linear-gradient(135deg, #cb2d3e, #ef473a); }
.quoted-reply-box.nick-gradient-cyberpunk::before { background: linear-gradient(135deg, #f12711, #f5af19); }
.quoted-reply-box.nick-gradient-lavender::before { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.quoted-reply-box.nick-gradient-fire::before { background: linear-gradient(135deg, red, #ff7300, #fc0); }
.quoted-reply-box.nick-gradient-platinum::before { background: linear-gradient(135deg, #434343, #d7dde8, #fff, #757f9a); }
.quoted-reply-box.nick-gradient-vintage::before { background: linear-gradient(135deg, #ca7345, #735135); }
.quoted-reply-box.nick-gradient-bubblegum::before { background: linear-gradient(135deg, #f0c, #339); }
.quoted-reply-box.nick-gradient-galaxy::before { background: linear-gradient(135deg, #654ea3, #eaafc8); }
.quoted-reply-box.nick-gradient-mint::before { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.quoted-reply-box.nick-glow-green::before { background: #22c55e; }
.quoted-reply-box.nick-glow-purple::before { background: #c084fc; }
.quoted-reply-box.nick-glow-red::before { background: #ef4444; }
.quoted-reply-box.nick-glow-gold::before { background: #eab308; }
.quoted-reply-box.nick-glow-cyan::before { background: #38bdf8; }
.quoted-reply-box.nick-glow-pink::before { background: #f43f5e; }
.quoted-reply-box.nick-glow-blue::before { background: #60a5fa; }
.quoted-reply-box.nick-glow-orange::before { background: #ff7426; }
.quoted-reply-box.nick-glow-emerald::before { background: #34d399; }
.quoted-reply-box.nick-glow-wine::before { background: #f43f5e; }
.quoted-reply-box.nick-glow-amber::before { background: #fbbf24; }
.quoted-reply-box.nick-glow-teal::before { background: #2dd4bf; }
.quoted-reply-box.nick-glow-indigo::before { background: #818cf8; }
.quoted-reply-box.nick-glow-coral::before { background: #ff6b81; }
.quoted-reply-box.nick-glow-silver::before { background: #9ca3af; }
.quoted-reply-box.nick-glow-lime::before { background: #84cc16; }
.quoted-reply-box.nick-gradient-royal-purple::before { background: linear-gradient(135deg, indigo, #d80073); }
.quoted-reply-box.nick-gradient-midnight-cyan::before { background: linear-gradient(135deg, #0f2027, #0083b0); }
.quoted-reply-box.nick-gradient-deep-ruby::before { background: linear-gradient(135deg, #580000, #b91d73); }
.quoted-reply-box.nick-gradient-dark-emerald::before { background: linear-gradient(135deg, #0b486b, #005c53); }
.quoted-reply-box.nick-gradient-cosmic-violet::before { background: linear-gradient(135deg, #1f1c2c, #928dab); }
.quoted-reply-box.nick-gradient-inferno-fire::before { background: linear-gradient(135deg, #870000, #190a05); }
.quoted-reply-box.nick-gradient-deep-sapphire::before { background: linear-gradient(135deg, #06f7ff, #ff09ea); }
.quoted-reply-box.nick-gradient-electric-magenta::before { background: linear-gradient(135deg, #61045f, #aa076b); }
.quoted-reply-box.nick-gradient-poison-green::before { background: linear-gradient(135deg, #00ffbf, #6404ff); }
.quoted-reply-box.nick-gradient-bronze-gold::before { background: linear-gradient(135deg, #362612, #8e6d32, #4a3410); }
.quoted-reply-box.nick-gradient-black-ocean::before { background: linear-gradient(135deg, #120078, #bdb76b); }
.quoted-reply-box.nick-gradient-dark-magma::before { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.quoted-reply-box.nick-gradient-plum-berry::before { background: linear-gradient(135deg, #3a1c71, #d76d77); }
.quoted-reply-box.nick-gradient-electric-petroleum::before { background: linear-gradient(135deg, #036, #00b4db); }
.quoted-reply-box.nick-gradient-carmine-pink::before { background: linear-gradient(135deg, #fd0c0c, #26a337); }
.quoted-reply-box.nick-gradient-deep-indigo::before { background: linear-gradient(135deg, #11002c, #480048); }
.quoted-reply-box.nick-gradient-coffee-amber::before { background: linear-gradient(135deg, #2c1603, #e65c00); }
.quoted-reply-box.nick-gradient-night-teal::before { background: linear-gradient(135deg, #00223e, #1d976c); }
.quoted-reply-box.nick-gradient-cyber-red::before { background: linear-gradient(135deg, #430007, #c8102e, #4a00e0); }
.quoted-reply-box.nick-gradient-dark-chrome::before { background: linear-gradient(135deg, #161616, #434343, #161616); }
.quoted-reply-box.nick-gradient-neon::before { background: linear-gradient(90deg, #ff007f, #39ff14, #00f0ff, #ff007f); }
.quoted-reply-box.nick-anim-rainbow::before { background: linear-gradient(90deg, red, orange, #ff0, green, #00f, indigo, violet, red); }
.quoted-reply-box.nick-anim-aurora::before { background: linear-gradient(90deg, #0575e6, #00f260, #0575e6); }
.quoted-reply-box.nick-anim-magma::before { background: linear-gradient(90deg, #f12711, #f5af19, #f12711); }
.quoted-reply-box.nick-anim-matrix::before { background: linear-gradient(90deg, #0f0, #030, #0f0); }
.quoted-reply-box.nick-anim-electric::before { background: linear-gradient(90deg, #0ff, #fff, #0072ff, #0ff); }
.quoted-reply-box.nick-anim-gold-flow::before { background: linear-gradient(90deg, #bf953f, #aa771c, #fcf6ba, #bf953f); }
.quoted-reply-box.nick-anim-ice::before { background: linear-gradient(90deg, #e0f7fa, #80deea, #00bcd4, #e0f7fa); }
.quoted-reply-box.nick-anim-vampire::before { background: linear-gradient(90deg, #4a0000, red, #4a0000); }
.quoted-reply-box.nick-anim-candy::before { background: linear-gradient(90deg, #ff758c, #ff7eb3, #ff758c); }
.quoted-reply-box.nick-anim-toxic::before { background: linear-gradient(90deg, #56ab2f, #a8ff78, #56ab2f); }
.quoted-reply-box.nick-anim-miami::before { background: linear-gradient(90deg, #00f2fe, #4facfe, #00f2fe); }
.quoted-reply-box.nick-anim-phoenix::before { background: linear-gradient(90deg, #f857a6, #ff5858, #f857a6); }

/* ========================================================================= 
   TEMA DE PERFIL VIP (SUPORTE PARA PERFIL REAL E MINI-PREVIEW)
   ========================================================================= */

/*1*/
#profileVip #vipPreviewBanner.banner-grad-purple, .banner-grad-purple { background: linear-gradient(135deg, #ede9fe 0, #c4b5fd 50%, #8b5cf6 100%); }
/*2*/
#profileVip #vipPreviewBanner.banner-grad-gold, .banner-grad-gold { background: linear-gradient(135deg, #fffbeb, #fde68a, #f59e0b); }
/*3*/
#profileVip #vipPreviewBanner.banner-anim-aurora, .banner-anim-aurora { background: linear-gradient(270deg, #38bdf8, #4ade80, #38bdf8); }
/*4*/
#profileVip #vipPreviewBanner.banner-grad-lavender-space, .banner-grad-lavender-space { background: linear-gradient(135deg, #aeeed9 40%, #c8c0ec 50%, #01b7ff 160%); }
/*5*/
#profileVip #vipPreviewBanner.banner-grad-gold-light, .banner-grad-gold-light { background: linear-gradient(135deg, #fef9c3 0, #facc15 50%, #ea0808 100%); }
/*6*/
#profileVip #vipPreviewBanner.banner-grad-sunset, .banner-grad-sunset { background: linear-gradient(135deg, #ffedd5 0, #fb923c 100%); }
/*7*/
#profileVip #vipPreviewBanner.banner-grad-ocean, .banner-grad-ocean { background: linear-gradient(135deg, #e0f2fe 0, #38bdf8 100%); }
/*8*/
#profileVip #vipPreviewBanner.banner-grad-emerald, .banner-grad-emerald { background: linear-gradient(135deg, #dcfce7 0, #4ade80 100%); }
/*9*/
#profileVip #vipPreviewBanner.banner-grad-ruby, .banner-grad-ruby { background: linear-gradient(135deg, #ffe4e6 0, #fb7185 100%); }
/*10*/
#profileVip #vipPreviewBanner.banner-grad-cyberpunk, .banner-grad-cyberpunk { background: linear-gradient(135deg, #fed7aa 0, #f472b6 100%); }
/*11*/
#profileVip #vipPreviewBanner.banner-grad-cotton, .banner-grad-cotton { background: linear-gradient(135deg, #fce7f3 0, #fbcfe8 100%); }
/*12*/
#profileVip #vipPreviewBanner.banner-grad-lavender, .banner-grad-lavender { background: linear-gradient(135deg, #e0e7ff 0, #c7d2fe 100%); }
/*13*/
#profileVip #vipPreviewBanner.banner-grad-fire, .banner-grad-fire { background: linear-gradient(135deg, #fee2e2 0, #fdba74 50%, #fde047 100%); }
/*14*/
#profileVip #vipPreviewBanner.banner-grad-platinum, .banner-grad-platinum { background: linear-gradient(135deg, #3b3b3b 0,#a9e8eb 50%, #5b81af 100%); }
/*15*/
#profileVip #vipPreviewBanner.banner-grad-vintage, .banner-grad-vintage { background: linear-gradient(135deg, #fef3c7 0, #d97706 100%); }
/*16*/
#profileVip #vipPreviewBanner.banner-grad-bubblegum, .banner-grad-bubblegum { background: linear-gradient(135deg, #fae8ff 0, #e879f9 100%); }
/*17*/
#profileVip #vipPreviewBanner.banner-grad-galaxy, .banner-grad-galaxy { background: linear-gradient(135deg, #f7d5a4 0, #f472b6 100%); }
/*18*/
#profileVip #vipPreviewBanner.banner-grad-mint, .banner-grad-mint { background: linear-gradient(135deg, #ccfbf1 0, #2dd4bf 100%); }
/*19*/
#profileVip #vipPreviewBanner.banner-grad-peach, .banner-grad-peach { background: linear-gradient(135deg, #ffedd5 0, #f87171 100%); }
/*20*/
#profileVip #vipPreviewBanner.banner-grad-citrus, .banner-grad-citrus { background: linear-gradient(135deg, #ecfccb 0, #84cc16 100%); }
/*21*/
#profileVip #vipPreviewBanner.banner-grad-sky, .banner-grad-sky { background: linear-gradient(135deg, #e0f7fa 0, #80deea 100%); }
/*22*/
#profileVip #vipPreviewBanner.banner-grad-matcha, .banner-grad-matcha { background: linear-gradient(135deg, #f0fdf4 0, #86efac 100%); }
/*23*/
#profileVip #vipPreviewBanner.banner-grad-sand, .banner-grad-sand { background: linear-gradient(135deg, #86863c 0, #525151 100%); }
/*24*/
#profileVip #vipPreviewBanner.banner-grad-aurora-static, .banner-grad-aurora-static { background: linear-gradient(135deg, #7dd3fc 0, #34d399 100%); }
/*25*/
#profileVip #vipPreviewBanner.banner-anim-neon, .banner-anim-neon { background: linear-gradient(135deg, #f43f5e 0, #10b981 50%, #06b6d4 100%); }
/*26*/
#profileVip #vipPreviewBanner.banner-anim-rainbow, .banner-anim-rainbow { background: linear-gradient(135deg, #f87171, #fb923c, #facc15, #4ade80, #60a5fa, #818cf8, #c084fc); }
/*27*/
#profileVip #vipPreviewBanner.banner-anim-magma, .banner-anim-magma { background: linear-gradient(135deg, #fca5a5 0, #fdba74 100%); }
/*28*/
#profileVip #vipPreviewBanner.banner-anim-matrix, .banner-anim-matrix { background: linear-gradient(135deg, #bbf7d0 0, #22c55e 100%); }
/*29*/
#profileVip #vipPreviewBanner.banner-anim-electric, .banner-anim-electric { background: linear-gradient(135deg, #b8e6eb 0, #006979 50%, #67e8f9 100%); }
/*30*/
#profileVip #vipPreviewBanner.banner-anim-gold-flow, .banner-anim-gold-flow { background: linear-gradient(135deg, #fef08a 0, #ca8a04 50%, #fffbeb 100%); }
/*31*/
#profileVip #vipPreviewBanner.banner-anim-glitch, .banner-anim-glitch { background: linear-gradient(135deg, #e2e8f0 0, #f87171 50%, #22d3ee 100%); }
/*32*/
#profileVip #vipPreviewBanner.banner-anim-ice, .banner-anim-ice { background: linear-gradient(135deg, #ecfeff 0, #a5f3fc 50%, #06b6d4 100%); }
/*33*/
#profileVip #vipPreviewBanner.banner-anim-vampire, .banner-anim-vampire { background: linear-gradient(135deg, #ffe4e6 0, #e11d48 100%); }
/*34*/
#profileVip #vipPreviewBanner.banner-anim-candy, .banner-anim-candy { background: linear-gradient(135deg, #fce7f3 0, #f472b6 100%); }
/*35*/
#profileVip #vipPreviewBanner.banner-anim-toxic, .banner-anim-toxic { background: linear-gradient(135deg, #dcfce7 0, #16a34a 100%); }
/*36*/
#profileVip #vipPreviewBanner.banner-anim-shadow, .banner-anim-shadow { background: linear-gradient(135deg, #594b5a 0, #94a3b8 100%); }
/*37*/
#profileVip #vipPreviewBanner.banner-anim-miami, .banner-anim-miami { background: linear-gradient(135deg, #e0f2fe 0, #38bdf8 100%); }
/*38*/
#profileVip #vipPreviewBanner.banner-anim-phoenix, .banner-anim-phoenix { background: linear-gradient(135deg, #fdf2f8 0, #f43f5e 100%); }
/*39*/
#profileVip #vipPreviewBanner.banner-anim-breeze, .banner-anim-breeze { background: linear-gradient(135deg, #e0e7ff 0, #38bdf8 100%); }
/*40*/
#profileVip #vipPreviewBanner.banner-anim-spring, .banner-anim-spring { background: linear-gradient(135deg, #f7d1ff 0, #a7f3d0 100%); }
/*41*/
#profileVip #vipPreviewBanner.banner-anim-sunset-glow, .banner-anim-sunset-glow { background: linear-gradient(135deg, #fff7ed 0, #fb923c 100%); }
/*42*/
#profileVip #vipPreviewBanner.banner-grad-polar, .banner-grad-polar { background: linear-gradient(135deg, #0d9488 0, #4f46e5 50%, #d97706 100%); }
/*43*/
#profileVip #vipPreviewBanner.banner-grad-marshmallow, .banner-grad-marshmallow { background: linear-gradient(135deg, #f43f5e 0, #9333ea 50%, #0284c7 100%); }
/*44*/
#profileVip #vipPreviewBanner.banner-grad-tropical, .banner-grad-tropical { background: linear-gradient(135deg, #ea580c 0, #ca8a04 50%, #16a34a 100%); }
/*45*/
#profileVip #vipPreviewBanner.banner-grad-garden, .banner-grad-garden { background: linear-gradient(135deg, #65a30d 0, #059669 50%, #065f46 100%); }
/*46*/
#profileVip #vipPreviewBanner.banner-grad-horizon, .banner-grad-horizon { background: linear-gradient(135deg, #2563eb 0, #b3b4fa 50%, #00ec63 100%); }
/*47*/
#profileVip #vipPreviewBanner.banner-grad-twilight, .banner-grad-twilight { background: linear-gradient(135deg, #9333ea 0, #46c9fd 50%, #71951d 100%); }
/*48*/
#profileVip #vipPreviewBanner.banner-grad-sorbet, .banner-grad-sorbet { background: linear-gradient(135deg, #f97316 0, #db2777 50%, #be123c 100%); }
/*49*/
#profileVip #vipPreviewBanner.banner-grad-lagoon, .banner-grad-lagoon { background: linear-gradient(135deg, #1eb3a6 0, #36dda5 50%, #00c3ff 100%); }
/*50*/
#profileVip #vipPreviewBanner.banner-grad-quartz, .banner-grad-quartz { background: linear-gradient(135deg, #e11d48 0, #c026d3 50%, #86198f 100%); }
/*51*/
#profileVip #vipPreviewBanner.banner-grad-dune, .banner-grad-dune { background: linear-gradient(135deg, #f60 0, #94002c 50%, #92400e 100%); }

/* ========================================================================= 
   DEGRADES PARA O NOME DO TOPO (#profileName)
   ========================================================================= */
/**/
#profileName.nick-gradient-cotton, .message-author-name.nick-gradient-cotton { background-image: linear-gradient(135deg, #ff9a9e, #fecfef); }
/*2*/
#profileName.nick-gradient-blue-purple, .message-author-name.nick-gradient-blue-purple { background-image: linear-gradient(135deg, #0d6efd, #a020f0); }
/*3*/
#profileName.nick-gradient-gold, .message-author-name.nick-gradient-gold { background-image: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); font-weight: bold; }
/*4*/
#profileName.nick-gradient-sunset, .message-author-name.nick-gradient-sunset { background-image: linear-gradient(135deg, #ff512f, #dd2476); }
/*5*/
#profileName.nick-gradient-ocean, .message-author-name.nick-gradient-ocean { background-image: linear-gradient(135deg, #02aab0, #00cdac); }
/*6*/
#profileName.nick-gradient-forest, .message-author-name.nick-gradient-forest { background-image: linear-gradient(135deg, #11998e, #38ef7d); }
/*7*/
#profileName.nick-gradient-ruby, .message-author-name.nick-gradient-ruby { background-image: linear-gradient(135deg, #cb2d3e, #ef473a); }
/*8*/
#profileName.nick-gradient-cyberpunk, .message-author-name.nick-gradient-cyberpunk { background-image: linear-gradient(135deg, #f12711, #f5af19); }
/*9*/
#profileName.nick-gradient-lavender, .message-author-name.nick-gradient-lavender { background-image: linear-gradient(135deg, #a18cd1, #fbc2eb); }
/*10*/
#profileName.nick-gradient-fire, .message-author-name.nick-gradient-fire { background-image: linear-gradient(135deg, red, #ff7300, #fc0); }
/*11*/
#profileName.nick-gradient-platinum, .message-author-name.nick-gradient-platinum { background-image: linear-gradient(135deg, #434343, #045cff, #343338, #757f9a); }
/*12*/
#profileName.nick-gradient-vintage, .message-author-name.nick-gradient-vintage { background-image: linear-gradient(135deg, #ca7345, #735135); }
/*13*/
#profileName.nick-gradient-bubblegum, .message-author-name.nick-gradient-bubblegum { background-image: linear-gradient(135deg, #f0c, #339); }
/*14*/
#profileName.nick-gradient-galaxy, .message-author-name.nick-gradient-galaxy { background-image: linear-gradient(135deg, #654ea3, #eaafc8); }
/*15*/
#profileName.nick-gradient-mint, .message-author-name.nick-gradient-mint { background-image: linear-gradient(135deg, #00c6ff, #0072ff); }

/*16*/
#profileName.nick-glow-green, .message-author-name.nick-glow-green { color: #15803d; text-shadow: 0 0 2px #22c55e,0 0 8px rgba(34, 197, 94, 0.55); }
/*17*/
#profileName.nick-glow-purple, .message-author-name.nick-glow-purple { color: #6b21a8; text-shadow: 0 0 2px #c084fc,0 0 8px rgba(192, 132, 252, 0.55); }
/*18*/
#profileName.nick-glow-red, .message-author-name.nick-glow-red { color: #b91c1c; text-shadow: 0 0 2px #ef4444,0 0 8px rgba(239, 68, 68, 0.55); }
/*19*/
#profileName.nick-glow-gold, .message-author-name.nick-glow-gold { color: #a16207; text-shadow: 0 0 2px #eab308,0 0 8px rgba(234, 179, 8, 0.6); }
/*20*/
#profileName.nick-glow-cyan, .message-author-name.nick-glow-cyan { color: #0369a1; text-shadow: 0 0 2px #38bdf8,0 0 8px rgba(56, 189, 248, 0.55); }
/*21*/
#profileName.nick-glow-pink, .message-author-name.nick-glow-pink { color: #be185d; text-shadow: 0 0 2px #f43f5e,0 0 8px rgba(244, 63, 94, 0.55); }
/*22*/
#profileName.nick-glow-blue, .message-author-name.nick-glow-blue { color: #1e40af; text-shadow: 0 0 2px #60a5fa,0 0 8px rgba(96, 165, 250, 0.55); }
/*23*/
#profileName.nick-glow-orange, .message-author-name.nick-glow-orange { color: #c2410c; text-shadow: 0 0 2px #ff7426,0 0 8px rgba(255, 116, 38, 0.55); }
/*24*/
#profileName.nick-glow-emerald, .message-author-name.nick-glow-emerald { color: #065f46; text-shadow: 0 0 2px #34d399,0 0 8px rgba(52, 211, 153, 0.55); }
/*25*/
#profileName.nick-glow-wine, .message-author-name.nick-glow-wine { color: #881337; text-shadow: 0 0 2px #f43f5e,0 0 8px rgba(244, 63, 94, 0.55); }
/*26*/
#profileName.nick-glow-amber, .message-author-name.nick-glow-amber { color: #78350f; text-shadow: 0 0 2px #fbbf24,0 0 8px rgba(251, 191, 36, 0.6); }
/*27*/
#profileName.nick-glow-teal, .message-author-name.nick-glow-teal { color: #0f766e; text-shadow: 0 0 2px #2dd4bf,0 0 8px rgba(45, 212, 191, 0.55); }
/*28*/
#profileName.nick-glow-indigo, .message-author-name.nick-glow-indigo { color: #3730a3; text-shadow: 0 0 2px #818cf8,0 0 8px rgba(129, 140, 248, 0.55); }
/*29*/
#profileName.nick-glow-coral, .message-author-name.nick-glow-coral { color: #9f1239; text-shadow: 0 0 2px #ff6b81,0 0 8px rgba(255, 107, 129, 0.55); }
/*30*/
#profileName.nick-glow-silver, .message-author-name.nick-glow-silver { color: #1f2937; text-shadow: 0 0 2px #9ca3af,0 0 8px rgba(156, 163, 175, 0.55); }
/*31*/
#profileName.nick-glow-lime, .message-author-name.nick-glow-lime { color: #3f6212; text-shadow: 0 0 2px #84cc16,0 0 8px rgba(132, 204, 22, 0.6); }

/*32*/
#profileName.nick-gradient-royal-purple, .message-author-name.nick-gradient-royal-purple { background-image: linear-gradient(135deg, indigo, #d80073); }
/*33*/
#profileName.nick-gradient-midnight-cyan, .message-author-name.nick-gradient-midnight-cyan { background-image: linear-gradient(135deg, #0f2027, #0083b0); }
/*34*/
#profileName.nick-gradient-deep-ruby, .message-author-name.nick-gradient-deep-ruby { background-image: linear-gradient(135deg, #580000, #b91d73); }
/*35*/
#profileName.nick-gradient-dark-emerald, .message-author-name.nick-gradient-dark-emerald { background-image: linear-gradient(135deg, #0b486b, #005c53); }
/*36*/
#profileName.nick-gradient-cosmic-violet, .message-author-name.nick-gradient-cosmic-violet { background-image: linear-gradient(135deg, #1f1c2c, #928dab); }
/*37*/
#profileName.nick-gradient-inferno-fire, .message-author-name.nick-gradient-inferno-fire { background-image: linear-gradient(135deg, #870000, #190a05); }
/*38*/
#profileName.nick-gradient-deep-sapphire, .message-author-name.nick-gradient-deep-sapphire { background-image: linear-gradient(135deg, #06f7ff, #ff09ea); }
/*39*/
#profileName.nick-gradient-electric-magenta, .message-author-name.nick-gradient-electric-magenta { background-image: linear-gradient(135deg, #61045f, #aa076b); }
/*40*/
#profileName.nick-gradient-poison-green, .message-author-name.nick-gradient-poison-green { background-image: linear-gradient(135deg, 	#00ffbf, #6404ff); }
/*41*/
#profileName.nick-gradient-bronze-gold, .message-author-name.nick-gradient-bronze-gold { background-image: linear-gradient(135deg, #362612, #8e6d32, #4a3410); font-weight: bold; }
/*42*/
#profileName.nick-gradient-black-ocean, .message-author-name.nick-gradient-black-ocean { background-image: linear-gradient(135deg, #120078, #bdb76b); }
/*43*/
#profileName.nick-gradient-dark-magma, .message-author-name.nick-gradient-dark-magma { background-image: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
/*44*/
#profileName.nick-gradient-plum-berry, .message-author-name.nick-gradient-plum-berry { background-image: linear-gradient(135deg, #3a1c71, #d76d77); }
/*45*/
#profileName.nick-gradient-electric-petroleum, .message-author-name.nick-gradient-electric-petroleum { background-image: linear-gradient(135deg, #036, #00b4db); }
/*46*/
#profileName.nick-gradient-carmine-pink, .message-author-name.nick-gradient-carmine-pink { background-image: linear-gradient(135deg, #fd0c0c, #26a337); }
/*47*/
#profileName.nick-gradient-deep-indigo, .message-author-name.nick-gradient-deep-indigo { background-image: linear-gradient(135deg, #11002c, #480048); }
/*48*/
#profileName.nick-gradient-coffee-amber, .message-author-name.nick-gradient-coffee-amber { background-image: linear-gradient(135deg, #2c1603, #e65c00); }
/*49*/
#profileName.nick-gradient-night-teal, .message-author-name.nick-gradient-night-teal { background-image: linear-gradient(135deg, #00223e, #1d976c); }
/*50*/
#profileName.nick-gradient-cyber-red, .message-author-name.nick-gradient-cyber-red { background-image: linear-gradient(135deg, #430007, #c8102e, #4a00e0); }
/*51*/
#profileName.nick-gradient-dark-chrome, .message-author-name.nick-gradient-dark-chrome { background-image: linear-gradient(135deg, #161616, #434343, #161616); font-weight: bold; }
/*52*/
#profileName.nick-gradient-neon, .message-author-name.nick-gradient-neon { background-image: linear-gradient(90deg, #ff007f, #39ff14, #00f0ff, #ff007f); background-size: 300% 100%; }
/*53*/
#profileName.nick-anim-rainbow, .message-author-name.nick-anim-rainbow { background-image: linear-gradient(90deg, red, orange, #ff0, green, #00f, indigo, violet, red); background-size: 300% 100%; }
/*54*/
#profileName.nick-anim-aurora, .message-author-name.nick-anim-aurora { background-image: linear-gradient(90deg, #0575e6, #00f260, #0575e6); background-size: 200% 100%; filter: drop-shadow(0px 0px 3px rgba(0, 242, 96, 0.5)); }
/*55*/
#profileName.nick-anim-magma, .message-author-name.nick-anim-magma { background-image: linear-gradient(90deg, #f12711, #f5af19, #f12711); background-size: 200% 100%; filter: drop-shadow(0px 0px 3px rgba(241, 39, 17, 0.7)); }
/*56*/
#profileName.nick-anim-matrix, .message-author-name.nick-anim-matrix { background-image: linear-gradient(90deg, #0f0, #030, #0f0); background-size: 200% 100%; -webkit-text-stroke: 0.5px #003300; }
/*57*/
#profileName.nick-anim-electric, .message-author-name.nick-anim-electric { background-image: linear-gradient(90deg, #0ff, #fff, #0072ff, #0ff); background-size: 300% 100%; }
/*58*/
#profileName.nick-anim-gold-flow, .message-author-name.nick-anim-gold-flow { background-image: linear-gradient(90deg, #bf953f, #aa771c, #fcf6ba, #bf953f); background-size: 300% 100%; font-weight: bold; -webkit-text-stroke: 0.3px #543d0c; }
/*59*/
#profileName.nick-anim-ice, .message-author-name.nick-anim-ice { background-image: linear-gradient(90deg, #e0f7fa, #80deea, #00bcd4, #e0f7fa); background-size: 300% 100%; }
/*60*/
#profileName.nick-anim-vampire, .message-author-name.nick-anim-vampire { background-image: linear-gradient(90deg, #4a0000, red, #4a0000); background-size: 200% 100%; -webkit-text-stroke: 0.5px #110000; }
/*61*/
#profileName.nick-anim-candy, .message-author-name.nick-anim-candy { background-image: linear-gradient(90deg, #ff758c, #ff7eb3, #ff758c); background-size: 200% 100%; }
/*62*/
#profileName.nick-anim-toxic, .message-author-name.nick-anim-toxic { background-image: linear-gradient(90deg, #56ab2f, #a8ff78, #56ab2f); background-size: 200% 100%; }
/*63*/
#profileName.nick-anim-miami, .message-author-name.nick-anim-miami { background-image: linear-gradient(90deg, #00f2fe, #4facfe, #00f2fe); background-size: 200% 100%; }
/*64*/
#profileName.nick-anim-phoenix, .message-author-name.nick-anim-phoenix { background-image: linear-gradient(90deg, #f857a6, #ff5858, #f857a6); background-size: 200% 100%; }

/* MOTOR DE RENDERIZAÇÃO E MOVIMENTO DOS DEGRADÊS ANIMADOS VIP */
@keyframes bannerMoveEngine {
  0% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@keyframes rainbowSpin {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

#profileVip .frame-diamond { border: 3px solid #00f0ff; box-shadow: 0 0 10px rgba(0, 240, 255, 0.5),inset 0 0 5px rgba(0, 240, 255, 0.3); background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px); background-size: 8px 8px; }
/* ======================================================================== 
   PROJETO VIP - MOLDURAS NEON DESKTOP (PROPORÇÃO PERFEITA PERFIL & CHAT)
   ========================================================================= */

/* Espessura calibrada: 4.5px no avatar grande do perfil e 2.5px no chat */
#vipTopPreviewFrame[class*="frame-"], .profile-avatar[class*="frame-"] { border-width: 4.5px!important; }
.message-avatar-wrap .avatar-frame[class*="frame-"] { border-width: 2.5px!important; }

/* 1. FOGO INCANDESCENTE */
#vipTopPreviewFrame.frame-plasma-fire, .message-avatar-wrap .avatar-frame.frame-plasma-fire, .profile-avatar.frame-plasma-fire { border-style: solid; border-color: #ff4500; box-shadow: 0 0 8px 2px #ff4500; }
/* 2. NEON FIBRA ÓPTICA */
#vipTopPreviewFrame.frame-fiber-neon, .message-avatar-wrap .avatar-frame.frame-fiber-neon, .profile-avatar.frame-fiber-neon { border-style: solid; border-color: #00f0ff; box-shadow: 0 0 8px 2px #00f0ff; }
/* 3. AURA PULSANTE */
#vipTopPreviewFrame.frame-aura-pulse, .message-avatar-wrap .avatar-frame.frame-aura-pulse, .profile-avatar.frame-aura-pulse { border-style: solid; border-color: gold; box-shadow: 0 0 8px 2px gold; }
/* 4. FAÍSCAS ELÉTRICAS */
#vipTopPreviewFrame.frame-electric-spark, .message-avatar-wrap .avatar-frame.frame-electric-spark, .profile-avatar.frame-electric-spark { border-style: solid; border-color: #b026ff; box-shadow: 0 0 8px 2px #b026ff; }
/* 5. VERDE VENENO */
#vipTopPreviewFrame.frame-toxic-green, .message-avatar-wrap .avatar-frame.frame-toxic-green, .profile-avatar.frame-toxic-green { border-style: solid; border-color: #10b981; box-shadow: 0 0 8px 2px #10b981; }
/* 6. VERMELHO RUBI */
#vipTopPreviewFrame.frame-ruby-red, .message-avatar-wrap .avatar-frame.frame-ruby-red, .profile-avatar.frame-ruby-red { border-style: solid; border-color: #dc2626; box-shadow: 0 0 8px 2px #dc2626; }
/* 7. AZUL COBALTO */
#vipTopPreviewFrame.frame-cobalt-blue, .message-avatar-wrap .avatar-frame.frame-cobalt-blue, .profile-avatar.frame-cobalt-blue { border-style: solid; border-color: #1d4ed8; box-shadow: 0 0 8px 2px #1d4ed8; }
/* 8. ROSA CHOQUE */
#vipTopPreviewFrame.frame-magenta-shock, .message-avatar-wrap .avatar-frame.frame-magenta-shock, .profile-avatar.frame-magenta-shock { border-style: solid; border-color: #db2777; box-shadow: 0 0 8px 2px #db2777; }
/* 9. LARANJA INFERNO */
#vipTopPreviewFrame.frame-inferno-orange, .message-avatar-wrap .avatar-frame.frame-inferno-orange, .profile-avatar.frame-inferno-orange { border-style: solid; border-color: #ea580c; box-shadow: 0 0 8px 2px #ea580c; }
/* 10. TURQUESA FECHADO */
#vipTopPreviewFrame.frame-deep-teal, .message-avatar-wrap .avatar-frame.frame-deep-teal, .profile-avatar.frame-deep-teal { border-style: solid; border-color: #0d9488; box-shadow: 0 0 8px 2px #0d9488; }
/* 11. ROXO IMPERIAL */
#vipTopPreviewFrame.frame-royal-purple, .message-avatar-wrap .avatar-frame.frame-royal-purple, .profile-avatar.frame-royal-purple { border-style: solid; border-color: #7e22ce; box-shadow: 0 0 8px 2px #7e22ce; }
/* 12. VERDE LIMA */
#vipTopPreviewFrame.frame-lime-charge, .message-avatar-wrap .avatar-frame.frame-lime-charge, .profile-avatar.frame-lime-charge { border-style: solid; border-color: #65a30d; box-shadow: 0 0 8px 2px #65a30d; }
/* 13. VINHO NOBRE */
#vipTopPreviewFrame.frame-noble-wine, .message-avatar-wrap .avatar-frame.frame-noble-wine, .profile-avatar.frame-noble-wine { border-style: solid; border-color: #9f1239; box-shadow: 0 0 8px 2px #9f1239; }
/* 14. ÂMBAR DOURADO */
#vipTopPreviewFrame.frame-amber-gold, .message-avatar-wrap .avatar-frame.frame-amber-gold, .profile-avatar.frame-amber-gold { border-style: solid; border-color: #d97706; box-shadow: 0 0 8px 2px #d97706; }
/* 15. AZUL SAFIRA */
#vipTopPreviewFrame.frame-sapphire-blue, .message-avatar-wrap .avatar-frame.frame-sapphire-blue, .profile-avatar.frame-sapphire-blue { border-style: solid; border-color: #0284c7; box-shadow: 0 0 8px 2px #0284c7; }
/* 16. CORAL VIVO */
#vipTopPreviewFrame.frame-vibrant-coral, .message-avatar-wrap .avatar-frame.frame-vibrant-coral, .profile-avatar.frame-vibrant-coral { border-style: solid; border-color: #f43f5e; box-shadow: 0 0 8px 2px #f43f5e; }
/* 17. ESMERALDA ESCURA */
#vipTopPreviewFrame.frame-dark-emerald, .message-avatar-wrap .avatar-frame.frame-dark-emerald, .profile-avatar.frame-dark-emerald { border-style: solid; border-color: #047857; box-shadow: 0 0 8px 2px #047857; }
/* 18. GRAFITE PLATINA */
#vipTopPreviewFrame.frame-dark-chrome, .message-avatar-wrap .avatar-frame.frame-dark-chrome, .profile-avatar.frame-dark-chrome { border-style: solid; border-color: #374151; box-shadow: 0 0 8px 2px #374151; }
/* 19. FÚCSIA NEON */
#vipTopPreviewFrame.frame-fuchsia-neon, .message-avatar-wrap .avatar-frame.frame-fuchsia-neon, .profile-avatar.frame-fuchsia-neon { border-style: solid; border-color: #f0f; box-shadow: 0 0 8px 2px #f0f; }
/* 20. BRONZE TERROSO */
#vipTopPreviewFrame.frame-bronze-earth, .message-avatar-wrap .avatar-frame.frame-bronze-earth, .profile-avatar.frame-bronze-earth { border-style: solid; border-color: #8b6f47; box-shadow: 0 0 8px 2px #8b6f47; }
/* 21. BEGE DOURADO */
#vipTopPreviewFrame.frame-beige-gold, .message-avatar-wrap .avatar-frame.frame-beige-gold, .profile-avatar.frame-beige-gold { border-style: solid; border-color: #d4ac6e; box-shadow: 0 0 8px 2px #d4ac6e; }
/* 22. CINZA PRATA ELEGANTE */
#vipTopPreviewFrame.frame-w3-gray, .message-avatar-wrap .avatar-frame.frame-w3-gray, .profile-avatar.frame-w3-gray { border-style: solid; border-color: #757575; box-shadow: 0 0 8px 2px #757575; }
/* 23. ROSA BEBÊ */
#vipTopPreviewFrame.frame-soft-pink, .message-avatar-wrap .avatar-frame.frame-soft-pink, .profile-avatar.frame-soft-pink { border-style: solid; border-color: #f472b6; box-shadow: 0 0 8px 2px #f472b6; }
/* 24. ORQUÍDEA VIOLETA */
#vipTopPreviewFrame.frame-orchid-violet, .message-avatar-wrap .avatar-frame.frame-orchid-violet, .profile-avatar.frame-orchid-violet { border-style: solid; border-color: #c084fc; box-shadow: 0 0 8px 2px #c084fc; }
/* 25. OURO ROSÉ */
#vipTopPreviewFrame.frame-rose-gold, .message-avatar-wrap .avatar-frame.frame-rose-gold, .profile-avatar.frame-rose-gold { border-style: solid; border-color: #fb7185; box-shadow: 0 0 8px 2px #fb7185; }
/* 26. MALVA GLAMOUR */
#vipTopPreviewFrame.frame-mauve-glam, .message-avatar-wrap .avatar-frame.frame-mauve-glam, .profile-avatar.frame-mauve-glam { border-style: solid; border-color: #e879f9; box-shadow: 0 0 8px 2px #e879f9; }
/* 27. LILÁS ALFAZEMA */
#vipTopPreviewFrame.frame-lavender-soft, .message-avatar-wrap .avatar-frame.frame-lavender-soft, .profile-avatar.frame-lavender-soft { border-style: solid; border-color: #c4b5fd; box-shadow: 0 0 8px 2px #c4b5fd; }
/* 28. MAGENTA DEEP */
#vipTopPreviewFrame.frame-deep-magenta, .message-avatar-wrap .avatar-frame.frame-deep-magenta, .profile-avatar.frame-deep-magenta { border-style: solid; border-color: #be185d; box-shadow: 0 0 8px 2px #be185d; }
/* 29. PÊSSEGO ILUMINADO */
#vipTopPreviewFrame.frame-peach-glow, .message-avatar-wrap .avatar-frame.frame-peach-glow, .profile-avatar.frame-peach-glow { border-style: solid; border-color: #fb923c; box-shadow: 0 0 8px 2px #fb923c; }
/* 30. AMETISTA CRISTAL */
#vipTopPreviewFrame.frame-amethyst-crystal, .message-avatar-wrap .avatar-frame.frame-amethyst-crystal, .profile-avatar.frame-amethyst-crystal { border-style: solid; border-color: red; box-shadow: 0 0 8px 2px red; }
/* 31. ROSA CEREJA */
#vipTopPreviewFrame.frame-cherry-pink, .message-avatar-wrap .avatar-frame.frame-cherry-pink, .profile-avatar.frame-cherry-pink { border-style: solid; border-color: #f43f5e; box-shadow: 0 0 8px 2px #f43f5e; }
/* 32. PÉROLA PRATA */
#vipTopPreviewFrame.frame-silver-pearl, .message-avatar-wrap .avatar-frame.frame-silver-pearl, .profile-avatar.frame-silver-pearl { border-style: solid; border-color: #e5e7eb; box-shadow: 0 0 8px 2px #e5e7eb; }
/* 33. CAFÉ DOURADO */
#vipTopPreviewFrame.frame-coffee-gold, .message-avatar-wrap .avatar-frame.frame-coffee-gold, .profile-avatar.frame-coffee-gold { border-style: solid; border-color: #92400e; box-shadow: 0 0 8px 2px #92400e; }
/* 34. CITRINO VIVAZ */
#vipTopPreviewFrame.frame-vivid-citrine, .message-avatar-wrap .avatar-frame.frame-vivid-citrine, .profile-avatar.frame-vivid-citrine { border-style: solid; border-color: #eab308; box-shadow: 0 0 8px 2px #eab308; }

/* ========================================================================= 
   AJUSTE DE MOLDURA VIP PARA O CHAT (MOBILE - 1 A 34)
   ========================================================================= */
@media (max-width: 768px) {
  .message-avatar-wrap .avatar-frame { border-width: 1.5px; }
  .message-avatar-wrap .avatar-frame.frame-plasma-fire { box-shadow: 0 0 4px 1px #ff4500; }
  .message-avatar-wrap .avatar-frame.frame-fiber-neon { box-shadow: 0 0 4px 1px #00f0ff; }
  .message-avatar-wrap .avatar-frame.frame-aura-pulse { box-shadow: 0 0 4px 1px gold; }
  .message-avatar-wrap .avatar-frame.frame-electric-spark { box-shadow: 0 0 4px 1px #b026ff; }
  .message-avatar-wrap .avatar-frame.frame-toxic-green { box-shadow: 0 0 4px 1px #10b981; }
  .message-avatar-wrap .avatar-frame.frame-ruby-red { box-shadow: 0 0 4px 1px #dc2626; }
  .message-avatar-wrap .avatar-frame.frame-cobalt-blue { box-shadow: 0 0 4px 1px #1d4ed8; }
  .message-avatar-wrap .avatar-frame.frame-magenta-shock { box-shadow: 0 0 4px 1px #db2777; }
  .message-avatar-wrap .avatar-frame.frame-inferno-orange { box-shadow: 0 0 4px 1px #ea580c; }
  .message-avatar-wrap .avatar-frame.frame-deep-teal { box-shadow: 0 0 4px 1px #0d9488; }
  .message-avatar-wrap .avatar-frame.frame-royal-purple { box-shadow: 0 0 4px 1px #7e22ce; }
  .message-avatar-wrap .avatar-frame.frame-lime-charge { box-shadow: 0 0 4px 1px #65a30d; }
  .message-avatar-wrap .avatar-frame.frame-noble-wine { box-shadow: 0 0 4px 1px #9f1239; }
  .message-avatar-wrap .avatar-frame.frame-amber-gold { box-shadow: 0 0 4px 1px #d97706; }
  .message-avatar-wrap .avatar-frame.frame-sapphire-blue { box-shadow: 0 0 4px 1px #0284c7; }
  .message-avatar-wrap .avatar-frame.frame-vibrant-coral { box-shadow: 0 0 4px 1px #f43f5e; }
  .message-avatar-wrap .avatar-frame.frame-dark-emerald { box-shadow: 0 0 4px 1px #047857; }
  .message-avatar-wrap .avatar-frame.frame-dark-chrome { box-shadow: 0 0 4px 1px #374151; }
  .message-avatar-wrap .avatar-frame.frame-fuchsia-neon { box-shadow: 0 0 4px 1px #f0f; }
  .message-avatar-wrap .avatar-frame.frame-bronze-earth { box-shadow: 0 0 4px 1px #8b6f47; }
  .message-avatar-wrap .avatar-frame.frame-beige-gold { box-shadow: 0 0 4px 1px #d4ac6e; }
  .message-avatar-wrap .avatar-frame.frame-w3-gray { box-shadow: 0 0 4px 1px #757575; }
  .message-avatar-wrap .avatar-frame.frame-soft-pink { box-shadow: 0 0 4px 1px #f472b6; }
  .message-avatar-wrap .avatar-frame.frame-orchid-violet { box-shadow: 0 0 4px 1px #c084fc; }
  .message-avatar-wrap .avatar-frame.frame-rose-gold { box-shadow: 0 0 4px 1px #fb7185; }
  .message-avatar-wrap .avatar-frame.frame-mauve-glam { box-shadow: 0 0 4px 1px #e879f9; }
  .message-avatar-wrap .avatar-frame.frame-lavender-soft { box-shadow: 0 0 4px 1px #c4b5fd; }
  .message-avatar-wrap .avatar-frame.frame-deep-magenta { box-shadow: 0 0 4px 1px #be185d; }
  .message-avatar-wrap .avatar-frame.frame-peach-glow { box-shadow: 0 0 4px 1px #fb923c; }
  .message-avatar-wrap .avatar-frame.frame-amethyst-crystal { box-shadow: 0 0 4px 1px #a855f7; }
  .message-avatar-wrap .avatar-frame.frame-cherry-pink { box-shadow: 0 0 4px 1px #f43f5e; }
  .message-avatar-wrap .avatar-frame.frame-silver-pearl { box-shadow: 0 0 4px 1px #e5e7eb; }
  .message-avatar-wrap .avatar-frame.frame-coffee-gold { box-shadow: 0 0 4px 1px #92400e; }
  .message-avatar-wrap .avatar-frame.frame-vivid-citrine { box-shadow: 0 0 4px 1px #eab308; }
}

/* ========================================================================= 
DROPDOWNS E LISTAS INTERNAS MODERNAS DA SEÇÃO VIP
========================================================================= */
/* NOVO ESTILO FLAT / SOFT INPUT (SEM BORDA PADRÃO E ESTILO APP PROFISSIONAL) */
.vip-custom-select-btn { width: 100%; min-height: 46px; background-color: #e6e6e6; /* Fundo cinza suave e moderno */
   border: none!important; /* Remove completamente a borda em estado normal */ border-radius: 12px; 
   /* Cantos suavizados modernos */ padding: 0 16px; /* Respiro lateral confortável */
    font-size: 14px; font-weight: 600; /* Destaque profissional no texto */ color: #1e293b; 
    /* Cor de texto com alto contraste */ 
    text-align: left; position: relative; cursor: pointer; outline: none; transition: background-color 0.2s ease,box-shadow 0.2s ease,transform 0.1s ease; }

/* Estado Ativo / Focado (Efeito sutil e elegante ao clicar) */
.vip-custom-select-btn:focus { background-color: #fff; box-shadow: 0 0 0 1px #abaaac,0 4px 12px rgba(111, 66, 193, 0.12); /* Brilho e contorno elegante apenas ao clicar */ }

.vip-custom-select-btn::after { content: "➔"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(90deg); font-size: 10px; color: #64748b; transition: transform 0.2s ease; }

.vip-custom-dropdown { position: relative; margin-top: 6px; margin-bottom: 6px; width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03); max-height: 150px; overflow-y: auto; overflow-x: hidden; padding: 4px; z-index: 5; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.vip-dropdown-option { width: 100%; padding: 9px 12px; text-align: left; border-radius: 10px; font-size: 14px; color: #333; cursor: pointer; transition: background 0.15s ease; }
.vip-dropdown-option:hover { background: #f3edff; color: #6f42c1; }
.vip-dropdown-option.active { background: #7070db; color: #fff; }

/* ========================================================================= 
18-07-2026 SISTEMA DE ACORDEÃO VIP PROFESSIONAL (UX CHAT-DF)
========================================================================= */
.vip-accordion { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.icon-vip { color: #737373; font-size: 20px; }
.vip-accordion-item { border: 1px solid rgba(111, 66, 193, 0.15); border-radius: 12px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); transition: border-color 0.2s ease; }
.vip-accordion-item.active { border-color: #6f42c1; }

/*edita os nome  inicial*/
.vip-accordion-header { width: 100%; min-height: 48px; background: #fdfbfe; border: none; padding: 2px 6px; text-align: left; font-size: 16.5px; font-weight: 700; color: #1e1b4b; display: flex; align-items: center; justify-content: space-between; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.vip-accordion-header::after { content: "➔"; font-size: 11px; color: #64748b; transform: rotate(90deg); transition: transform 0.2s ease; }
.vip-accordion-item.active .vip-accordion-header::after { transform: rotate(-90deg); }
.vip-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.25s cubic-bezier(0, 1, 0, 1); }
.vip-accordion-item.active .vip-accordion-content { max-height: 1000px; /* Expande dinamicamente */ transition: max-height 0.3s ease-in-out; }

/* ========================================================================= 
18-07-26 VIP CARROSSEL COM DESIGN NATIVO DE APLICATIVO (UX PREMIUM - CHAT-DF)
========================================================================= */
.vip-carousel-wrapper { position: relative; display: flex; align-items: center; width: 100%; background: #fff; padding: 6px 0; }
/* Customização da linha horizontal fluida */
.vip-carousel-wrapper .color-grid { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px; width: 100%; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 8px 6px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.vip-carousel-wrapper .color-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
.vip-carousel-wrapper .color-grid .color-box { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; /* Cantos levemente arredondados estilo iOS/Android */ scroll-snap-align: start; }

/* O Estilo Real de Aplicativo nos Botões Laterais */
.vip-carousel-wrapper .carousel-arrow { flex-shrink: 0; width: 36px; height: 36px; background-color: #5553532c; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 50%; color: #1e1b4b; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; user-select: none; /* Sombra suave multidirecional típica de elementos flutuantes de Apps */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),0 1px 3px rgba(0, 0, 0, 0.04); -webkit-tap-highlight-color: transparent; transition: background 0.2s,color 0.2s,box-shadow 0.2s,transform 0.1s; }

/* Tamanho cirúrgico do ícone interno do Bootstrap */
.vip-carousel-wrapper .carousel-arrow i { font-size: 27px; display: flex; align-items: center; justify-content: center; }

/* Hover refinado sem quebrar a identidade visual */
.vip-carousel-wrapper .carousel-arrow:hover { background: #f8fafc; color: #6f42c1; box-shadow: 0 4px 12px rgba(111, 66, 193, 0.15); }

/* Efeito físico imediato ao pressionar com o dedo */
.vip-carousel-wrapper .carousel-arrow:active { transform: scale(0.9); background: #f1f5f9; }

/* Margens de separação limpas */
.vip-carousel-wrapper .carousel-arrow.left { margin-right: 6px; }

.vip-carousel-wrapper .carousel-arrow.right { margin-left: 6px; }

/* RESTAURAR ABAS DO PERFIL NA HORIZONTAL */
.profile-body .profile-tabs { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 16px 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); background: #fff; width: 100%; }

/* O tema na faixa das abas SÓ é ativado se o painel estiver com .vip-mode-active */
.profile-panel.vip-mode-active[class*="banner-anim-"] .profile-body .profile-tabs, .profile-panel.vip-mode-active[class*="banner-grad-"] .profile-body .profile-tabs { background: transparent; }

/* Conteúdo inferior sempre branco em todas as abas */
.profile-content { border-radius: 18px 18px 0 0; padding-top: 4px; }

/* Estilos dos botões inativos apenas quando a aba VIP estiver ativa */
.profile-panel.vip-mode-active[class*="banner-anim-"] .profile-tab, .profile-panel.vip-mode-active[class*="banner-grad-"] .profile-tab { background: rgba(255, 255, 255, 0.85); color: #1e1b4b; }

.profile-panel.vip-mode-active[class*="banner-anim-"] .profile-tab.active, .profile-panel.vip-mode-active[class*="banner-grad-"] .profile-tab.active { background: #020641; color: #fff; }

/* Remove a borda/tema do container inteiro se NÃO estiver na aba VIP */
/* Borda e Tema ativados no Modal inteiro quando houver classe de tema */
.profile-panel[class*="banner-anim-"], .profile-panel[class*="banner-grad-"] { padding: 7px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }

.profile-panel[class*="banner-anim-"] .profile-body .profile-tabs, .profile-panel[class*="banner-grad-"] .profile-body .profile-tabs { background: transparent; }

.profile-body .profile-tabs .profile-tab { flex: 1; min-height: 36px; border: none; border-radius: 99px; background: #f0f2f5; color: #565557ce; font-size: 14px; font-weight: 700; cursor: pointer; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }

.profile-body .profile-tabs .profile-tab.active { background: #adadaf; color: #fff; }

/* ========================================================================= 
   OTIMIZAÇÃO COMPACTA VIP (SEM !IMPORTANT)
   ========================================================================= */

/* 1. Grade dos 5 botões com margens enxutas */
#profilePanel #profileVip .vip-buttons-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 0; margin-bottom: 6px; }

/* 2. Redução na altura dos botões (de 85px para 68px) */
#profilePanel #profileVip .vip-btn-card { width: 100%; min-height: 68px; background: #fff; border: 1px solid #eef2f6; border-radius: 12px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); cursor: pointer; transition: transform 0.15s ease,border-color 0.2s ease,box-shadow 0.2s ease; }

#profilePanel #profileVip .vip-btn-card.active { border-color: #4304b95e; background: #e2ebfc; }

/* 3. Ícones compactos e cores preservadas */
#profilePanel #profileVip .vip-icon-box { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }

/* ========================================================================= 
   BOTAO SALVAR VIP PREMIUM (CHAT-DF UX)
   ========================================================================= */
#profilePanel .vip-btn-save-custom { width: 100%; max-width: 210px; min-height: 44px; background-color: #020641; color: #fff; border: none; border-radius: 14px; font-size: 14.5px; font-weight: 600; letter-spacing: 0.3px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 14px rgba(2, 6, 65, 0.28); transition: transform 0.15s ease,box-shadow 0.2s ease,background-color 0.2s ease; -webkit-tap-highlight-color: transparent; user-select: none; }

#profilePanel .vip-btn-save-custom i { font-size: 17px; color: #38bdf8; display: flex; align-items: center; }

#profilePanel .vip-btn-save-custom:hover { background-color: #050b5e; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(2, 6, 65, 0.38); }

#profilePanel .vip-btn-save-custom:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(2, 6, 65, 0.2); }

#profilePanel #profileVip .vip-icon-box.bg-geo { background: linear-gradient(135deg, #10b981, #059669); }
#profilePanel #profileVip .vip-icon-box.bg-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
#profilePanel #profileVip .vip-icon-box.bg-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
#profilePanel #profileVip .vip-icon-box.bg-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
#profilePanel #profileVip .vip-icon-box.bg-gold { background: linear-gradient(135deg, #f59e0b, #d97706); }

/* 4. Título em uma única linha */
#profilePanel #profileVip .vip-header-title { font-size: 10px; font-weight: 600; color: #475569; text-align: center; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }

/* 5. Gaveta e Card interno sem padding excessivo */
#profilePanel #profileVip .vip-drawer-content { background: #fff; border-radius: 14px; border: 1px solid rgba(111, 66, 193, 0.18); padding: 8px 10px; margin-bottom: 8px; }

#profilePanel #profileVip .vip-drawer-content .vip-control-card { padding: 0; margin-bottom: 0; border: none; box-shadow: none; }

/* 6. Espaçamento compacto nos selects e carrossel */
#profilePanel #profileVip .vip-custom-select-btn { min-height: 40px; padding: 0 12px; font-size: 13.5px; }

#profilePanel #profileVip .vip-carousel-wrapper { padding: 2px 0; }

#profilePanel #profileVip .vip-carousel-wrapper .color-grid { padding: 4px 2px; gap: 8px; }

/* ========================================================================= 
   VISITANTE: Oculta a barra de abas quando visualizar o perfil de outro usuario
   ========================================================================= */
body.viewing-other-profile #profilePanel .profile-tabs { display: none; }

/* ========================================================================= 
BOTÕES DE REDES SOCIAIS NO PERFIL (INSTAGRAM UX)
========================================================================= */
.profile-social-links { padding-left: 4px; }

.social-icon-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transition: transform 0.2s ease,box-shadow 0.2s ease; }

.social-icon-btn:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }

/* GRADIENTE OFICIAL DO INSTAGRAM */
.social-icon-btn.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

/* ==========================================================================
ESTILIZAÇÃO DO BOTAO DO INSTAGRAM NO PERFIL (CHAT-DF UX)
========================================================================== */

.profile-social-links { border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 12px; }

.social-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; font-size: 1.2rem; transition: transform 0.2s ease,box-shadow 0.2s ease,opacity 0.2s ease; }

/* ========================================================================= 
TRAVAMENTO EXCLUSIVO DO TOPO AZUL APENAS NA ABA VIP (SEM BAGUNÇAR)
========================================================================= */

/* Permite a rolagem suave de todo o cabeçalho junto com o painel */
#profilePanel.vip-mode-active .profile-top-header { position: static; background-color: transparent; }

/* ========================================================================= 27-07-26
MODAL E CONTAINER DO BANNER VIP (GIF/IMAGEM)
========================================================================= */
/* ========================================================================= 27-07-26
MODAL E BUSCADOR DE GIFS DO BANNER VIP (GRADE ORGANIZADA)
========================================================================= */
.gif-banner-modal { position: fixed; inset: 0; width: 100vw; height: 95vh; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 10001; }

.gif-banner-modal-content { background: #fff; padding: 20px; border-radius: 20px; width: min(420px, 92vw); max-height: 90vh; overflow-y: auto; position: relative; display: flex; flex-direction: column; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); -webkit-overflow-scrolling: touch; }

/* Posicionamento no Desktop */
@media (min-width: 992px) {
  .gif-banner-modal { justify-content: flex-end; padding-right: 520px; }
}

/* Posicionamento no Mobile */
@media (max-width: 991px) {
  .gif-banner-modal { justify-content: center; padding-right: 0; }
}

.gif-banner-close { position: absolute; top: 10px; right: 16px; font-size: 24px; font-weight: bold; color: #333; cursor: pointer; user-select: none; z-index: 10; }

.gif-banner-preview-box { width: 100%; height: 180px; border-radius: 14px; background-color: #e2e8f0; background-size: cover; background-position: center; background-repeat: no-repeat; margin-bottom: 12px; border: 1px solid #cbd5e1; flex-shrink: 0; }

/* ABAS DE SELEÇÃO DE PLATAFORMA (GIPHY / PEXELS / PIXABAY) */
#vipBannerModal .media-tabs-wrapper { display: flex; gap: 6px; width: 100%; }

#vipBannerModal .media-tab-btn { flex: 1; padding: 6px 4px; border: 1px solid #cbd5e1; background: #f1f5f9; color: #475569; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }

#vipBannerModal .media-tab-btn.active { background: #020641; color: #fff; border-color: #020641; }

/* GRADE DE IMAGENS E GIFS ORGANIZADA */
#vipBannerModal .giphy-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 180px; overflow-y: auto; background: #f8fafc; padding: 8px; border-radius: 12px; border: 1px solid #e2e8f0; margin-top: 6px; box-sizing: border-box; }

#vipBannerModal .giphy-results-grid img { width: 100%; height: 75px; object-fit: cover; border-radius: 8px; cursor: pointer; transition: transform 0.15s ease,border-color 0.15s ease; border: 2px solid transparent; display: block; }

#vipBannerModal .giphy-results-grid img:hover { transform: scale(1.04); border-color: #020641; }

/* Container do grupo de busca */
.chat-input-group { display: flex; width: 100%; margin-bottom: 4px; }

/* Estilo geral dos inputs */
.chat-input { width: 100%; padding: 10px 14px; font-size: 14px; color: #333; background-color: #fff; border: 1px solid #dcdfe6; border-radius: 8px; outline: none; transition: all 0.2s ease-in-out; border-top-right-radius: 28px; border-bottom-right-radius: 28px; border-bottom-left-radius: 28px; border-top-left-radius: 28px; }

/* Unifica o input com o botão de busca */
.chat-input-group .chat-input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }

/* Efeito de foco profissional nos inputs */
.chat-input:focus { border-color: #0052cc; box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.15); }

/* Botão de Busca */
.chat-btn-search { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 18px; font-size: 14px; font-weight: 600; color: #fff; background-color: #0052cc; border: 1px solid #0052cc; border-top-right-radius: 20px; border-bottom-right-radius: 20px; cursor: pointer; transition: background-color 0.2s ease,transform 0.1s ease; white-space: nowrap; }

.chat-btn-search:hover { background-color: #003d99; border-color: #003d99; }

.chat-btn-search:active { transform: scale(0.98); }

/* Atribuição/Crédito GIPHY */
.chat-attribution { text-align: right; margin-top: 4px; margin-bottom: 12px; font-size: 11px; color: #8c8c8c; }

.chat-attribution span { font-weight: 700; letter-spacing: 0.5px; }

/* Container para label e input direto */
.chat-field-container { width: 100%; margin-top: 12px; margin-bottom: 16px; }

.chat-label { display: block; font-size: 13px; font-weight: 600; color: #4a5568; margin-bottom: 6px; }

/* ===========================================================================
BORDA DO MODAL DO USUARIO VIP Aplica o Tema/Gradiente na borda externa do Modal inteiro 
BORDA E TEMA DO MODAL DO USUARIO VIP (EXCLUSIVO DA ABA VIP)
========================================================================*/
/* A borda e o padding só existem quando o painel possui a classe .vip-mode-active */
/* Borda e Tema ativados no Modal inteiro (Info e VIP) */
/* 1. Zera qualquer borda e padding no modal inteiro */
.profile-panel[class*="banner-anim-"], .profile-panel[class*="banner-grad-"] { padding: 0!important; box-shadow: none!important; }

/* 2. Aplica o Tema/Degradê exclusivamente no corpo do perfil (do banner para baixo) */
.profile-panel[class*="banner-anim-"] .profile-body, .profile-panel[class*="banner-grad-"] .profile-body { background-attachment: fixed; }

/* 3. Deixa a área de informações do usuário e abas transparentes sobre o tema */
.profile-panel[class*="banner-anim-"] .profile-body .profile-tabs, .profile-panel[class*="banner-anim-"] .profile-user-info, .profile-panel[class*="banner-grad-"] .profile-body .profile-tabs, .profile-panel[class*="banner-grad-"] .profile-user-info { background: transparent!important; }

/* 4. Envolve os dados da aba Info em um card branco moderno sobre o tema */
.profile-panel[class*="banner-anim-"] .profile-content, .profile-panel[class*="banner-grad-"] .profile-content { background: #fff; border-radius: 16px; margin: 6px 12px 16px 12px; padding: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }

/* Ajustes dos botões inativos exclusivamente dentro do modo VIP */
.profile-panel.vip-mode-active[class*="banner-anim-"] .profile-tab, .profile-panel.vip-mode-active[class*="banner-grad-"] .profile-tab { background: rgba(255, 255, 255, 0.85); color: #1e1b4b; }

.profile-panel.vip-mode-active[class*="banner-anim-"] .profile-tab.active, .profile-panel.vip-mode-active[class*="banner-grad-"] .profile-tab.active { background: #020641; color: #fff; }

/* ========================================================= 
   ESTRUTURA PARA MENSAGEM EXCLUIDA impede de A TELA SE MEXER TODA 
   ========================================================= */
#chat-container .message.deleted-message-node { margin-top: 4px; margin-bottom: 4px; padding: 6px 12px; background: transparent; border: none; box-shadow: none; }

/* Esconde elementos internos mantendo especificidade alta pelo pai */
#chat-container .message.deleted-message-node .message-click-area, #chat-container .message.deleted-message-node .message-time, #chat-container .message.deleted-message-node .reply-container { display: none; }

/* Caixa fixa para a mensagem excluída */
.msg-deleted-box-fixed { display: flex; align-items: center; gap: 6px; color: #888; font-style: italic; font-size: 0.9rem; min-height: 24px; line-height: 24px; user-select: none; }

/* ====================================================================================
COMPACTAÇÃO TOTAL DE MENSAGENS EXCLUIDAS (SEM ESPAÇAMENTO) PARA EVITAR QUEBRAR O LAYOUT
=====================================================================================*/
#chat-container .message.deleted-message-node { margin-top: 0; margin-bottom: 0; padding-top: 1px; padding-bottom: 1px; min-height: 0; background: transparent; }

#chat-container .message.deleted-message-node .msg-deleted-box { display: flex; align-items: center; gap: 6px; color: #888; font-style: italic; font-size: 0.88rem; line-height: 1.2; min-height: 20px; padding: 1px 0; user-select: none; }

#chat-container .message.deleted-message-node .msg-deleted-box { font-size: 0.85rem; color: #a0a0a0; }

/* ================= PULL TO REFRESH / INFINITE SCROLL INVERSO (UX NATIVA) ================= */
#chat-container { overscroll-behavior-y: contain; /* Trava a atualização nativa da página no mobile */ }

.pull-to-refresh-spinner { display: none; width: 100%; padding: 12px 0 6px; text-align: center; justify-content: center; align-items: center; pointer-events: none; z-index: 100; background: #fff; }

.pull-to-refresh-spinner.visible { display: flex!important; }

/* Círculo flutuante no estilo nativo iOS/Android */
.pull-to-refresh-spinner .spinner-box { width: 10px; height: 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; }

/* Única seta preta */
.pull-to-refresh-spinner .spinner-box i { font-size: 28px; color: #222; /* Cor preta padrão de app */ display: inline-block; line-height: 1; font-weight: bold; }

/* Animação de rotação contínua */
.pull-to-refresh-spinner.spinning .spinner-box i { animation: spinnerRotate 0.75s linear infinite; }

@keyframes spinnerRotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* ========================================================================= 
   ESTRUTURA POR EXPANSÃO ACOPLADA (ACCORDION DE DENUNCIA) - UX CHAT-DF
   ========================================================================= */

.custom-accordion-select { position: relative; width: 100%; margin-bottom: 20px; }

/* Caixa Principal do Select */
.accordion-select-trigger { width: 100%; min-height: 48px; padding: 12px 16px; background: #f9f9f9; border: 1px solid #ccc; border-radius: 8px; display: flex;
 align-items: center; justify-content: space-between; cursor: pointer; font-size: 15px; color: #333; user-select: none; transition: border-color 0.2s ease,background-color 0.2s ease; }

/* Seta com Animação de Giro Smooth (180°) */
.accordion-arrow { font-size: 14px; color: #666; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.custom-accordion-select.open .accordion-arrow { transform: rotate(180deg); }

.custom-accordion-select.open .accordion-select-trigger { border-color: #bfbfbf; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Lista Expansível (Expandindo Exclusivamente para Baixo) */
.accordion-select-dropdown { width: 100%; background: #fff; border: 1px solid #bfbfbf; border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; 
  /* Limite de altura proporcional para exibir no máximo 3 itens e rolar o restante */ 
  max-height: 144px; /* 48px x 3 itens */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }

.accordion-select-dropdown.hidden { display: none!important; }

/* Itens da Lista com Requisito Mobile (Touch Target 48px) */
.accordion-option { min-height: 48px; padding: 12px 16px; display: flex; align-items: center; font-size: 14px; color: #444; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background-color 0.15s ease,color 0.15s ease; }

.accordion-option:last-child { border-bottom: none; }

.accordion-option:active, .accordion-option:hover { background-color: #f0f8ff; color: #00a2d3; }
.accordion-option.selected { background: #a6a6a6; color: #fff; font-weight: 600; }

/* ========================================================
   RODAPÉ PERSONALIZADO (SEM BOOTSTRAP) - CHAT-DF
   ======================================================== */
.custom-footer { background-color: #fff; color: #333; padding: 45px 20px 20px 20px; border-top: 1px solid #e5e7eb; font-family: 'Poppins',sans-serif; }

.footer-container { max-width: 1200px; margin: 0 auto; }

.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 30px; }

/* Títulos */
.footer-title { color: #1f2937; /* Grafite escuro */ font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }

/* Descrição e Textos */
.footer-description { color: #4b5563; /* Grafite médio */ font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; }

/* Redes Sociais */
.social-links { display: flex; gap: 15px; font-size: 1.2rem; }

.social-links a { color: #4b5563; transition: color 0.2s ease,transform 0.2s ease; }

.social-links a:hover { color: #0d6efd; /* Azul de destaque no hover */ transform: translateY(-2px); }

/* Listas de Links */
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.footer-links li a { color: #6b7280; /* Cinza */ text-decoration: none; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; transition: color 0.2s ease; }

.footer-links li a:hover { color: #111827; /* Preto suave no hover */ }

.footer-links li a i { font-size: 0.75rem; color: #9ca3af; }

/* Linha Divisória */
.footer-divider { border: 0; border-top: 1px solid #e5e7eb; margin: 30px 0 20px 0; }

/* Direitos Autorais */
.footer-bottom { text-align: center; color: #6b7280; font-size: 0.85rem; }

.footer-bottom a { color: #374151; text-decoration: underline; }

/* Responsividade Mobile (Telas pequenas) */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .social-links { justify-content: center; }
  .footer-links li a { justify-content: center; }
}

/* ========================================================
   AJUSTE DE ESPAÇAMENTO E LAYOUT - PÁGINA DE CONTATO CHAT-DF
    DESIGN PREMIUM DO FORMULÁRIO DE CONTATO (CHAT-DF UX)
   ======================================================== */
#contato.contato-page-section { padding-top: 130px; /* Afasta a seção para não ficar por baixo da navbar fixa */ padding-bottom: 90px; /* Espaçamento confortável em relação ao rodapé */ min-height: calc(100vh - 200px); /* Garante que preencha a tela sem achatar */ display: flex; align-items: center; }

#contato .contato-title-left { text-align: left; margin-bottom: 16px; }

#contato .contato-list-items li { font-size: 0.95rem; line-height: 1.6; }

.contato-card-form { background: #fff; border-radius: 20px; padding: 32px 28px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); border: 1px solid #e2e8f0; }

/* Ícones internos dos inputs */
.contato-input-group { position: relative; display: flex; align-items: center; }

.contato-input-icon { position: absolute; left: 14px; color: #94a3b8; font-size: 1.1rem; pointer-events: none; z-index: 5; }

.contato-input-group .form-control { padding-left: 42px; height: 48px; border-radius: 12px; border: 1px solid #cbd5e1; font-size: 0.95rem; color: #1e293b; background-color: #f8fafc; transition: all 0.2s ease; }

.contato-input-group textarea.form-control { height: auto; padding-top: 12px; }

/* Efeito ao clicar no campo */
.contato-input-group .form-control:focus { background-color: #fff; border-color: #0d6efd; box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12); }

.contato-input-group .form-control:focus + .contato-input-icon, .contato-input-group:focus-within .contato-input-icon { color: #0d6efd; }

/* Botão Centralizado */
.contato-btn-submit { background: #020641; color: #fff; border: none; padding: 12px 32px; border-radius: 10px; font-weight: 600; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 14px rgba(13, 110, 253, 0.3); transition: transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease; }

.contato-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4); }

.contato-btn-submit:active { transform: scale(0.98); }
/* RESPONSIVIDADE MOBILE - CENTRALIZAÇÃO DO CONTATO */
@media (max-width: 991px) {
  #contato .contato-title-left { text-align: center; }
  #contato .col-lg-5 { text-align: center; }
  #contato .contato-list-items { text-align: left; display: inline-block; }
}

/* ========================================================================= 
   SEÇÃO DE RECURSOS / SOBRE CHAT-DF (CUSTOM CSS NATIVO - SEM BOOTSTRAP)
   ========================================================================= */

.chatdf-features-section { background-color: #fff; border-top: 1px solid #eef2f6; padding: 140px 20px; width: 100%; }

.chatdf-features-container { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 220px; /* Espaçamento bem amplo entre um bloco e o outro */ }

.chatdf-feature-block { display: flex; align-items: center; justify-content: space-between; gap: 60px; }

.chatdf-feature-block.reverse { flex-direction: row-reverse; }

/* Coluna Visual da Imagem */
.chatdf-feature-visual { flex: 0 0 40%; display: flex; justify-content: center; align-items: center; }

.chatdf-image-card { width: 550px; }

/* Coluna de Textos */
.chatdf-feature-info { flex: 0 0 55%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }

/* Pills de Categoria */
.chatdf-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 14px; }

.chatdf-pill.pill-blue { background-color: #e0edff; color: #0b57d0; }

.chatdf-pill.pill-green { background-color: #e6f7ec; color: #0d8338; }

.chatdf-pill.pill-purple { background-color: #f2eaff; color: #6929c4; }

/* Tipografia */
.chatdf-feature-title { font-size: 30px; font-weight: 700; color: #0d0e3e; line-height: 1.25; margin: 0 0 16px 0; letter-spacing: -0.5px; }

.chatdf-feature-text { font-size: 16px; line-height: 1.7; color: #4b5563; margin: 0 0 12px 0; }

.chatdf-feature-subtext { font-size: 14.5px; line-height: 1.6; color: #6b7280; margin: 0 0 18px 0; }

/* Destaque Regional */
.chatdf-regional-highlight { display: flex; align-items: flex-start; gap: 10px; background-color: #f9fbff; border: 1px dashed #bfdbfe; border-radius: 12px; padding: 12px 16px; font-size: 14px; color: #334155; margin-bottom: 20px; line-height: 1.5; }

.chatdf-regional-highlight i { color: #dc2626; font-size: 17px; margin-top: 1px; }

/* Tags/Ícones Inferiores */
.chatdf-feature-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.chatdf-tag-item { display: inline-flex; align-items: center; gap: 7px; background-color: #f4f6f8; border: 1px solid #e5e7eb; color: #1f2937; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; }

.chatdf-tag-item i { color: #0d6efd; font-size: 14px; }

/* ========================================================================= 
   RESPONSIVIDADE MOBILE DA SEÇÃO DE RECURSOS
   ========================================================================= */
@media (max-width: 991px) {
  .chatdf-features-section { padding: 60px 16px; }
  .chatdf-features-container { gap: 70px; }
  .chatdf-feature-block, .chatdf-feature-block.reverse { flex-direction: column; text-align: center; gap: 30px; }
  .chatdf-feature-info, .chatdf-feature-visual { flex: 0 0 100%; width: 100%; align-items: center; text-align: center; }
  .chatdf-feature-title { font-size: 23px; }
  .chatdf-feature-tags { justify-content: center; }
  .chatdf-regional-highlight { text-align: left; }
}

/* ========================================================================= 
   BOTÕES DE TOPO VIP & VOLTAR (CANTO SUPERIOR ESQUERDO)
   ========================================================================= */
.vip-back-btn, .vip-top-btn { position: absolute; top: 14px; left: 14px; height: 38px; border: none; background: rgba(0, 0, 0, 0.26); border-radius: 999px; color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; cursor: pointer; z-index: 10; backdrop-filter: blur(4px); transition: transform 0.15s ease,background-color 0.2s ease; -webkit-tap-highlight-color: transparent; }

.vip-back-btn { width: 38px; padding: 0; border-radius: 50%; font-size: 18px; }

.vip-top-btn i { color: #00d2ff; font-size: 16px; }

.vip-back-btn:hover, .vip-top-btn:hover { background: rgba(0, 0, 0, 0.45); transform: scale(1.04); }

.vip-back-btn:active, .vip-top-btn:active { transform: scale(0.95); }

/* Painel VIP Isolado */
.vip-standalone-panel { display: block; animation: profileFade 0.2s ease; }

.vip-standalone-panel.d-none { display: none!important; }

/* Oculta botão VIP do topo quando estiver vendo perfil de outros */
body.viewing-other-profile .vip-back-btn, body.viewing-other-profile .vip-top-btn { display: none!important; }
/* =============================================================
Reposiciona a tag de expiração para não cobrir o botão voltar vip 
=============================================================*/
/* Reposiciona a tag de expiração VIP abaixo do botão voltar */
#profilePanel .profile-cover #vipTopExpiryRow { top: 20px; left: 94px; }

/* ========================================================
   MODAL DE SELEÇÃO TROCA DE SALAS (CHAT-DF UX)
   ======================================================== */
/* ========================================================
   MODAL DE SELEÇÃO TROCADE SALAS (ALINHAMENTO PERFEITO)
   ======================================================== */
#roomsModal .rooms-list-grid { display: flex; flex-direction: column; gap: 8px; max-height: 470px; overflow-y: auto; padding: 4px 6px 4px 2px; width: 100%; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; }

#roomsModal .rooms-list-grid::-webkit-scrollbar { width: 5px; }

#roomsModal .rooms-list-grid::-webkit-scrollbar-track { background: transparent; }

#roomsModal .rooms-list-grid::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 999px; }

/* BOTÃO DE CADA SALA 100% ALINHADO */
#roomsModal .btn-change-room { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; cursor: pointer; text-align: left; box-sizing: border-box; transition: background-color 0.15s ease,border-color 0.15s ease,transform 0.15s ease; }

#roomsModal .btn-change-room:hover { background: #f1f5f9; border-color: #cbd5e1; transform: translateX(2px); }

/* ÍCONE E NOME FIXADOS À ESQUERDA */
#roomsModal .room-btn-content { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-align: left; }

/* QUADRADO ROXO DO ÍCONE */
#roomsModal .room-btn-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

#roomsModal .room-btn-icon i { font-size: 20px; color: #2d00f3; }

/* NOME DA SALA */
#roomsModal .room-btn-text { flex: 1; min-width: 0; text-align: left; }

#roomsModal .room-btn-text strong { font-size: 15px; font-weight: 700; color: #1e1b4b; display: block; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* SETINHA FIXA NO CANTO DIREITO */
#roomsModal .btn-change-room .arrow-icon { color: #94a3b8; font-size: 13px; flex-shrink: 0; margin-left: 8px; }

#roomsModal .btn-change-room:hover .arrow-icon { color: #5b21b6; }

/* ========================================================================= 
   TAGS DE GOSTOS & HOBBIES DO DF (PILLS DE INTERESSES + MICRO-INTERAÇÃO)
   ========================================================================= */

.profile-tags-container { width: 100%; }
.profile-interests-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; box-sizing: border-box; }

.interest-pill { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; min-width: 0; min-height: 30px; background: #f1f5f9; 
  border: 1px solid #cbd5e1; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #334155; cursor: pointer; user-select: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }

.interest-pill span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; text-align: center; }

.interest-pill:hover { background: #e2e8f0; border-color: #94a3b8; }

.interest-pill:active { transform: scale(0.94); }

/* Quando a tag é curtida pelo visitante */
.interest-pill.liked { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); }

.interest-pill.liked .interest-like-icon { color: #ef4444; animation: heartPulse 0.3s ease; }

/* Contador de curtidas na pílula */
.interest-like-badge { background: rgba(0, 0, 0, 0.08); color: inherit; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 12px; margin-left: 2px; }

.interest-pill.liked .interest-like-badge { background: #dbeafe; color: #1d4ed8; }

/* Quando o dono do perfil está vendo (desabilita clique de like) */
.interest-pill.owner-view { cursor: default; }
.interest-pill.owner-view:hover { background: #f1f5f9; border-color: #cbd5e1; }

@keyframes heartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* --- Grade de Seleção na Aba Editar Perfil --- */
.interests-selector-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 170px; overflow-y: auto; padding: 4px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; }

.interest-toggle-btn { background: #fff; border: 1px solid #d1d5db; border-radius: 20px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; color: #4b5563; cursor: pointer; transition: all 0.15s ease; }

.interest-toggle-btn:hover { border-color: #2563eb; color: #2563eb; }

.interest-toggle-btn.selected { background: #020641; border-color: #020641; color: #fff; }

/* ========================================================================= 
   CORES PASTEL TEMÁTICAS POR CATEGORIA (TAGS GOSTOS & HOBBIES)
   ========================================================================= */

/* 1. Lugares do DF (Verde Esmeralda Suave) */
.interest-pill.tag-cat-lugares { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.interest-pill.tag-cat-lugares:hover { background: #d1fae5; border-color: #6ee7b7; }

/* 2. Música (Roxo / Índigo Suave) */
.interest-pill.tag-cat-musica { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }
.interest-pill.tag-cat-musica:hover { background: #ede9fe; border-color: #c4b5fd; }

/* 3. Hobbies, Jogos e Estudo (Azul Cobalto Suave) */
.interest-pill.tag-cat-hobbies { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.interest-pill.tag-cat-hobbies:hover { background: #dbeafe; border-color: #93c5fd; }
/* 4. Religião & Fé (Âmbar / Dourado Espiritual Suave) */
.interest-pill.tag-cat-religiao { background: #fefce8; border-color: #fef08a; color: #854d0e; }
.interest-pill.tag-cat-religiao:hover { background: #fef9c3; border-color: #fde047; }

/* 5. Artes Marciais & Lutas (Terracota / Coral Suave) */
.interest-pill.tag-cat-luta { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.interest-pill.tag-cat-luta:hover { background: #ffe4e6; border-color: #fda4af; }

/* USUARIO de Online no Modal de Troca de Sala */
#roomsModal .room-btn-right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }

#roomsModal .room-online-badge { background: #ecfdf3; color: #0a7a31; border: 1px solid #d4f5df; font-size: 12px; font-weight: 700; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

#roomsModal .room-online-badge.lotada { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }