/**
 * practice.css - Styles specific to the practice page
 * 
 * This file contains styles for the conversation interface:
 * - Message blocks for user and AI
 * - Microphone button and recording state
 * - Action buttons and popup elements
 * - Responsive adjustments for different screen sizes
 */

/* Define colors for message backgrounds */
:root {
  --ai-bg: #ffe0f0;     /* Light pink background for AI messages */
  --user-bg: #e0e7ff;   /* Light blue background for user messages */
}

/* Prevent scrolling on the body and make just the conversation area scrollable */
html, body {
  overflow: hidden;     /* Prevent whole page scrolling */
  height: 100%;         /* Make sure body takes full height */
}

/* Main page content container */
.page-content {
  min-height: 100vh;    /* Minimum full viewport height */
  display: flex;        /* Use flexbox for layout */
  flex-direction: column; /* Stack children vertically */
  overflow: hidden;     /* Hide overflow */
  position: relative;   /* For absolute positioning of children */
}

/* Wrapper around the scrollable conversation area */
.conversation-wrapper {
  flex: 1;              /* Take remaining space */
  position: relative;   /* For positioning child elements */
  z-index: 20;          /* Higher than microphone button */
  display: flex;        /* Use flexbox */
  flex-direction: column; /* Stack children vertically */
  height: calc(100vh - 160px); /* Fixed height calculation (viewport height minus header and space for mic) */
  overflow: hidden;     /* Hide overflow at wrapper level */
}

/* Scrollable container for all messages */
.conversation-container {
  flex: 1;              /* Take remaining space */
  display: flex;        /* Use flexbox */
  flex-direction: column; /* Stack messages vertically */
  overflow-y: auto;     /* Enable vertical scrolling */
  gap: 20px;            /* Space between message blocks */
  max-width: 100%;      /* Prevent overflow */
  margin: 0 auto;       /* Center horizontally */
  width: 80%;           /* Width relative to parent */
  scroll-behavior: smooth; /* Smooth scrolling */
  padding: 40px 20px 200px; /* Top, left/right, bottom padding (extra at bottom for mic) */
  box-sizing: border-box; /* Include padding in width calculation */
  min-height: 300px;    /* Minimum height to prevent tiny conversation area */
}

/* Base style for message blocks (both user and AI) */
.message-block {
  display: flex;        /* Use flexbox */
  align-items: flex-start; /* Align items to top */
  gap: 16px;            /* Space between avatar and message */
  position: relative;   /* For positioning child elements */
  width: 100%;          /* Full width */
}

/* User message specific arrangement (user on right) */
.message-block.user {
  flex-direction: row;  /* Avatar and message side by side */
  justify-content: flex-end; /* Align to right side */
}

/* AI message specific arrangement (AI on left) */
.message-block.ai {
  flex-direction: row;  /* Avatar and message side by side */
  justify-content: flex-start; /* Align to left side */
}

/* Avatar styling (profile circle) */
.avatar {
  width: 60px;          /* Fixed width */
  height: 60px;         /* Fixed height (square) */
  border: 3px solid var(--primary-color); /* Blue border */
  border-radius: 50%;   /* Make it circular */
  background-color: transparent; /* Clear background */
  color: var(--primary-color); /* Blue icon color */
  display: flex;        /* Center icon inside */
  justify-content: center; /* Center horizontally */
  align-items: center;  /* Center vertically */
  font-size: 1.8rem;    /* Large icon */
  position: relative;   /* For positioning */
  top: 26px;            /* Offset down to align with message content */
  flex-shrink: 0;       /* Prevent avatar from shrinking */
}

/* Container for message content and sender label */
.message-column {
  display: flex;        /* Use flexbox */
  flex-direction: column; /* Stack elements vertically */
  max-width: 100%;      /* Prevent overflow */
}

/* Align user message content to right */
.message-block.user .message-column {
  align-items: flex-end; /* Align child elements to right */
}

/* "You" or "AI Assistant" label */
.sender-label {
  font-size: 0.9rem;    /* Small text */
  font-weight: 600;     /* Semi-bold */
  margin-bottom: 6px;   /* Space below label */
  color: #777;          /* Medium gray */
}

/* Base message bubble styling */
.message-content {
  background: var(--white); /* White background by default */
  padding: 20px 28px;     /* Padding inside bubble */
  font-size: 1.2rem;      /* Large text */
  line-height: 1.6;       /* Increased line spacing for readability */
  border-radius: 28px;    /* Rounded corners */
  box-shadow: 0 6px 18px var(--shadow-light); /* Subtle shadow */
  max-width: 800px;       /* Maximum width to prevent overly wide messages */
  position: relative;     /* For positioning children */
  transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
  word-wrap: break-word;  /* Wrap long words */
  width: 100%;            /* Full width within constraints */
  box-sizing: border-box; /* Include padding in width */
}

