@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500&display=swap');


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

body, html {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family:'Roboto', sans-serif;
  /* letter-spacing: 1.6px; */
  font-weight: 300;
  color: #000;
  /* background-color: #eeeeee; */
  background: #CDA24C;
  background: linear-gradient(97deg,rgba(205, 162, 76, 1) 0%, rgba(243, 236, 222, 1) 100%);
}

h2,button {
  font-family: 'Lexend', sans-serif;
  font-weight: 400; /* Regular */
}

/* --- Screen Styling --- */
.screen {
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
  background: transparent;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.screen.active {
  display: flex;
  opacity: 1;
}

/* --- Buttons --- */
button,
.circle-button {
  /* padding: 1rem 2rem; */
  background-color: #d9a341;
  border: none;
  color: #000000;
  border-radius: 100px;
  cursor: pointer;
  margin: 1rem;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2),
              inset 0 3px 6px rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}

button:hover,
.circle-button:hover {
  background-color: #deb970;
}

.circle-button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#prelude-btn {
   position: absolute; bottom: 35px;
  height: 48px; min-width: 160px; padding: 0 20px;
  background-color: #000000;
  border: 2px solid #f8f8f7; color: #f8f8f7; border-radius: 32px;
  cursor: pointer; box-shadow: none;
  /* transition: background-color 0.18s ease, transform 0.12s ease; */
}

#prelude-btn:hover { 
  background-color: #d9a341; 
  color: #000;
  border-color: #000;
  /* transform: scale(1.02);  */
}

.skip-btn {
  background-color: #eeeeee;
  border-radius: 32px;
  border-style: solid;
  border-color: #d9a341;
  position: absolute;
  bottom: 50px;
}

/* --- Breathing Circle (generic) --- */
.breathing-circle {
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background: #d9a341;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.breathing-circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: rgba(230, 159, 53, 0.3);
  animation: pulse 12s ease-in-out infinite;
}

.breathing-circle span {
  font-size: 1.1rem;
  color: #fff;
  position: relative;
  z-index: 2;
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

.breathing-circle-chat {
  width: 240px;
  height: 240px;
  position: fixed;
  top: 25%;
  border-radius: 50%;
  background: rgba(230, 159, 53, 0.096);
  animation: pulse 12s ease-in-out infinite;
  z-index: 1;
}

#welcome-chat-text{
  position: absolute;
  top: 35%;
  font-weight: 300;
  color: #000000;
}

@media (max-width: 480px)
 {
   #welcome-chat-text
   { 
     top: 30%;
   }
 }

@keyframes pulse {
  0% { transform: scale(1); }
  33% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

/* --- Response Text (Spotify lyrics style) --- */
#responseWrapper {
  position: absolute;
  top: 10%;
  bottom: 120px;
  left: 0%;
  right: 0%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#responseWrapper::-webkit-scrollbar { display: none; }

#responseText {
  /* font-size: 1.9rem; */
  font-weight: 200;
  color: #000000;
  text-align: justify;
  line-height: 1.6;
  padding: 0 0.5rem;
  word-break: break-word;
}

#responseText span {
  opacity: 1;
  transition: color 0.3s, opacity 0.3s;
}
#responseText span.highlight {
  opacity: 1;
  color: #000;
  font-weight: bold;
  display: inline-block;
}

/* --- Input --- */
.input-container {
  display: flex;
  width: 100%;
  padding: 1rem;
  justify-content: center;
  position: fixed;
  bottom: 40px;
  z-index: 4;
}

textarea {
  width: 60%;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #ccc;
  font-size: 1rem;
  resize: none;
  overflow-y: hidden;
  box-sizing: border-box;
  min-height: 2.5rem;
}

/* --- Footer --- */
/* Footer styling */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* background: #f8f9fa; */
  /* border-top: 1px solid #ddd; */
  padding: 8px 20px;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* color: #444; */
  z-index: 100;

  /* ✨ Add soft top shadow */
  /* box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); */
}

.footer-links {
  display: flex;
  gap: 6px;
}

.footer-links a {
  color: #000000;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links span {
  color: #888;
}

