/*
 Theme Name: Twenty Twenty-Five Child
 Template: twentytwentyfive
*/

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* Webcam Preview Styles */
#webcamPreview {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 160px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  background: #000;
  border: 2px solid #4CAF50;
  transition: all 0.3s ease;
}

#webcamVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* Mirror the video */
}

.webcam-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webcam-overlay i {
  margin-right: 4px;
  color: #4CAF50;
}

html, body {
  min-height: 100vh;
  background: linear-gradient(135deg, #3a8fd5 0%, #00c0d8 100%);
}

body {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6, label {
  color: white;
}

/* Force full-width images */
.container-fluid img.img-fluid {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Override any WordPress content constraints */
.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* Ensure no parent elements are constraining */
body .wp-site-blocks,
body .wp-block-group,
body .wp-block-post-content {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin-bottom: 125px;
}

.card[style*="display: none"], 
.card[style*="display:none"] {
  display: none !important;
}

.card-text {font-size: large;}

.messenger-body {
    background: 
        /* Soft blue gradient (adjust opacity) */
        linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%),
        /* Tightly packed tiny stars (now 20px × 20px grid) */
        url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2L12.2 7.5H18L13.4 11L15.6 16.5L10 13L4.4 16.5L6.6 11L2 7.5H7.8L10 2Z' fill='%234facfe' fill-opacity='0.08'/%3E%3C/svg%3E");
    background-color: #f0f5ff; /* Light blue base */
    background-repeat: repeat;
    display: flex;
    flex-direction: column;
    gap: .5 rem; /* Adds spacing between bubbles */
}

.chat-bubble {
  background-color: white;
  padding: 1rem 1.5rem;
  border-radius: 12px 12px 12px 4px;  /* Slightly wider + asymmetric */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  margin-bottom: 1rem;
  max-width: 85%;  /* Wider than before (was 80%) */
  min-width: 60%;  /* Ensures bubbles don't look too narrow */
  align-self: flex-start;
  position: relative;
}

/* Optional: Subtle message tail (adjust if needed) */
.chat-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  border: 8px solid transparent;
  border-right-color: white;
  border-left: 0;
  margin-top: 12px;
}

/* Tail shadow (matches bubble border) */
.chat-bubble::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 0;
  border: 8px solid transparent;
  border-right-color: #e2e8f0;
  border-left: 0;
  margin-top: 12px;
  z-index: -1;
}

/* Hide if empty */
.chat-bubble:empty {
  display: none;
}

.chat-bubble-sent {
  background-color: white;
  padding: 1rem 1.5rem;
  border-radius: 12px 12px 4px 12px; /* Flipped corners */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  margin-bottom: 1rem;
  max-width: 85%;
  min-width: 60%;
  align-self: flex-end; /* Right-align */
  position: relative;
}

/* Right tail (mirrored) */
.chat-bubble-sent::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 0;
  border: 8px solid transparent;
  border-left-color: white;
  border-right: 0;
  margin-top: 12px;
}

/* Right tail shadow (mirrored) */
.chat-bubble-sent::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 0;
  border: 8px solid transparent;
  border-left-color: #e2e8f0;
  border-right: 0;
  margin-top: 12px;
  z-index: -1;
}

/* Pop-in animation */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to bubbles with staggered delays */
.messenger-body .chat-msg {
  animation: popIn 0.3s ease-out forwards;
  opacity: 0; /* Start hidden */
}

/* Delay each subsequent bubble by 300ms */
.messenger-body .chat-msg:nth-child(1) { animation-delay: 400ms; }
.messenger-body .chat-msg:nth-child(2) { animation-delay: 1000ms; }
.messenger-body .chat-msg:nth-child(3) { animation-delay: 1600ms; }
.messenger-body .chat-msg:nth-child(4) { animation-delay: 2200ms; }
.messenger-body .chat-msg:nth-child(5) { animation-delay: 2800ms; }

/* Auto-scroll to bottom when new messages appear */
.messenger-body .chat-msg {
  animation: popIn 0.3s ease-out forwards, scrollIntoView 0.1s ease-out forwards;
}

@keyframes scrollIntoView {
  to {
    /* This forces the parent to scroll to show the new message */
    /* The browser will handle the actual scrolling */
  }
}