/* Initial user message styling before filled */
#initialUserContent {
  min-height: 120px;      /* Minimum height when empty */
  min-width: 300px;       /* Minimum width */
  display: flex;          /* For centering reformulation */
  flex-direction: column; /* Stack content */
  justify-content: center; /* Center vertically */
  transition: all 0.5s ease; /* Smooth size transition */
}

/* Remove minimum height once filled with content */
#initialUserContent:not(:empty) {
  min-height: unset;      /* Remove minimum height */
  height: auto;           /* Let height adapt to content */
}

/* Initial AI message styling before filled */
#initialAIContent {
  min-height: 120px;      /* Minimum height when empty */
  min-width: 300px;       /* Minimum width */
  display: flex;          /* For centering definition popup */
  flex-direction: column; /* Stack content */
  justify-content: center; /* Center vertically */
  transition: all 0.5s ease; /* Smooth size transition */
}

/* Remove minimum height once filled with content */
#initialAIContent:not(:empty) {
  min-height: unset;      /* Remove minimum height */
  height: auto;           /* Let height adapt to content */
}

/* Message bubble hover effect */
.message-content:hover {
  box-shadow: 0 8px 22px var(--shadow-med); /* Stronger shadow on hover */
}

/* User message bubble specific styling */
.message-block.user .message-content {
  background: var(--user-bg); /* Light blue background */
  border-bottom-right-radius: 8px; /* Sharper corner on bottom right (speech bubble effect) */
}

/* AI message bubble specific styling */
.message-block.ai .message-content {
  background: var(--ai-bg); /* Light pink background */
  border-bottom-left-radius: 8px; /* Sharper corner on bottom left (speech bubble effect) */
}

/* Container for action buttons below messages */
.actions-container {
  display: flex;          /* Use flexbox */
  gap: 12px;              /* Space between buttons */
  margin-top: 8px;        /* Space above buttons */
  flex-wrap: wrap;        /* Allow buttons to wrap on small screens */
}

/* Align user buttons to right */
.message-block.user .actions-container {
  justify-content: flex-end; /* Right align buttons */
}

/* Action button styling */
.action-button {
  display: flex;          /* Flexbox for icon + text */
  align-items: center;    /* Center items vertically */
  gap: 6px;               /* Space between icon and text */
  background: var(--white); /* White background */
  color: var(--primary-color); /* Blue text */
  border: 2px solid var(--primary-color); /* Blue border */
  padding: 5px 10px;      /* Button padding */
  border-radius: 20px;    /* Rounded corners */
  font-size: 0.85rem;     /* Small text */
  cursor: pointer;        /* Pointer cursor on hover */
  transition: background 0.2s, transform 0.2s; /* Smooth transitions */
}

/* Button hover effect */
.action-button:hover {
  background: var(--primary-color); /* Blue background on hover */
  color: white;           /* White text on hover */
  transform: scale(1.05); /* Slightly larger on hover */
}

/* Definition and reformulation popup boxes */
.definition-popup, 
.reformulation {
  display: none;          /* Hidden by default */
  margin-top: 12px;       /* Space above popup */
  font-size: 1rem;        /* Normal text size */
  background: #f0f4ff;    /* Light blue background */
  padding: 12px;          /* Internal padding */
  border-radius: 10px;    /* Rounded corners */
  width: 100%;            /* Full width */
  box-sizing: border-box; /* Include padding in width */
}

/* Words that can be clicked for pronunciation/definition */
.clickable-word {
  cursor: pointer;        /* Pointer cursor to indicate clickable */
}

/* Microphone container (not used in current version) */
.mic-container {
  display: none;          /* Hidden - kept for potential future use */
}

/* Microphone button styling */
.microphone-button {
  display: block;         /* Standard block display */
  position: fixed;        /* Fixed position (doesn't scroll) */
  bottom: 40px;           /* Position from bottom */
  left: 50%;              /* Center horizontally */
  transform: translateX(-50%); /* Precise centering */
  font-size: 2.5rem;      /* Large microphone icon */
  color: white;           /* White icon */
  background-color: #e74c3c; /* Red background */
  border: none;           /* No border */
  border-radius: 50%;     /* Circular button */
  width: 100px;           /* Fixed width */
  height: 100px;          /* Fixed height */
  box-shadow: 0 6px 20px rgba(0,0,0,0.2); /* Shadow for depth */
  cursor: pointer;        /* Pointer cursor */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
  overflow: hidden;       /* Hide overflow */
  z-index: 50;            /* Very high z-index to ensure it's on top */
}