/* Responsive: center links on small screens */
@media (max-width: 600px) {
  .footer {
    flex-direction: column;
    text-align: center;
    font-size: 0.8rem;
    gap: 4px;
  }
}


/* --- Logout Button --- */
.logout-btn {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 10;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  color: #000;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.logout-btn:hover { background: rgba(255, 255, 255, 0.25); }

@media (max-width: 768px) { #responseText { font-size: 1.2rem; } }
@media (max-width: 480px) { #responseText { font-size: 1rem; } }

/* ---------- Chat Input ---------- */
.chat-input-container {
  position: fixed;
  bottom: 75px;
  width: 100%;
  padding: 12px 16px;
  /* background: linear-gradient(to top, rgba(238,238,238,1) 90%, rgba(238,238,238,0) 100%); */
  display: flex;
  justify-content: center;
  z-index: 10;
}
.chat-input-wrapper {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 25px;
  width: 100%;
  max-width: 700px;
  padding: 8px 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.chat-input-wrapper textarea {
  flex: 1; border: none; outline: none; resize: none;
  font-size: 1rem; font-family: 'Roboto', sans-serif;
  padding: 8px 10px; max-height: 140px; overflow-y: auto;
  background: transparent; color: #000; line-height: 1.5;
}
.icon-btn {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 50%;
}
.icon-btn img { width: 30px; height: 30px; object-fit: contain; }

/* ---------- Guru Response Fade ---------- */
.guru-response-zone {
  position: relative;
  flex: 1; width: 100%; max-width: 800px;
  margin-top: 100px; margin-bottom: 140px;
  display: flex; justify-content: center; align-items: center;
  text-align: center; z-index: 2;
}
.guru-response-wrapper {
  position: relative; width: 100%; max-height: 40vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  display: flex; justify-content: center; text-align: center;
}
.guru-response-wrapper::-webkit-scrollbar { display: none; }
.guru-response-text {
  display: inline-block; max-width: 90%;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: #d9a341; line-height: 1.8; font-weight: 500;
  word-break: break-word; padding: 1rem 0; position: relative;
}
.guru-response-text span.highlight { color: #000; font-weight: 600; }

/* ---------- SCREEN 1: Welcome Panel ---------- */
.welcome-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  width: 85%;
  max-width: 900px;
  margin: auto;

  padding: 3rem 2rem 6rem;  /* bottom padding so text never touches button */

  text-align: center;
  position: relative;

  /* ❗ Remove fixed height limitation */
  min-height: 80%;
  height: auto;
}

.welcome-logo-main 
{ 
  height: 40px; 
  margin-bottom: 10px; 
}
.welcome-subtitle {
  color: #000000; 
  font-size: 24px; 
  font-weight: 500;
  margin: 8px 0 4px 0;
}
.welcome-tagline {
  color: #000000;
  font-size: 17px; 
  font-style: normal; 
  margin: 0 0 20px 0;
  line-height: 2;
  /* letter-spacing: 2px; */
}
.welcome-panel .begin-btn {
  position: absolute; bottom: 10px;
  height: 48px; min-width: 160px; padding: 0 20px;
  background-color: #000000;
  border: 2px solid #f8f8f7; color: #f8f8f7; border-radius: 32px;
  cursor: pointer; box-shadow: none;
  transition: background-color 0.18s ease, transform 0.12s ease;
}
.welcome-panel .begin-btn:hover { 
  background-color: #d9a341; 
  color: #000;
  border-color: #000;
  /* transform: scale(1.02);  */
}

/* ---------- SCREEN 2: Prelude Panel ---------- */
#screen2 .welcome-panel {
  /* background: #fff; */
  border-radius: 12px;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 80%;
  height: 80%;
  max-width: 900px;
  margin: auto;
  padding: 2.5rem 2rem 4rem 2rem;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

/* Logo and text near the top */
#screen2 .welcome-logo-main {
  height: 40px;
  margin-bottom: 10px;
}

#screen2 .welcome-subtitle {
   color: #000000; 
  font-size: 24px; 
  font-weight: 500;
  margin: 8px 0 4px 0;
}

#screen2 .welcome-tagline {
  color: #000000;
  font-size: 17px; 
  font-style: normal; 
  margin: 0 0 20px 0;
  line-height: 2;
}

/* Center the circle button nicely */
#screen2 .circle-button {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #d9a341;
  color: #000;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  margin-top: auto;
  margin-bottom: auto;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

#screen2 .circle-button:hover {
  background-color: #deb970;
  transform: scale(1.05);
}