/* Alternative approach using scroll behavior */
.messenger-body {
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Force scroll to bottom after each animation completes */
.messenger-body .chat-msg {
  animation: popIn 0.3s ease-out forwards;
}

.messenger-body .chat-msg:nth-child(1) { 
  animation-delay: 400ms; 
  animation-fill-mode: both;
}
.messenger-body .chat-msg:nth-child(2) { 
  animation-delay: 1000ms; 
  animation-fill-mode: both;
}
.messenger-body .chat-msg:nth-child(3) { 
  animation-delay: 1600ms; 
  animation-fill-mode: both;
}
.messenger-body .chat-msg:nth-child(4) { 
  animation-delay: 2200ms; 
  animation-fill-mode: both;
}
.messenger-body .chat-msg:nth-child(5) { 
  animation-delay: 2800ms; 
  animation-fill-mode: both;
}

/* Add more if needed (or use JS for dynamic lists) */

.headsUp::before {
  content: "➡️ ";
}

.explanation {
  font-weight: bold;
}

.explanation::before {
  content: "🎯  ";
}

.explanation:empty {
  display: none;
}

.phrasesCount {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.15) 100%);
  color: #1a5d8a; /* Darker shade of your gradient for text */
  font-weight: bold;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  display: inline;
}

/* Custom Styles for the SPA */
#waveform {
  transition: opacity 0.3s ease;
}

#waveform.hidden {
  opacity: 0;
  pointer-events: none; /* Disable interaction */
}

/* Enhanced Button Styling */

#hintButton, #speechButton, #continueButton, #repeatButton, #processBtn, .big-buttons button {
  font-size: x-large;
  text-align: center;
  margin: auto;
  margin-bottom: 1rem;
  display: block;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

/* Mobile styles (applies below 800px) */
@media (max-width: 992px) {
  #hintButton, #speechButton, #continueButton, #repeatButton, #processBtn, .big-buttons button  {
    padding: 1rem 2rem;
  }
}

/* Desktop styles (applies above 800px) */
@media (min-width: 992px) {
  #hintButton, #speechButton, #continueButton, #repeatButton, #processBtn, .big-buttons button {
    padding: 10 !important; /* Only if necessary to override inline styles */
    min-width: 100px !important;
  }
}

#speechButton, #continueButton, #repeatButton, #processBtn, .big-buttons button {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}


#hintButton::before, #speechButton::before, #continueButton::before, #repeatButton::before, #processBtn::before, .big-buttons button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: all 0.3s ease;
}

#hintButton:hover::before, #speechButton:hover::before, #continueButton:hover::before, #repeatButton:hover::before, #processBtn:hover::before, .big-buttons button:hover::before {
  left: 100%;
}

#hintButton:hover, #speechButton:hover, #continueButton:hover, #repeatButton:hover, #processBtn:hover, .big-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

/*
#continueButton {
  width: 70%;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
*/

#continueButtonContainer {
  text-align: center;
  margin: auto;
  display: block;
}

#micStatusText {
    color: white;
    /*text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000; /* Glowing effect */
    font-weight: bold; /* Optional: Makes the text bolder */
    font-size: large;
    margin-top: 15px;
    margin-bottom: 20px;
    min-height: 40px;
}

#speech-text-here {
    color: black;
    font-size: large;
}

p {
    /*color: black; was interfering with post carousel */
    font-size: large !important;
}

.info-content {
    font-size: x-large !important;
}

.bi {
    font-size: x-large !important;
}