/* Microphone button hover effect */
.microphone-button:hover {
  transform: translateX(-50%) scale(1.1); /* Slightly larger on hover */
  box-shadow: 0 8px 25px rgba(0,0,0,0.3); /* More pronounced shadow */
}

/* Recording state styling */
.microphone-button.recording {
  background-color: #a31616; /* Darker red when recording */
  animation: pulse-shadow 1.6s infinite linear; /* Pulsing animation */
}

/* Pulsing shadow animation for recording state */
@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0 rgba(227, 45, 45, 0.6);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(227, 45, 45, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(227, 45, 45, 0);
  }
}

/* Helper indicator pointing to microphone button */
.click-here-indicator {
  position: fixed;        /* Fixed position */
  bottom: 150px;          /* Position from bottom */
  left: 50%;              /* Center horizontally */
  transform: translateX(-50%); /* Precise centering */
  z-index: 45;            /* Below microphone but above other elements */
  pointer-events: none;   /* Don't intercept clicks */
  animation: float-up-down 2s ease-in-out infinite; /* Add floating animation */
}

/* Image in click indicator */
.click-here-indicator img {
  width: 250px;           /* Increased width */
  height: auto;           /* Maintain aspect ratio */
}

/* Animation for the "click here" indicator */
@keyframes float-up-down {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-15px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile responsive styles */
@media (max-width: 600px) {
  /* Smaller conversation container on mobile */
  .conversation-container {
    width: 95%;           /* Wider relative width */
    padding: 20px 10px 180px; /* Reduced padding */
    gap: 15px;            /* Less space between messages */
  }
  
  /* Smaller message bubbles on mobile */
  .message-content {
    padding: 15px 20px;   /* Less padding */
    font-size: 1rem;      /* Smaller text */
    border-radius: 22px;  /* Less rounded corners */
  }
  
  /* Smaller avatars on mobile */
  .avatar {
    width: 45px;          /* Smaller size */
    height: 45px;         /* Smaller size */
    font-size: 1.3rem;    /* Smaller icon */
    top: 18px;            /* Less offset */
  }
  
  /* Smaller action buttons on mobile */
  .action-button {
    padding: 4px 8px;     /* Less padding */
    font-size: 0.75rem;   /* Smaller text */
  }
  
  /* Smaller microphone button on mobile */
  .microphone-button {
    width: 80px;          /* Smaller size */
    height: 80px;         /* Smaller size */
    font-size: 2rem;      /* Smaller icon */
    bottom: 30px;         /* Closer to bottom */
  }
  
  /* Adjust click indicator position on mobile */
  .click-here-indicator {
    bottom: 120px;        /* Position above the smaller mic button */
  }
  
  /* Smaller click indicator on mobile */
  .click-here-indicator img {
    width: 200px;         /* Increased size for mobile */
  }
  
  /* Mic help text (not currently used) */
  .mic-help-text {
    font-size: 0.9rem;    /* Smaller text */
    margin-bottom: 80px;  /* Less margin */
  }
  
  /* Smaller initial message boxes on mobile */
  #initialUserContent, #initialAIContent {
    min-height: 100px;    /* Reduced minimum height */
    min-width: 200px;     /* Reduced minimum width */
  }
  
  /* Less gap in message blocks on mobile */
  .message-block {
    gap: 10px;            /* Less space between avatar and message */
  }
  
  /* Smaller message column on mobile */
  .message-column {
    max-width: calc(100% - 55px); /* Calculate width to prevent overflow */
  }
}

/* Extra small screen adjustments */
@media (max-width: 380px) {
  /* Even smaller conversation container */
  .conversation-container {
    width: 98%;           /* Almost full width */
    padding: 15px 8px 170px; /* Even less padding */
    gap: 12px;            /* Less space between messages */
  }
  
  /* Even smaller message bubbles */
  .message-content {
    padding: 12px 16px;   /* Even less padding */
    font-size: 0.95rem;   /* Smaller text */
  }
  
  /* Even smaller avatars */
  .avatar {
    width: 40px;          /* Smaller size */
    height: 40px;         /* Smaller size */
    font-size: 1.2rem;    /* Smaller icon */
    top: 15px;            /* Less offset */
  }
  
  /* Even smaller microphone button */
  .microphone-button {
    width: 70px;          /* Smaller size */
    height: 70px;         /* Smaller size */
    font-size: 1.8rem;    /* Smaller icon */
    bottom: 25px;         /* Closer to bottom */
  }
  
  /* Adjust click indicator position */
  .click-here-indicator {
    bottom: 105px;        /* Position above smaller mic button */
  }
  
  /* Even smaller click indicator */
  .click-here-indicator img {
    width: 150px;          /* Increased size for small screens */
  }
}

/* Fix for iOS Safari 100vh issue */
body::after {
  content: "";
  display: block;
  height: 0;
  flex: 0;
}