/* Skip button same as Begin */
#screen2 .skip-btn {
  position: absolute;
  bottom: -20px;
  background-color: #eeeeee00;
  border: 2px solid #f8f8f7;
  color: #f8f8f7;
  border-radius: 32px;
  padding: 0.8rem 2rem;
  font-size: 15px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.12s ease;
  height: 48px;
}

#screen2 .skip-btn:hover {
  background-color: #d9a341;
  border: 2px solid #000000;
  color: #000;
  /* transform: scale(1.02); */
}

/* Responsive tweaks */
@media (max-width: 768px) {
  #screen2 .welcome-panel {
    width: 85%;
    padding: 2rem 1.5rem 3.5rem 1.5rem;
  }
  #screen2 .circle-button {
    width: 120px;
    height: 120px;
    font-size: 14px;
  }
  #screen2 .skip-btn {
    font-size: 14px;
    padding: 0.7rem 1.8rem;
  }
}

@media (max-width: 480px) {
  #screen2 .welcome-panel {
    width: 85%;
    padding: 2rem 1rem 3rem 1rem;
  }
  #screen2 .circle-button {
    width: 110px;
    height: 110px;
    font-size: 13.5px;
  }
  #screen2 .skip-btn {
    font-size: 13px;
    padding: 0.6rem 1.6rem;
  }
}


/* ---------- SCREEN 2 & SCREEN 3 ---------- */
/* SCREEN 2 styling keeps circle button centered */
#screen2 .circle-button {
  margin-top: 6vh;
}

/* ---------- SCREEN 3: Breathing Panel (aligned perfectly with Screen 2) ---------- */
#screen3 .welcome-panel {
  /* background: #fff; */
  border-radius: 12px;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 80%;
  height: 80%;
  max-width: 900px;
  margin: auto;
  padding: 2.5rem 2rem 4rem 2rem;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

/* Logo + subtitle + tagline positioned exactly like Screen 2 */
#screen3 .welcome-logo-main {
  height: 40px;
  margin-bottom: 10px;
}

#screen3 .welcome-subtitle {
  color: #000000; 
  font-size: 24px; 
  font-weight: 500;
  margin: 8px 0 4px 0;
}

#screen3 .welcome-tagline {
  color: #000000;
  font-size: 17px; 
  font-style: normal; 
  margin: 0 0 20px 0;
  line-height: 2;
}

/* Breathing circle placed exactly where Prelude button was (same top offset and size) */
#screen3 .breathing-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #d9a44100;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 35%; /* ✅ same as #prelude-btn top */
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
}

#screen3 .breathing-circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(230, 159, 53, 0);
  animation: pulse 12s ease-in-out infinite;
}

#screen3 .breathing-circle span {
  font-size: 1.1rem;
  color: #000000;
  position: relative;
  z-index: 2;
}

/* Countdown positioned between the circle and Skip button */
#screen3 .countdown {
  position: absolute;
  /* top: calc(25% + 180px); ✅ maintains gap below circle */
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  color: #d9a341;
  font-weight: 300;
  text-align: center;
}

/* Skip button aligned like Begin button */
#screen3 .skip-btn {
  position: absolute;
  bottom: -20px;
  background-color: #eeeeee00;
  border: 2px solid #f8f8f7;
  color: #f8f8f7;
  border-radius: 16px;
  padding: 0.8rem 2rem;
  font-size: 15px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.12s ease;
}

#screen3 .skip-btn:hover {
  background-color: #d9a341;
  border: 2px solid #000000;
  color: #000;
  /* transform: scale(1.02); */
}