/* Custom animations */
@keyframes fadeInQuestion {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInHeader {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes correctShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50% { transform: translateX(-2px) rotate(-1deg); }
  20%, 40% { transform: translateX(2px) rotate(1deg); }
}

@keyframes incorrectShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

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

@keyframes lessonComplete {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Apply animations to elements */
.question {
  animation: fadeInQuestion 0.5s ease-out forwards;
}

.lesson-header {
  animation: fadeInHeader 0.8s ease-out forwards;
}

/* Enhanced Correct/Incorrect Feedback Styling */
.correct-answer {
  animation: correctShake 0.8s ease;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.incorrect-answer {
  animation: incorrectShake 0.5s ease;
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Minimal White Progress Bar */
.progress-container {
  width: 100%;
  padding: 0 15px;
}

.progress {
  height: 12px;
  border-radius: 20px;
  margin: 30px 0;
  overflow: visible;
  position: relative;
  background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent white track */
  min-width: 150px;
  border: 1px solid rgba(255, 255, 255, 0.5); /* Soft white border */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.progress-bar {
  border-radius: 20px;
  background: white; /* Solid white fill */
  position: relative;
  min-width: 60px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Optional: Keep the shimmer effect but make it subtle */
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.4) 0%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.4) 100%);
  border-radius: 20px;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.airplane-container {
  position: absolute;
  top: -10px;
  right: -15px;
  transform: translateX(50%);
  height: 30px !important;
  font-size: 30px;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  animation: float 3s ease-in-out infinite;
}

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

/* Motion effect with small particles behind the airplane */
.motion-trail {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}

.motion-particle {
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  opacity: 0.8;
  /*animation: fadeOut 1.5s infinite;*/
}

.motion-particle:nth-child(2) {
  animation-delay: 0.3s;
}

.motion-particle:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes fadeOut {
  0% { opacity: 0.8; }
  100% { opacity: 0.1; }
}

/* Replace the current motion trail with a pseudo-element 
.progress-bar::before {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: fadeOut 1.5s infinite;
}

/* This will only show when progress-bar has some width */

/* End progress bar */

.bubble-arrow {
  border-right: 8px solid var(--bs-primary-bg-subtle);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

#feedback-text {
  margin-left: 8px;
}

.feedback-animate {
  animation: fadeInFeedback 0.4s ease-out forwards;
}

.lesson-complete {
  animation: lessonComplete 1.2s ease-in-out forwards;
}

.correct-answer-highlight {
  background-color: yellow !important; /* Highlight with yellow background */
  border-color: yellow !important; /* Optional: Change border color to match */
  color: black !important; /* Optional: Ensure text is readable */
}

/*Falling heart animation */

.falling-image {
    height: auto;
    position: absolute; /* Changed from relative */
    animation: fallOffPage 4s forwards;
    transform-style: preserve-3d;
    z-index: 9999; /* High value to ensure it stays on top */
}
        
        @keyframes fallOffPage {
            0% {
                transform: rotate(0deg) translateY(0);
                opacity: 1;
            }
            30% {
                transform: rotate(5deg) translateY(0);
                opacity: 1;
            }
            70% {
                transform: rotate(15deg) translateY(100px);
                opacity: 0.8;
            }
            100% {
                transform: rotate(30deg) translateY(100vh);
                opacity: 0;
            }
        }

/*confetti effect for end of lesson*/

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #f00;
  opacity: 0;
}

@keyframes confetti-fall {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* For the "hint" word replacement */
/* Modified pulse-dot styles */
#hintUncommonWords {
  font-size: 1.4rem;
  line-height: 1.6;
}

.pulse-dot {
  animation: pulse 1s infinite;
  color: #ff0000;
  font-size: 1.8rem;
  display: inline-block;
  margin: 0 0.5em 0.3em 0.5em;
  padding: 0.4em;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pulse-dot:hover {
  transform: scale(1.1);
}

.pulse-dot .bi {
  font-size: 1.2em;
}

@media (max-width: 768px) {
  #hintUncommonWords {
    font-size: 1.2rem;
  }
  
  .pulse-dot {
    margin: 0 0.3em 0.2em 0.3em;
    font-size: 1.5rem;
  }
}

    /* Correct words list with checkmarks */
    ul.correctWords {
      list-style: none;
      padding-left: 0;
    }
    .correctWords li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 8px;
    }
    .correctWords li::before {
      content: "\F26E"; /* Bootstrap's check-circle-fill icon */
      font-family: "bootstrap-icons";
      position: absolute;
      left: 0;
      color: #198754; /* Bootstrap success green */
      font-size: 1.2em;
    }

    /* Incorrect words list with x-marks */
    ul.incorrectWords {
      list-style: none;
      padding-left: 0;
    }
    .incorrectWords li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 8px;
    }
    .incorrectWords li::before {
      content: "\F62A"; /* Bootstrap's x-circle-fill icon */
      font-family: "bootstrap-icons";
      position: absolute;
      left: 0;
      color: #dc3545; /* Bootstrap danger red */
      font-size: 1.2em;
    }

