body, html {
    margin: 0; padding: 0; height: 100%;
    font-family: 'Arial', sans-serif;
    background: url('christmas_bg.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow-x: hidden;
}
#snow-canvas { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1; }
.chat-background { display: flex; justify-content: center; align-items: center; min-height: 100vh; position: relative; z-index: 2; }

.chat-container { 
    width: 420px; height: 750px; 
    background: rgba(255, 255, 255, 0.93); 
    border-radius: 15px; border: 3px solid #f1c40f; 
    display: flex; flex-direction: column; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    position: relative; z-index: 10; overflow: hidden;
}

#language-socks { display: flex !important; flex-direction: row !important; justify-content: center; gap: 8px; padding: 10px; background: white; border-bottom: 1px solid #eee; }
.lang-sock { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 20px; background: #f1f1f1; cursor: pointer; font-size: 13px; }
.lang-sock.active { background: #2ecc71; color: white; border-color: #f1c40f; }

.chat-header { background: #27ae60; color: white; padding: 15px; display: flex; align-items: center; }
.santa-avatar { width: 55px; height: 55px; border-radius: 50%; margin-right: 12px; border: 2px solid white; object-fit: cover; }
.chat-box { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.santa p { background: #ecf0f1; align-self: flex-start; padding: 10px; border-radius: 10px; margin: 0; }
.user p { background: #3498db; color: white; align-self: flex-end; padding: 10px; border-radius: 10px; margin: 0; }

.typing-indicator { font-style: italic; color: #7f8c8d; font-size: 12px; padding: 0 15px 5px; display: none; }

.chat-input-area { display: flex; padding: 12px; border-top: 1px solid #ddd; background: white; }
#user-input { flex: 1; border: 2px solid #ddd; border-radius: 20px; padding: 10px; outline: none; font-size: 16px; }
#send-button { background: #f39c12; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; margin-left: 8px; cursor: pointer; }

.footer-link-container { text-align: center; padding: 10px; background: white; }
.donation-button { 
    background-color: #27ae60; color: white !important; 
    text-decoration: none; font-weight: bold; font-size: 20px; 
    display: inline-block; padding: 12px 25px; border-radius: 30px;
}

.paper-letter, .reports-container { 
    background: #e3d5b8; background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    padding: 40px; max-width: 700px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: block; position: relative; z-index: 20;
    color: #3e2723; font-family: 'Georgia', serif; border-radius: 5px;
}

.wax-seal {
    width: 170px; height: 170px; background: #a81d1d;
    border-radius: 42% 58% 48% 52% / 55% 45% 55% 45%; 
    display: flex; align-items: center; justify-content: center;
    box-shadow: 4px 6px 15px rgba(0,0,0,0.5), inset 0 0 25px rgba(0,0,0,0.6);
    border: 4px solid #8b1616; margin: 30px auto; transform: rotate(3deg);
}
.wax-seal img { width: 115px; mix-blend-mode: screen; filter: brightness(1.2); }