/* ---------- Responsive adjustments ---------- */
@media (max-width: 768px) {
  #screen3 .welcome-panel {
    width: 85%;
    padding: 2rem 1.5rem 3rem 1.5rem;
  }

  #screen3 .breathing-circle {
    width: 120px;
    height: 120px;
    top: 38%;
  }

  /* #screen3 .countdown {
    top: calc(38% + 150px);
    font-size: 2.5rem;
  } */

  #screen3 .skip-btn {
    font-size: 14px;
    padding: 0.7rem 1.8rem;
  }
}

@media (max-width: 480px) {
  #screen3 .welcome-panel {
    width: 90%;
    padding: 2rem 1rem 3rem 1rem;
  }

  #screen3 .breathing-circle {
    width: 100px;
    height: 100px;
    top: 40%;
  }

  /* #screen3 .countdown {
    top: calc(40% + 130px);
    font-size: 2.2rem;
  } */

  #screen3 .skip-btn {
    font-size: 13.5px;
    padding: 0.6rem 1.6rem;
  }
}

#screen4 .welcome-tagline{
   color: #000000;
  font-size: 17px; 
  font-style: normal; 
  margin: 0 0 20px 0;
  line-height: 2;
}

/* #screen4 .voice-mute{
  width: 48px;
  border-radius: 50%;
  background-color: #000;
} */

/* ---------- CHAT LAYOUT (Screen 4) ---------- */

#screen4 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Main scrollable chat region */
.chat-container {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 80px 16px 140px; /* top: below header; bottom: above input/footer */
  box-sizing: border-box;
}

.messages-list {
  width: 100%;
  max-width: 800px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Each message row */
.message-row {
  display: flex;
  margin-bottom: 16px;
}

/* User vs guru alignment */
.message-row.user {
  justify-content: flex-end;
}

.message-row.assistant {
  justify-content: flex-start;
}

/* Bubble styling */
.message-bubble {
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
}

/* User bubble – cream rounded pill, like the design */
.message-bubble.user {
  max-width: 80%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 14px 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Guru text – simple, left-aligned, no bubble */
.message-bubble.assistant {
  max-width: 90%;
  color: #000;
  padding: 0;
}

/* Guru message bubble left spacing */
.message-row.assistant {
  justify-content: flex-start;
  padding-left: 8px; /* 👈 adds clean breathing room */
}

.message-bubble.assistant {
  max-width: 85%;
  text-align: left;        /* ensure text aligns left */
  white-space: pre-wrap;   /* keep line breaks from GPT */
  font-size: 15px;
  line-height: 1.7;
}


/* Small tweak for mobile */
@media (max-width: 600px) {
  .chat-container {
    padding-top: 70px;
    padding-bottom: 130px;
  }

  .message-bubble.user {
    max-width: 90%;
  }

  .message-bubble.assistant {
    max-width: 95%;
  }
}


.feedback-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: 1px;
  border-style: solid;
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.2s ease;
  border-color: #d9a341;
}

.feedback-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.feedback-btn img {
  width: 32px;
  height: 32px;
  display: block;
}

/* 🎤 Mic active glow */
#mic-btn.listening {
  background-color: rgba(217, 163, 65, 0.15);
  animation: micPulse 1.5s ease-in-out infinite;
}

@keyframes micPulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 163, 65, 0.3); }
  70% { box-shadow: 0 0 0 8px rgba(217, 163, 65, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 163, 65, 0); }
}

/* HEADER: Transparent and flexible */
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: transparent; /* no background */
  border: none; /* remove any line or shadow */
  position: sticky;
  top: 0;
  z-index: 13;
  pointer-events: none;
}

.main-header *{
  pointer-events: auto;
}

