/*!
 * BUTTONS & CONTROLS STYLES
 * Styles for buttons and other interactive controls.
 * 
 * This file controls how all the clickable buttons in the app look and behave.
 * It includes the send button, voice button, help button, and settings button.
 */

 @import url('./variables.css'); /* Import the variables we defined earlier so we can use them here */

 /* 
  * Basic round button style shared by send and voice buttons
  * These are the circular buttons in the chat input area
  */
 button.round-button {
   display: flex; /* Uses flexible layout for centering content */
   justify-content: center; /* Centers content horizontally */
   align-items: center; /* Centers content vertically */
   width: var(--button-size); /* Standard button size from variables */
   height: var(--button-size); /* Makes button a perfect circle */
   margin-left: var(--space-xs); /* Small space to the left of the button */
   border: none; /* Removes the default button border */
   border-radius: 50%; /* Makes the button round (circle) */
   background: var(--color-text-primary); /* White background */
   color: var(--color-text-dark); /* Dark text for contrast */
   opacity: 0.7; /* Makes the button slightly transparent when not being used */
   cursor: pointer; /* Shows a pointer cursor on hover (the little hand) */
   transition: all 0.3s; /* Smooth transition for hover effects */
   -webkit-transition: all 0.3s; /* Same for Safari browser */
   will-change: opacity, background-color; /* Optimizes performance for these changing properties */
   touch-action: manipulation; /* Improves touch response on mobile */
   -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
 }
 
 /* 
  * Changes to round buttons when the user hovers over them with a mouse
  * This provides visual feedback that the button is interactive
  */
 button.round-button:hover {
   background: var(--color-background-light); /* Changes to a light gray when hovered */
   opacity: 1; /* Makes the button fully opaque when hovered */
 }
 
 /* 
  * Special styling for the voice button when it's actively listening
  * This helps users know when the app is recording their voice
  */
 button.round-button.listening {
   background: var(--color-background-light); /* Light gray background when recording */
   opacity: 1; /* Fully opaque to draw attention */
 }

 /* 
  * Vocal button styles for the read aloud functionality
  * This button appears in bot messages and plays audio when clicked
  */
 .vocal-button {
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 44px; /* Minimum size recommendation for touch targets */
   min-height: 44px; /* Minimum size recommendation for touch targets */
   padding: 8px;
   margin: 0 0 0 8px; /* Add some margin on the left side */
   border: none;
   background: transparent;
   border-radius: 50%;
   cursor: pointer;
   opacity: 0.8;
   transition: all 0.2s ease;
   position: relative; /* For the focus indicator */
   z-index: 20; /* Ensure it's above other elements */
   touch-action: manipulation; /* Improve touch behavior */
   -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
 }
 
 .vocal-button:hover, .vocal-button:focus {
   opacity: 1;
   transform: scale(1.1); /* Slightly enlarge on hover/focus */
   outline: none; /* Remove default outline */
 }
 
 /* Provide a visible focus indicator for keyboard users */
 .vocal-button:focus-visible {
   box-shadow: 0 0 0 2px var(--color-primary, #007bff); /* Fallback blue if variable not defined */
 }
 
 /* Icon inside the vocal button */
 .vocal-icon {
   width: 24px;
   height: 24px;
   pointer-events: none; /* Prevent the image from capturing events */
 }
 
 /* 
  * The images inside the send and voice buttons
  * These are the icons that show the button's purpose
  */
 #sendButton img, #voiceInput img {
   width: 20px; /* Standard size for button icons */
   height: 20px; /* Keep the icon square */
 }
 
 /* 
  * Styles shared by both the help and settings buttons
  * These are the small circular buttons in the top corners
  */
 #helpButton, #settingsButton {
   display: flex; /* Uses flexible layout for centering content */
   align-items: center; /* Centers content vertically */
   justify-content: center; /* Centers content horizontally */
   width: var(--button-size-sm); /* Makes these buttons smaller than the main buttons */
   height: var(--button-size-sm); /* Keeps the button a perfect circle */
   padding: 0; /* Removes internal spacing */
   border: 2px solid var(--color-border); /* Adds a gray border */
   border-radius: 50%; /* Makes the button round (circle) */
   background: transparent; /* No background color, just the border */
   opacity: 0.7; /* Makes the button slightly transparent when not being used */
 }
 
 /* 
  * Settings button specific styling
  * This is the button that opens the settings panel
  */
 #settingsButton {
   margin-right: var(--space-sm); /* Adds a small space to the right */
   cursor: pointer; /* Shows a pointer cursor on hover (the little hand) */
 }
 
 /* 
  * The images inside the help and settings buttons
  * These are the icons that show the button's purpose
  */
 #helpButton img, #settingsButton img {
   width: 100%; /* Makes the image fill the button */
   height: 100%; /* Makes the image fill the button */
   border-radius: 50%; /* Keeps the image round like the button */
   object-fit: contain; /* Makes sure the image fits properly without distortion */
 }
 
 /* 
  * Settings button icon specific styling
  * Makes the settings gear icon smaller than the button itself
  */
 #settingsButton img {
   width: 15px; /* Smaller size for the settings icon */
   height: 15px; /* Keeps the icon square */
 }
 
 /* 
  * Changes to help and settings buttons when the user hovers over them
  * This provides visual feedback that the buttons are interactive
  */
 #helpButton:hover, #settingsButton:hover {
   opacity: 1; /* Makes the button fully opaque when hovered */
 }

 /* 
  * Mobile styles for smaller screens (phones and small tablets)
  * These adjust the button sizes and positions to work better on small screens
  */
 @media (max-width: 600px) {
     /* Makes the main buttons larger on mobile for easier tapping */
     button.round-button {
         width: var(--button-size-lg); /* Uses the large button size from variables */
         height: var(--button-size-lg); /* Keeps the button a perfect circle */
     }
     
     /* Vocal button needs to be larger on mobile for better touch target */
     .vocal-button {
         min-width: 48px;
         min-height: 48px;
         padding: 10px;
     }
     
     /* Make the icon slightly larger on mobile */
     .vocal-icon {
         width: 28px;
         height: 28px;
     }
     
     /* Keeps icons the same size even with larger buttons on mobile */
     #sendButton img,
     #voiceInput img,
     #helpButton img {
         width: 20px; /* Standard size for button icons */
         height: 20px; /* Keep the icon square */
     }
     
     /* Makes the help and settings buttons larger on mobile for easier tapping */
     #settingsButton,
     #helpButton {
         position: relative; /* Enables positioning of child elements */
         width: var(--button-size); /* Uses the standard button size from variables */
         height: var(--button-size); /* Keeps the button a perfect circle */
     }
 
     /* Positions the settings button on mobile */
     #settingsButton {
         left: var(--space-xs); /* Slight adjustment to the left */
         padding: var(--space-md); /* Adds internal spacing around the icon */
         margin-right: var(--space-md); /* Adds space to the right */
     }
 
     /* Adds spacing inside the help button on mobile */
     #helpButton {
         padding: var(--space-xs); /* Small internal spacing around the icon */
     }
 
     /* Centers the icons precisely in the help and settings buttons on mobile */
     #settingsButton img,
     #helpButton img {
         position: absolute; /* Positions relative to the button */
         inset: 50%; /* Centers the image at the midpoint of the button */
         width: 17px; /* Slightly larger icon size for mobile */
         height: 17px; /* Keeps the icon square */
         transform: translate(-50%, -50%); /* Perfect centering technique */
     }
 }