/* To make the whole thing fit on desktop */
@media (min-width: 992px) { /* Targets desktop screens */
  .fixed-bottom {
    min-height: 55px !important; /* Reduce from 140px */
  }
  
  #micStatusText {
    margin-top: 0px !important; /* Reduce top margin */
    margin-bottom: 5px !important; /* Reduce bottom margin */
    /*min-height: 20px !important; /* Reduce from 40px */
  }

  #bottomButtonBar {
    height: 40px !important; /* Reduce from 80px */
    min-height: 40px !important;
  }

    /* Center button container */
  #bottomButtonBarCenter {
    transform: translateX(-50%) scale(0.9); /* Slightly scale down entire container */
  }
}

/* End-of-lesson score display */

.score-circle {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 4px solid white;
}

.points-display {
  background: linear-gradient(135deg, #3a8fd5 0%, #00c0d8 100%);
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.score-update {
  animation: scoreFlash 0.3s;
  color: #ffcc00; /* Highlight color during animation */
}

@keyframes scoreFlash {
  0% { opacity: 1; }
  50% { opacity: 0.5; transform: scale(1.1); }
  100% { opacity: 1; }
}

/*
  .scoreHeader {
    background-color: yellow;
    color: black;
    padding: 10px 15px;
    border-radius: 5px;
    font-family: 'Orbitron', sans-serif !important; /* Digital font 
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    width: 110px; /* Adjust based on your needs 
    text-align: center; /* Keeps numbers centered 
  }

*/

    .score {
    text-align: center;
    color: yellow;
    font-family: 'Orbitron', sans-serif !important; /* Digital font */
    font-size: 24px;
    font-weight: bold;
  }


    .scoreHeader {
    padding: 10px 15px;
    display: inline-block;
    box-shadow: 
      0 0 8px rgba(255, 255, 255, 0.7),  /* Outer glow */
      inset 0 0 10px rgba(255, 255, 255, 0.3); /* Inner glow for "LCD screen" effect */
    width: 110px; /* Adjust based on your needs */
    text-align: center; /* Keeps numbers centered */
  }
  
  .scoreNumber {
    letter-spacing: 1px;
    display: inline-block; /* Ensures consistent spacing */
  }

  #phrasesScore {
    font-size: 14px !important;
    line-height: 14px !important;
  }

  /* Hide elements for new users based on days */
.user-day-0 .day-0-content,
.user-day-1 .day-1-content,
.user-day-2 .day-2-content,
.user-day-3 .day-3-content,
.user-day-4 .day-4-content,
.user-day-5 .day-5-content,
.user-day-6 .day-6-content,
.user-day-7 .day-7-content {
    display: none !important;
}

/* Show elements only after specific days */
.user-day-1 .day-0-content,
.user-day-2 .day-0-content,
.user-day-2 .day-1-content,
.user-day-3 .day-0-content,
.user-day-3 .day-1-content,
.user-day-3 .day-2-content,
.user-day-4 .day-0-content,
.user-day-4 .day-1-content,
.user-day-4 .day-2-content,
.user-day-4 .day-3-content,
.user-day-5 .day-0-content,
.user-day-5 .day-1-content,
.user-day-5 .day-2-content,
.user-day-5 .day-3-content,
.user-day-5 .day-4-content,
.user-day-6 .day-0-content,
.user-day-6 .day-1-content,
.user-day-6 .day-2-content,
.user-day-6 .day-3-content,
.user-day-6 .day-4-content,
.user-day-6 .day-5-content,
.user-day-7 .day-0-content,
.user-day-7 .day-1-content,
.user-day-7 .day-2-content,
.user-day-7 .day-3-content,
.user-day-7 .day-4-content,
.user-day-7 .day-5-content,
.user-day-7 .day-6-content,
.user-day-8 .day-0-content,
.user-day-8 .day-1-content,
.user-day-8 .day-2-content,
.user-day-8 .day-3-content,
.user-day-8 .day-4-content,
.user-day-8 .day-5-content,
.user-day-8 .day-6-content,
.user-day-8 .day-7-content {
    display: block !important;
}

/* Optional: Visual indicator for testing */
.user-day-indicator {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 9999;
    font-size: 12px;
}

.messenger-body::-webkit-scrollbar { width: 32px; background: #e0f7ff; border-left: 1px solid #b3e0ff; }
.messenger-body::-webkit-scrollbar-thumb { background: darkgray; border-radius: 8px; border: 3px solid #e0f7ff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.messenger-body::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #2a8bfe, #1a7dfe); }
.messenger-body::-webkit-scrollbar-track { background: #e0f7ff; border-radius: 8px; }
.messenger-body::-webkit-scrollbar-button { height: 10px; background: #c2ebff; }