/* ==========================================================================
   🌌 CONFIGURAÇÕES MATRIZ DO PALCO DO DIÁRIO (JOURNAL.CSS)
   ========================================================================== */
@font-face {
    font-family: 'PokemonClassic';
    src: url('/fonts/pokemon-classic.ttf') format('truetype'); /* Ajuste se sua pasta de fontes diferir */
}

* {
    box-sizing: border-box;
}
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #FAF4ED;
    
    /* 🎯 O SEGREDO DA CENTRALIZAÇÃO NA BASE:
       • 16: Move o clique para o MEIO horizontal (metade de um quadrado clássico de 32px).
       • 32: Desce o clique até o CHÃO vertical da imagem (a base do lápis).
       • [32 32]: Força o navegador a encolher o arquivo para o tamanho padrão de segurança! */
    cursor: url('/journal/decor/others/bluechunkypencil.webp') 0 0, auto !important;
}


.journal-stage-universe {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}


.desktop-mesa-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ==========================================================================
   🖼️ MÓDULO DAS DECORAÇÕES FIXAS DA MESA
   ========================================================================== */
.static-decor {
    position: absolute;
    z-index: 10;
    pointer-events: auto;
}
.static-decor img {
    display: block;
    width: 100%;
    height: auto;
}

/* Posições aproximadas com base no seu design visual */
.item-pencilcase { top: 7%; left: 5%; width: 31vw; }
.item-micecraft { top: 22%; left: 28%; width: 7vw; z-index: 5; transition: opacity 0.4s ease; }
.item-whiterabbit-wrap { bottom: 3%; left: 4%; width: 18vw; }
.item-bluelollipop { bottom: 15%; left: 1%; width: 13vw; }
.item-cinnamilk { bottom: 8%; right: 2%; width: 13vw; }
.item-calendar { top: 16%; left: 7%; width: 8vw; }
.item-unicorn { top: 13%; right: 18%; width: 17vw; }
.item-homebutton { bottom: 42%; left: 2%; width: 7vw; transition: transform 0.2s ease; }
.item-homebutton:hover { transform: scale(1.08) rotate(-3deg); cursor: url('/journal/decor/others/bluechunkypencil.webp'), auto !important; }   

/* 🍬 ESTILIZAÇÃO DO CHICLETE PLAYER */
.item-earphones-bubblegum {
    top: 8%;
    right: 1%;
    width: 15vw;
  cursor: url('/journal/decor/others/bluechunkypencil.webp'), auto !important;
    transition: transform 0.3s ease;
}
.item-earphones-bubblegum:hover {
    transform: scale(1.04);
}
.audio-pulse-glow {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 80% !important;
    height: 80% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    
    /* 🎯 REMOVIDO: Sombra zerada para apagar qualquer linha ou aura rosa */
    box-shadow: none !important; 
    pointer-events: none !important;
    z-index: -1 !important;
}

/* 🎯 REMOVIDO: Desativa a animação de pulso para o botão ficar totalmente estático */
.audio-playing .audio-pulse-glow {
    animation: none !important;
}
@keyframes bubbleAudioPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 143, 203, 0.6); }
    100% { box-shadow: 0 0 0 16px rgba(255, 143, 203, 0); }
}

/* ==========================================================================
   🎯 ENGENHARIA MESTRE DE POSICIONAMENTO DO DIÁRIO
   ========================================================================== */