/* Equal spacing for left, center, right */
.header-left,
.header-center,
.header-right {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Align left logo */
.header-left {
  justify-content: flex-start;
}

/* Center TVAM logo */
.header-center {
  justify-content: center;
}

/* Align right feedback button */
.header-right {
  justify-content: flex-end;
  pointer-events: none;
}

.header-right * {
  pointer-events: auto;
}

/* Logo styling */
.brand-logo {
  height: 60px;
  object-fit: contain;
}

.tvam-logo {
  /* height: 20px; */
  width: 165px;
  height: auto;
  object-fit: contain;
}

/* Feedback button */
.feedback-btn-header {
  /* background: linear-gradient(97deg,rgba(205, 162, 76, 1) 0%, rgba(243, 236, 222, 1) 100%); */
  background: #000;
  border-color: #f8f8f7;
  color: #f8f8f7;
  border-radius: 32px;
  cursor: pointer;
  font-family: 'Lexend', sans-serif;
  font-weight: 400; /* Regular */
  border: 2px;
  border-style: solid;
  padding: 8px 28px 8px 28px;
  font-size: 300;
  transition: background 0.2s ease;
  height: 48px;
}

.feedback-btn-header:hover {
  background-color: #d9a341; 
  color: #000;
  border-color: #000;
}

/* MOBILE view — keep elements horizontal */
@media (max-width: 600px) {
  .main-header {
    padding: 10px 16px;
  }

  .brand-logo {
    height: 32px;
  }

  .tvam-logo {
    height: 15px;
  }

  .feedback-btn-header {
    font-size: 12px;
    padding: 6px 14px;
  }
}

/* ---------------- PETAL BACKGROUND ---------------- */

#petal-back, #petal-middle, #petal-front {
  position: fixed;
  top: 50%;
  left: 50%;
  transform-origin: center;
  z-index: 0;  /* behind all content */
  pointer-events: none;
}

.petal {
  width: 100%;
  height: 100%;
  mask: url('../assets/petal.svg') center/contain no-repeat;
  -webkit-mask: url('../assets/petal.svg') center/contain no-repeat;
  background-color: #ffffff29;
}

/* Sizes */
.size-back { width: 500px; height: 500px; }
.size-middle { width: 350px; height: 350px; }
.size-front { width: 200px; height: 200px; }

/* Rotation */
.rotate-cw { animation: rotateCW 25s linear infinite; }
.rotate-ccw { animation: rotateCCW 40s linear infinite; }
.rotate-cw-fast { animation: rotateCW 25s linear infinite; }

@keyframes rotateCW {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateCCW {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Breathing mode applied to wrapper, not the petal */
.petal-wrapper.breathe {
  animation: breatheScale 8s ease-in-out infinite;
}

@keyframes breatheScale {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(1.12); }
  60%  { transform: translate(-50%, -50%) scale(1.12); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

#petal-back,
#petal-middle,
#petal-front,
#petal-back *,
#petal-middle *,
#petal-front * {
  pointer-events: none !important;
}

#screen1 {
  z-index: 10 !important;
}

#screen2 {
  z-index: 11 !important;
}

#screen3 {
  z-index: 12 !important;
}


.voice-mute {
  position: fixed;
  top: 75px;
  right: 20px;

  width: 37.5px;
  height: 37.5px;

  background: #f8f8f7;
  border: 2px solid #000;
  border-radius: 50%;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0;
  z-index: 9999; /* stays above all elements */
}

.voice-mute img.icon {
  width: 24px;
  height: 24px;
}

.hidden { display: none !important; }

/* 
.hidden { display: none; }
.visible { display: block; } */

.go-back {
  position: fixed;
  top: 75px;
  left: 2px;

  width: 37.5px;
  height: 37.5px;

  background: #f8f8f7;
  border: 2px solid #000;
  border-radius: 50%;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0;
  z-index: 9999; /* stays above all elements */
}

.go-back img {
  width: 24px;
  height: 24px;
}

#screen4 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; /* important */
}

.chat-container {
  flex: 1;
  overflow-y: auto;         /* scrollable */
  -webkit-overflow-scrolling: touch;
  padding: 100px 16px 160px; /* top spacing for header, bottom for input */
  box-sizing: border-box;
}