.journal-book-core-container {
    position: absolute;
    width: 62vw;
    height: 82vh;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.journal-graphic-view {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/* Estado Fechado */
.closed-view {
  cursor: url('/journal/decor/others/bluechunkypencil.webp'), auto !important;
    width: 27vw; /* Diário compacto no centro */
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.closed-view:hover {
    transform: scale(1.02) rotate(1deg);
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
}

/* Estado Aberto ocultado por padrão */
.open-view-wrapper {
    display: none;
    position: relative;
    top: -4%;
    left: -1%;
    width: 118%;
    height: 118%;
}
.journal-open-backdrop {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* ==========================================================================
   🗂️ ENQUADRAMENTO DA FOLHA ESQUERDA (MOLDURA DE ARQUIVO E SELEÇÃO)
   ========================================================================== */
.journal-left-archive-panel {
    position: absolute;
    top: 20%;
    left: 15%;
    width: 36%;
    height: 50%;
    padding-right: 15px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.archive-widget-title {
    font-family: 'PokemonClassic', monospace;
    font-size: 10px;
    color: #5B5D8E;
    border-bottom: 1px dotted #5B5D8E;
    padding-bottom: 4px;
    text-transform: lowercase;
}

.archive-tree-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.archive-tree-scroll::-webkit-scrollbar { display: none; }

.archive-year-node {
    font-family: 'MS Gothic', sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #5B5D8E;
    cursor: url('/journal/decor/others/bluechunkypencil.webp'), auto !important;
    margin-top: 4px;
}
.archive-months-nest {
    display: flex;
    flex-direction: column;
    padding-left: 12px;
    gap: 2px;
}
.archive-month-item {
    font-family: 'MS Gothic', sans-serif;
    font-size: 11px;
    color: #767AA8;
      cursor: url('/journal/decor/others/bluechunkypencil.webp'), auto !important;
}
.archive-month-item:hover, .archive-month-item.active-filter {
    color: #ABD1FF;
    font-weight: bold;
}

.archive-tags-cloud-deck {
    height: 24%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}
.archive-tags-cloud-deck::-webkit-scrollbar { display: none; }

.archive-inline-tag {
    font-family: 'MS Gothic', sans-serif;
    font-size: 10px;
    background-color: #FAF4ED;
    color: #5B5D8E;
    border: 1px dashed #5B5D8E;
    padding: 2px 5px;
    border-radius: 4px;
    cursor: url('/journal/decor/others/bluechunkypencil.webp'), auto !important;
}
.archive-inline-tag:hover, .archive-inline-tag.active-tag-filter {
    background-color: #98A5D2;
    color: #FFFFFF;
}

/* ==========================================================================
   📄 ENQUADRAMENTO DA FOLHA DIREITA (LOG DE TEXTO CRÔNICO)
   ========================================================================== */
.journal-right-posts-panel {
    position: absolute;
    top: 20%;
    right: 9%;
    width: 38%;
    height: 72%;
    z-index: 25;
}

.journal-posts-scroll-jaula {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Separação confortável de cada entry */
}
.journal-posts-scroll-jaula::-webkit-scrollbar { display: none; }

/* Bloco unitário de cada folha escrita */
.journal-entry-card {
    width: 100%;
    border-bottom: 1px dotted #A9B2A3;
    padding-bottom: 15px;
}
.journal-entry-card:last-child {
    border-bottom: none;
}

/* Configuração de Título e Rainbow */
.journal-header-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Permite a quebra de linha natural se o título for imenso */
    gap: 8px;
    margin-bottom: 6px;
}

.journal-rainbow-title {
    font-family: "MS Gothic", sans-serif;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    background: linear-gradient(to right, #ff5cc7, #ffd485, yellow, #8fff8f, #8e8eff, #ffafff, #ff6b6b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: journalRainbowShift 4s linear infinite;
}
@keyframes journalRainbowShift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.journal-entry-date {
    font-family: 'MS Gothic', sans-serif;
    font-size: 11px;
    color: #5B5D8E;
    font-weight: bold;
    white-space: nowrap;
}

.journal-updated-badge {
    height: 14px;
    width: auto; /* Remove de vez os 10% antigos para a imagem não esticar */
    flex-shrink: 0;
    vertical-align: middle;
    display: inline-block;
    margin-left: -2px; /* Micro ajuste para colar na última letra do título */
}



/* Ficha técnica Creme das Tags */
.journal-specs-deck {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}
.journal-spec-line {
    font-family: 'MS Gothic', sans-serif;
    font-size: 9px;
    color: #000000;
}
.journal-spec-line span {
    font-weight: bold;
    color: #5B5D8E; /* Cor exigida 5B5D8E */
}


/* Corpo Crônico do Diário */
.journal-chronicle-body {
    font-family: 'MS Gothic', sans-serif;
    font-size: 10px;
    line-height: 1.5;
    color: #000000; /* Cor exigida Preto */
    text-align: justify;
    margin: 0;
}
.journal-chronicle-body p {
    margin-top: 0;
    margin-bottom: 8px;
}
.journal-chronicle-body p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   📐 ATIVAÇÃO DO DISPARO DA TRANSIÇÃO DOS DOIS ESTADOS (TRIGGER ENGINE)
   ========================================================================== */
/* Mudanças na mesa quando a classe .journal-opened entra na div mestre */
.journal-opened .closed-view {
    display: none;
}
.journal-opened .open-view-wrapper {
    display: block;
}
.journal-opened .item-micecraft {
    opacity: 0; /* Esconde o ratinho debaixo da folha esquerda */
    pointer-events: none;
}

/* Comportamento das decorações móveis ao abrir */
.shifting-decor {
    position: absolute;
    z-index: 30;
    pointer-events: auto;
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.shifting-decor img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   📐 DECORAÇÕES MÓVEIS: ESTADO 1 (DIÁRIO FECHADO - POSIÇÕES ORIGINAIS)
   ========================================================================== */
.item-whiterabbit-candies { 
    bottom: 3% !important; 
    left: 2% !important; 
    width: 15vw !important; 
    z-index: 30 !important; /* Começam na frente da mesa e do livro fechado */
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.item-pokemon-marker { 
    top: 26% !important; 
    right: 2% !important; 
    width: 13vw !important;  
    z-index: 30 !important;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.item-black-pen { 
    bottom: -3% !important; 
    right: -6% !important; 
    width: 14vw !important;  
    z-index: 30 !important;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ==========================================================================
   📐 DECORAÇÕES MÓVEIS: ESTADO 2 (DIÁRIO ABERTO - ESCONDIDOS ATRÁS DO DIÁRIO)
   ========================================================================== */
.journal-opened .item-whiterabbit-candies { 
    bottom: 3% !important; 
    left: -21% !important; 
    width: 15vw !important; 
    /* 🎯 INVERSÃO DE CAMADA SUPREMA: Valores negativos forçam o navegador a 
       chutar a imagem para trás de qualquer outra tag que esteja na mesma caixa! */
    z-index: -1 !important; 
}

.journal-opened .item-pokemon-marker { 
    top: 26% !important; 
    right: -9% !important; 
    width: 13vw !important; 
    transform: rotate(5deg) !important; 
    z-index: -1 !important; /* Joga o Gengar para baixo do fundo do papel do livro aberto */
      image-rendering: crisp-edges !important;
}

.journal-opened .item-black-pen { 
    bottom: 0% !important; 
    right: -12% !important; 
    width: 14vw !important; 
    transform: rotate(-15deg) !important; 
    z-index: -1 !important; /* Joga a caneta transparente para trás da folha direita */
      image-rendering: crisp-edges !important;
}

/* ==========================================================================
   🧱 ESCUDO DE BASE DO LIVRO: FORÇA A TEXTURA A FICAR POR CIMA
   ========================================================================== */
/* Adicione esta regra rápida logo abaixo para consolidar a barreira visual! */
.journal-open-backdrop {
    position: relative !important;
    z-index: 0 !important; /* Fica no chão da caixa, mas ainda por cima de elementos com z-index negativo (-1)! */
}


/* ==========================================================================
   🌸 OVERLAY: MOLDURA DE RENDA DE ROSAS AZUIS FX
   ========================================================================== */
.journal-master-lace-frame {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 15 !important;
    
    /* Força a imagem a se esticar cobrindo as bordinhas do monitor perfeitamente */
    object-fit: fill !important; 
    
    /* 🎯 O SEGREDO SUPREMO: Um z-index gigante joga ela no topo, 
       mas o pointer-events: none permite que o mouse clique em tudo por trás dela! */
    pointer-events: none !important;
    

}


.journal-specs-deck {
    /* Força o contêiner a encolher ao redor das palavras sem criar vãos gigantes */
    display: table !important; 
    width: auto !important;
    max-width: 86% !important; /* Margem de respiro do papel */
    
    /* Centralização absoluta horizontal garantida na folha direita */
    margin: 14px auto !important;
    padding: 10px 14px !important;
    
    /* ALINHAMENTO INTERNO: Garante que os blocos comecem organizados da esquerda */
    text-align: left !important;
    
    /* TEXTURA DE FUNDO: Repete o padrão quadriculado de 60px em mosaico */
    background: url('/journal/decor/others/bgsimple-1.png') repeat !important;
    
    /* MOLDURA RENDADA COM CLIP INTERNO (O fundo não escapa pelas frestas) */
    border: 12px solid transparent !important;
    border-image: url('/journal/decor/others/laceframe.png') 16 repeat !important;
    background-clip: padding-box !important; 
}

.journal-specs-deck::after {
    display: none !important;
    content: none !important;
}

/* 🎯 CORREÇÃO CRÍTICA DE FILEIRA: inline-flex faz as tags sentarem lado a lado 
   na mesma linha, aproveitando todo o espaço físico horizontal antes de quebrar! */
.journal-spec-line {
    display: inline-flex !important;
    align-items: center !important;
    text-align: left !important;
    font-family: 'MS Gothic', sans-serif !important;
    font-size: 11px !important;
    color: #464B54 !important;
    
    /* Margem sutil de respiro para empurrar a próxima tag que se alinhar ao lado */
    margin-right: 14px !important; 
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
}

.journal-spec-line span {
    font-weight: bold !important;
    color: #5B5D8E !important;
    margin-right: 4px !important;
}

/* 🔮 DESTRAVA JOGOS, ANIMADOS E ICONS: Mantém o tamanho fixado sem congelar quadros */
.journal-spec-icon-asset {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important; 
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 5px !important;
    transform: none !important;
}



/* ==========================================================================
   🌸 MÓDULO MASCOTE FLOAT: TEXTO FLUIDO AO LADO DO PERSONAGEM
   ========================================================================== */
.journal-avatar-speech-row {
    float: left !important;
    position: relative !important;
    display: inline-block !important;
    
    /* 🎯 O SEGREDO DO ESPAÇO: Travamos uma largura física ligeiramente maior 
       (largura do avatar 44px + avanço do balão). Isso empurra o início do 
       texto em MS Gothic para o lado, limpando a frente do speech bubble! */
    width: 48px !important; 
    height: 44px !important; /* Casando com a altura do seu avatar */
    
    margin-top: 4px !important;
    margin-right: 14px !important; /* Espaço sutil de respiro para o parágrafo não colar */
    margin-bottom: 5px !important;
    padding-left: 2px !important;
}

/* 🐰 AVATAR AMPLIADO: Mantido do seu tamanho calibrado */
.journal-post-avatar-asset {
    height: 44px !important; 
    width: auto !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 💬 BALÃO DE FALA SUSPENSO: Posição recalculada para a nova largura */
.journal-post-speech-asset {
    height: 13px !important; 
    width: auto !important;
    display: block !important;
    
    position: absolute !important;
    top: -9px !important; 
    /* 🚀 SINTONIA FINA: Deslocado levemente para encaixar dentro do limite 
       dos 48px protegidos, saindo perfeitamente da orelha da coelhinha */
    left: 26px !important; 
    z-index: 3 !important;
}
/* ==========================================================================
   💙 WIDGET: BACK TO TOP TEXT + BLUE PIXEL ARROW COMPONENT
   ========================================================================== */
/* 1. BOTÃO DA FOLHA ESQUERDA (Timeline/Tags - Fixo no seu HTML) */
.journal-btt-fixed-deck {
    position: absolute !important;
    
    /* 🛠️ COORDENADAS DA FOLHA ESQUERDA: Ajustadas para o rodapé esquerdo do papel,
       sumindo de cima do post-it do Cinnamoroll */
    bottom: 12px !important;    
    left: 20px !important;     
    
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important; 
    cursor: pointer !important;
    z-index: 99999 !important;  
    
    /* ESTADO PADRÃO: Nasce invisível e recolhido para o JS ativar com o scroll */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* CLASSE DE ATIVAÇÃO DA FOLHA ESQUERDA: Disparada quando o scroll_esquerdo > 10 */
.journal-btt-fixed-deck.btt-visible {
    opacity: 0.6 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* RÓTULO ESCRITO: Força a identidade MS Gothic e a cor azul lilás em ambos */
.journal-btt-text-label,
.journal-btt-fixed-deck span {
    font-family: 'MS Gothic', sans-serif !important;
    font-size: 10px !important;
    color: #5B5D8E !important; /* Cor exigida 5B5D8E */
    font-weight: bold !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.journal-btt-pixel-btn {
    width: 13px !important;
    height: auto !important;
    display: block !important;
}

/* 2. 🎯 BOTÃO DA FOLHA DIREITA (Posts - Restaura e fixa flutuando por cima do texto) */
#rightBttDeck.journal-btt-wrapper {
    position: absolute !important;
    
    /* Suas coordenadas customizadas salvas e travadas */
    bottom: -20px !important;   
    left: 20px !important;     
    
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    z-index: 999999 !important; /* Camada ultra alta para permitir o clique */
    
    /* Começa ocultado e aguarda o sinal do JS (> 10px) */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* 🎯 CLASSES DE ATIVAÇÃO: Disparadas pelo monitoramento do seu JS */
/* Acende o botão esquerdo fixo */
.journal-btt-fixed-deck.btt-visible {
    opacity: 0.6 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Acende o botão flutuante dinâmico da direita */
#rightBttDeck.btt-visible {
    opacity: 0.8 !important;   
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Rótulo escrito para o botão dinâmico */
#rightBttDeck.journal-btt-wrapper span {
    font-family: 'MS Gothic', sans-serif !important;
    font-size: 10px !important;
    color: #04B0B6 !important; /* Cor ciano/azul combinando com a seta */
    font-weight: bold !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Efeito de destaque no mouse para ambos os botões */
.journal-btt-fixed-deck.btt-visible:hover,
#rightBttDeck.btt-visible:hover {
    opacity: 1 !important;      
}



/* ==========================================================================
   🌈 DECORAÇÃO: WELCOME RAINBOW BUN GIF NO POST-IT ESQUERDO
   ========================================================================== */
.journal-welcome-gif-postit-box {
    width: 50% !important;
    display: flex !important;
    justify-content: center !important; /* Centraliza o coelhinho horizontalmente na largura do post-it */
    margin-bottom: 12px !important; /* Afasta o GIF do título 'timeline map' para não esmagar */
    padding-top: 4px !important;
}

.journal-welcome-rainbow-bun-asset {
    width: 85% !important; 
    height: auto !important;
    display: block !important;
    image-rendering: auto !important; 

    /* 🎯 REPARO SUPREMO: Ignora as travas do flex e desloca a imagem para a esquerda!
       • -10px empurra um pouco.
       • -25px ou -30px chuta ele bem mais para a esquerda.
       Mude este número negativo até ele sentar onde você quer! */
    transform: translateX(-50px) !important;
    -webkit-transform: translateX(-50px) !important;
}



/* ==========================================================================
   🐰 ADESIVO LIVRE: COELHINHO SOLTO NO DIÁRIO ABERTO
   ========================================================================== */
.journal-sticker-welcome-bun {
    position: absolute !important;
    
    /* 🎯 CONTROLE DE COORDENADAS: Altere estes valores para mover o coelho!
       • top: controla a altura de cima para baixo (0% topo, 100% rodapé).
       • left: controla a posição horizontal (0% extremo esquerdo, 100% extremo direito). */
    bottom: 5% !important; 
    right: 53% !important; 
    
    /* 📐 Controle de Tamanho */
    width: 60px !important; /* Ajuste os pixels para deixar ele maior ou menor */
    height: auto !important;
    
    /* Garante que ele flutue acima do papel do livro aberto */
    z-index: 22 !important; 
    pointer-events: none !important; /* O mouse ignora o boneco para você conseguir clicar nas coisas por trás */
}

/* ==========================================================================
   🐰 ADESIVO LIVRE: POTINHO DE COELHOS NO DIÁRIO ABERTO
   ========================================================================== */
.journal-sticker-bunnyjar {
    position: absolute !important;
    bottom: 5% !important; 
    right: 58.5% !important; 
    width: 30px !important; 
    height: auto !important;
    z-index: 22 !important; 
    pointer-events: none !important; 
}


/* ==========================================================================
   🎀 CAIXINHA DE AVISO RENDADA (POSICIONAMENTO TOTALMENTE LIVRE)
   ========================================================================== */
.journal-trigger-warning-card {
    /* 🎯 POSICIONAMENTO LIVRE: Altere estes valores para mover a caixinha pela folha!
       • top: controla a altura de cima para baixo (0% topo, 100% rodapé)
       • left: controla a posição horizontal de um lado ao outro */
    position: absolute !important;
    top: 18% !important; 
    left: 27% !important; 
    
    /* 📐 Ajuste de tamanho recomendado para caber na folha esquerda */
    width: 23% !important;
    height: 160px !important; /* Altura limite controlada */
    
    /* 🧱 ENGENHARIA DA BORDA RENDADA DE 60PX (Mosaico Perfeito) */
    border: 12px solid transparent !important;
    border-image: url('/journal/decor/others/laceframe.png') 16 repeat !important;
    background: url('/journal/decor/others/bk14.jpg') repeat !important;
    background-clip: padding-box !important; /* Trava o fundo e impede de vazar nas frestas */
    pointer-events: auto !important; 
    z-index: 25 !important;
}

/* 📜 JAULA DE SCROLL INTERNO INVISÍVEL */
.journal-tw-internal-scroll {
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: row !important; /* Mantém o anjo à esquerda e o texto à direita */
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 2px !important;
    
    /* Oculta as barras de rolagem no Firefox e IE */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
/* Oculta a barra de rolagem no Webkit (Chrome/Safari/Edge) */
.journal-tw-internal-scroll::-webkit-scrollbar {
    display: none !important;
}

/* 🌸 ANJINHO DA ESQUERDA */
.journal-tw-angel-avatar {
    width: 40px !important; /* Tamanho proporcional delicado */
    height: auto !important;
    display: block !important;
    position: sticky !important; /* Mantém o anjinho visível no canto mesmo se rolar o texto */
    top: 0 !important;
}

/* 📜 BLOCO DE TEXTO ALINHADO À ESQUERDA */
.journal-tw-text-content {
    flex: 1 !important;
    font-family: 'MS Gothic', sans-serif !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    color: #000000 !important; /* Fonte MS Gothic na cor preta */
    text-align: justify !important;
}

/* Título de Boas-vindas */
.journal-tw-title {
    display: block !important;
    font-weight: bold !important;
    color: #5B5D8E !important; /* Tom roxo gótico/fofo em harmonia */
    margin-bottom: 6px !important;
}

/* Destaque para o texto Trigger Warning */
.journal-tw-highlight {
    font-weight: bold !important;
    color: #5B5D8E !important; /* Cor exigida 5B5D8E */
}

/* Parágrafos internos da caixinha */
.journal-tw-text-content p {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}
.journal-tw-text-content p:last-child {
    margin-bottom: 0 !important;
}

/* Mini ícones e botões que acompanham as linhas */
.journal-tw-inline-icon {
    height: 12px !important;
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* O link clicável do botão "here!" */
.journal-tw-click-portal {
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    /* Força especificamente este elemento a registrar 100% dos cliques */
    pointer-events: auto !important; 
}
.journal-tw-click-portal:hover {
    transform: scale(1.1) !important;
}
.journal-tw-click-portal img {
    height: 20px !important;
    width: auto !important;
    display: block !important;
}

/* ==========================================================================
   🐱 ADESIVO LIVRE: GATINHO ANJO NO DIÁRIO ABERTO
   ========================================================================== */
.journal-sticker-angel-cat {
    position: absolute !important;
    
    /* 🎯 SELETOR DE COORDENADAS: Mude estes números para mover o gatinho!
       • top: controla a altura (0% teto, 100% rodapé).
       • left: controla os lados (0% extrema esquerda, 100% extrema direita). */
    bottom: 5% !important; 
    left: 35% !important; 
    
    /* 📐 Controle de Tamanho Proporcional */
    width: 35px !important; /* Mude os pixels para deixar ele maior ou menor */
    height: auto !important;
    
    /* Garante o empilhamento correto acima do papel e atrás do cursor */
    z-index: 22 !important; 
    pointer-events: none !important; /* O mouse ignora o boneco para você conseguir clicar no que estiver atrás */
}

/* ==========================================================================
   🎐 ADESIVO LIVRE: SINO DE VENTO (WINDCHIME) NO DIÁRIO ABERTO
   ========================================================================== */
.journal-sticker-windchime {
    position: absolute !important;
    
    /* 🎯 SELETOR DE COORDENADAS: Mude estes números para mover o sino de vento!
       • top: controla a altura (0% topo, 100% rodapé).
       • left: controla os lados (0% extrema esquerda, 100% extrema direita). */
    top: 10% !important; 
    left: 48% !important; 
    
    /* 📐 Controle de Tamanho Proporcional */
    width: 25px !important; /* Ajuste os pixels se quiser ele maior ou menor */
    height: auto !important;
    
    /* Flutua na mesma camada dos outros adesivos e ignora cliques do mouse */
    z-index: 22 !important; 
    pointer-events: none !important; 
}

/* ==========================================================================
   ☀️ ADESIVO LIVRE: TERU TERU BOZU (SUNNYDOLL) NO DIÁRIO ABERTO
   ========================================================================== */
.journal-sticker-sunnydoll {
    position: absolute !important;
    
    /* 🎯 SELETOR DE COORDENADAS: Mude estes números para mover o boneco de sol!
       • top: controla a altura (0% topo, 100% rodapé).
       • left: controla os lados (0% extrema esquerda, 100% extrema direita). */
    top: 10% !important; 
    left: 43% !important; 
    
    /* 📐 Controle de Tamanho Proporcional */
    width: 25px !important; 
    height: auto !important;
    
    /* Flutua na mesma camada dos outros adesivos e ignora cliques do mouse */
    z-index: 22 !important; 
    pointer-events: none !important;
} /* 🎯 CHAVE FECHADA COM SUCESSO! */


/* ==========================================================================
   🖋️ CAIXA DE TEXTO LIVRE: CITAÇÃO DA ADO NO CADERNO
   ========================================================================== */
.journal-sticker-notetext {
    /* 🎯 POSICIONAMENTO FIXO EXIGIDO */
    position: absolute !important;
    bottom: 11% !important; 
    right: 52.8% !important; 
    
    /* 📐 CONTROLE DE DIMENSÕES: Altere estes valores para redimensionar a caixa! */
    width: 13% !important; /* Controla a largura horizontal */
    max-height: 85px !important; /* Limita a altura para não vazar do papel */
    
    /* 🌀 Jaula de rolagem embutida invisível caso o texto transborde do tamanho */
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    
    padding: 4px !important;
    background: transparent !important; /* Fundo transparente para ver o caderno */
    text-align: left !important;
    z-index: 22 !important;
}
.journal-sticker-notetext::-webkit-scrollbar {
    display: none !important; /* Oculta barra no Chrome/Safari/Edge */
}

/* 🖍️ ÍCONE DO GIZ DE CERA NO TOPO */
.journal-note-crayon-icon {
    height: 12px !important;
    width: auto !important;
    display: block !important;
    margin-bottom: 5px !important;
}

/* 📜 CORPO DA CITAÇÃO EM JAPONÊS (MS Gothic) */
.journal-note-quote-paragraph {
    font-family: "MS Gothic", sans-serif !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    color: #91AFD3 !important; /* Tom cinza escuro confortável e gótico */
    margin: 0 !important;
    text-align: justify !important;
}

/* Tag de Assinatura do Autor */
.journal-note-author-tag {
    display: block !important;
    font-family: "MS Gothic", sans-serif !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #91AFD3 !important; /* Cor roxa em harmonia com as suas tags */
    text-align: right !important;
    margin-top: 4px !important;
}


/* ==========================================================================
   👼 INJEÇÃO AUTOMÁTICA DA ASINHA ANTES DO TÍTULO DO BLOG
   ========================================================================== */
/* 🎯 O SEGREDO DO PAR DE ASAS: Injeta a imagem winghalo.webp dinamicamente 
   no início da sua classe de título sem precisar alterar o código JavaScript! */
.rainbow-animated-text::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important; /* Tamanho proporcional controlado */
    height: 14px !important;
    margin-right: 6px !important; /* Espaço fofo antes de começar a primeira letra */
    vertical-align: middle !important;
    
    /* Puxa o arquivo de asa diretamente do seu diretório de decorações */
    background: url('journal/decor/others/winghalo.webp') no-repeat center !important;
    background-size: contain !important;
}

/* ==========================================================================
   🌈 METAMORFOSE DA DATA: ADICIONA O RAINBOW EFFECT NA SUA CLASSE DE DATA
   ========================================================================== */
/* Substitua ou adicione estas propriedades na sua classe que cuida da DATA do blog 
   (provavelmente chamada .log-year, .blog-date ou similar. Altere o seletor abaixo se necessário) */
.log-year {
    font-family: "MS Gothic", sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    margin-left: 8px !important;
    vertical-align: middle !important;

    /* 🌈 ATIVAÇÃO DO ARCO-ÍRIS NOVO NA DATA */
    background: linear-gradient(to right, #ff5cc7, #ffd485, yellow, #8fff8f, #8e8eff, #ffafff, #ff6b6b) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    /* Dispara o loop infinito de movimento idêntico ao do seu título */
    -webkit-animation: rainbow-shift-engine 3s linear infinite !important;
    animation: rainbow-shift-engine 3s linear infinite !important;
}

/* ==========================================================================
   🌸 IMAGENS INLINE: RECALIBRAGEM PARA ACABAR COM VÃOS VERTICAIS
   ========================================================================== */
.journal-inline-body-img {
    /* 📐 REDUZIDO: Encolhe a altura para casar com a tipografia micro de 10px-11px */
    height: 17px !important; 
    width: auto !important;
    
    /* 🎯 FIM DO BURACO: Alinha pelo topo do texto, impedindo o navegador de 
       esticar a entrelinha do parágrafo para cima ou para baixo! */
    vertical-align: text-top !important; 
    display: inline-block !important;
    
    /* Micro recuos laterais reduzidos para as palavras não grudarem */
    margin-left: 2px !important;
    margin-right: 2px !important;
    margin-top: -2px !important;
    margin-bottom: 0px !important;
}

/* ==========================================================================
   🚏 ADESIVO LIVRE: PLACA DE CORREIO (POST STAND) NO DIÁRIO ABERTO
   ========================================================================== */
.journal-sticker-poststand {
    position: absolute !important;
    
    /* 🎯 CONTROLE DE COORDENADAS: Altere estes valores para mover a placa!
       • top: controla a altura (0% topo, 100% rodapé)
       • left: controla os lados (0% extrema esquerda, 100% extrema direita) */
    top: 40% !important; 
    left: 11.3% !important; 
    
    /* 📐 Controle de Tamanho */
    width: 38px !important; /* Ajuste os pixels para deixar a imagem maior ou menor */
    height: auto !important;
    
    /* Mantém na mesma camada flutuante protetora dos outros adesivos */
    z-index: 22 !important; 
    pointer-events: none !important; /* O mouse ignora o desenho para você conseguir clicar no que estiver atrás */
}

.journal-sticker-shootingstar {
    position: absolute !important;
    
    /* 🎯 CONTROLE DE COORDENADAS: Altere estes valores para mover a placa!
       • top: controla a altura (0% topo, 100% rodapé)
       • left: controla os lados (0% extrema esquerda, 100% extrema direita) */
    top: 18% !important; 
    left: 16% !important; 
    
    /* 📐 Controle de Tamanho */
    width: 30px !important; /* Ajuste os pixels para deixar a imagem maior ou menor */
    height: auto !important;
    
    /* Mantém na mesma camada flutuante protetora dos outros adesivos */
    z-index: 22 !important; 
    pointer-events: none !important; /* O mouse ignora o desenho para você conseguir clicar no que estiver atrás */
}

.journal-sticker-cinnamiku {
    position: absolute !important;
    
    /* 🎯 CONTROLE DE COORDENADAS */
    top: 73% !important; 
    left: 16.5% !important; 
    
    /* 📐 Controle de Tamanho */
    width: 30px !important; 
    height: auto !important;
    
    /* 🎯 ADICIONADO: Rotaciona um pouco para a direita */
    transform: rotate(-09deg) !important; /* Mude para 3deg para girar menos ou 8deg para girar mais! */
    
    /* Mantém na mesma camada flutuante protetora dos outros adesivos */
    z-index: 22 !important; 
    pointer-events: none !important; 
}

/* ==========================================================================
   ✨ CENTRALIZADOR AUTOMÁTICO DE DIVISOR (BLINDADO CONTRAS QUEBRAS NO JS)
   ========================================================================== */
/* Procura o parágrafo que carrega o GIF do divisor e centraliza a linha inteira */
.journal-chronicle-body p:has(img[src*="sparklesmalldivider.gif"]) {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}

/* Restaura o tamanho fofo e nítido do seu divisor de estrelas */
.journal-chronicle-body p:has(img[src*="sparklesmalldivider.gif"]) img {
    width: 80px !important; /* Ajuste os pixels para o tamanho que achar mais lindo */
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   ✨ CENTRALIZADOR AUTOMÁTICO DE DIVISOR (BLINDADO CONTRAS QUEBRAS NO JS)
   ========================================================================== */
/* Procura o parágrafo que carrega o GIF do divisor e centraliza a linha inteira */
.journal-chronicle-body p:has(img[src*="stardivider.png"]) {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}

/* Restaura o tamanho fofo e nítido do seu divisor de estrelas */
.journal-chronicle-body p:has(img[src*="stardivider.png"]) img {
    width: 80px !important; /* Ajuste os pixels para o tamanho que achar mais lindo */
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   ✨ CENTRALIZADOR AUTOMÁTICO DE DIVISOR (BLINDADO CONTRAS QUEBRAS NO JS)
   ========================================================================== */
/* Procura o parágrafo que carrega o GIF do divisor e centraliza a linha inteira */
.journal-chronicle-body p:has(img[src*="stardivider.png"]) {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}

/* Restaura o tamanho fofo e nítido do seu divisor de estrelas */
.journal-chronicle-body p:has(img[src*="stardivider.png"]) img {
    width: 80px !important; /* Ajuste os pixels para o tamanho que achar mais lindo */
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   ✨ CENTRALIZADOR AUTOMÁTICO DE DIVISOR (BLINDADO CONTRAS QUEBRAS NO JS)
   ========================================================================== */
/* Procura o parágrafo que carrega o GIF do divisor e centraliza a linha inteira */
.journal-chronicle-body p:has(img[src*="bye2.gif"]) {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}

/* Restaura o tamanho fofo e nítido do seu divisor de estrelas */
.journal-chronicle-body p:has(img[src*="bye2.gif"]) img {
    width: 80px !important; /* Ajuste os pixels para o tamanho que achar mais lindo */
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 🩹 Micro ajuste de respiro para o selinho de update */
img.journal-updated-badge {
    margin-left: 8px !important;  /* Afasta o selinho para a direita */
    margin-right: 2px !important; /* Dá um leve respiro antes do hífen da data */
}

/* ==========================================================================
   🌸 LAIN COM TILED LACE FRAME (COORDENADAS LIVRES)
   ========================================================================== */
.journal-lain-tiled-container {
    position: absolute !important;
    
    /* 🛠️ SEU REINADO DE COORDENADAS: Altere aqui para mover e dimensionar livremente! */
    bottom: -195px !important;       /* Distância em relação ao topo da folha esquerda */
    left: -35px !important;       /* Distância em relação à borda esquerda da folha */
    width: 75px !important;      /* Largura total do conjunto */
    transform: rotate(-10deg) !important; 
    
    height: auto !important;
    display: block !important;
    z-index: 999 !important;     /* Camada alta para flutuar sobre o post-it do background */
    box-sizing: border-box !important;

    /* 🧱 ENGENHARIA DE REPETIÇÃO (TILED BORDER): 
       Aplica a sua imagem de renda como uma borda que se repete sem distorcer */
    border: 8px solid transparent !important; /* Espessura da moldura de renda (Ajuste se precisar!) */
    border-image: url("journal/decor/others/laceframe.png") 8 repeat !important; 
    background: transparent !important;
}

/* Garante que o GIF da Lain fique confinado de forma limpa dentro da moldura repetível */
.journal-lain-gif-asset {
    display: block !important;
    width: 230% !important;
    height: auto !important;
    box-sizing: border-box !important;
}