.messages-list {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Completely invisible scrollbar — smooth scroll */
.messages-list {
  -ms-overflow-style: none !important;  /* IE/Edge */
  scrollbar-width: none !important;     /* Firefox */
}

.messages-list::-webkit-scrollbar {
  display: none !important;             /* Chrome/Safari */
}

/* ---------- Info Overlay ---------- */
.info-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.info-overlay.hidden {
  display: none;
}

/* ---------- Info Panel ---------- */
.info-panel {
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: #ffffffdd;
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 28px 32px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  color: #333;
  text-align: left;
  font-size: 16px;
  line-height: 1.7;
}


/* Info button (small circle at top right) */
.info-btn {
  position: fixed;
  top: 75px;
  right: 90px;
  width: 37.5px;
  height: 37.5px;
  background: #f8f8f7;
  border: 2px solid #000;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-btn img {
  width: 24px;
  height: 24px;
}

/* ---------- Info Panel ---------- */
.info-panel {
  position: relative;          /* ⭐ FIX #1 – keeps close btn inside panel */
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: #f8f8f7;
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 28px 32px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  color: #333;
  text-align: left;
  font-size: 16px;
  line-height: 1.7;

  /* ⭐ Hide scrollbars completely */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
.info-panel::-webkit-scrollbar {
  display: none;                /* Chrome/Safari */
}

/* ---------- Close button ---------- */
.info-close {
  position: absolute;
  top: 0px;
  right: 12px;
  background: #f8f8f7;
  border: none;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 9999;                  /* ensure on top */
}

/* ---------- Info Button ---------- */
.info-btn {
  position: fixed;
  top: 75px;
  right: 75px;                  /* ⭐ FIX #2 – was 90px pushing layout */
  width: 37.5px;
  height: 37.5px;
  background: #f8f8f7;
  border: 2px solid #000;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-wrapper {
  position: relative;
  width: 90%;
  max-width: 600px;
  z-index: 999999;
}

/* ---------- MOBILE FIX FOR SCREEN 1 ---------- */
@media (max-width: 600px) {
  #screen1 .welcome-panel {
    padding: 2rem 1rem 7rem;      /* more breathing space */
    height: auto;                 /* allow natural expansion */
    min-height: unset;            /* remove fixed constraint */
  }

  #screen1 .welcome-tagline {
    font-size: 15px;
    line-height: 1.7;
  }

  #screen1 .begin-btn {
    bottom: 20px !important;      /* always visible */
  }
}

/* Extra-small screens like older iPhones */
@media (max-height: 700px) {
  #screen1 .welcome-panel {
    padding-bottom: 8rem;
  }
}

/* ---------- RESPONSIVE FIX FOR INFO PANEL (Screen 4) ---------- */

/* Phones and small screens */
@media (max-width: 600px) {

  /* Make overlay push panel slightly lower */
  #infoOverlay {
    align-items: flex-start;
    padding-top: 110px;  /* avoids logo + feedback + info button */
  }

  .info-wrapper {
    width: 92%;
    max-width: 340px; /* ↓ smaller panel */
  }

  .info-panel {
    max-height: 65vh;      /* ↓ avoid footer overlap */
    padding: 18px 20px;    /* ↓ tighter padding */
    font-size: 14px;       /* ↓ smaller text */
    line-height: 1.55;
    border-radius: 18px;
  }

  .info-panel h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .info-close {
    top: 6px;
    right: 25px;
    width: 28px;
    height: 28px;
    font-size: 17px;
  }

  /* Move the info button so it doesn't overlap the panel */
  .info-btn {
    right: 50px;
    top: 70px;
  }
}

/* Very small phones (iPhone SE / Android mini) */
@media (max-width: 400px) {

  #infoOverlay {
    padding-top: 120px;
  }

  .info-wrapper {
    max-width: 310px;
  }

  .info-panel {
    max-height: 60vh;   /* even shorter */
    font-size: 13px;
    padding: 15px 18px;
  }

  .info-close {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }
}

/* ---------- FIX: Keep voice button in original position ---------- */

.voice-mute {
  top: 75px !important;
  right: 20px !important;
}

/* ---------- FIX: Info button stays away from voice button ---------- */
.info-btn {
  top: 75px !important;
  right: 75px !important; /* safe distance */
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .info-btn {
    top: 120px !important;
    right: 2px !important;  /* ensure non-overlap on small screens */
  }

  .voice-mute {
    top: 72px !important;
    right: 2px !important;
  }
}