/* Reset default styles to prevent interference */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  padding: 10px;
  background-color: #f5f5f5; /* Neutral background */
  color: #333333; /* Neutral text color */
  position: relative; /* For absolute positioning of prototype label */
}

#header-label {
  color :  #3C289B;
  font-size: 22px;
  text-align: center;
}

#hr-class {
background-color: #e8e8e8;
  height: 1px;
  border: none; /* Remove default border */
  margin: 0;
}
/* Prototype label styling */
#prototype-label {
  display: inline-block;
  margin-top: 1px;
  right: 10px;
  background-color: rgba(255, 99, 71, 0.8); /* Semi-transparent tomato red */
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10; /* Ensure it stays on top */
}

#token-label {
  display: inline-block;
  margin-top: 1px;
  left: 10px;
  background-color: rgba(255, 99, 71, 0.8); /* Semi-transparent tomato red */
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10; /* Ensure it stays on top */
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Base styles for all themes */
button {
  display: inline-flex !important; /* Force visibility when shown */
  align-items: center;
  justify-content: center;
  padding: 7px 15px;
  margin: 0; /* Remove individual margins */
  border: 1px solid #cccccc; /* Original grayish border */
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  background: #461E96; /* Original light gray button */
  color: #FFFFFF; /* Original text color */
  position: relative; /* For pseudo-element positioning */
}

#regenerate-summary{
  margin-top: 5px;
}
button:hover {
  background-color: #d3d3d3; /* Subtle hover effect */
}


.gray-btn {
  margin-top: 5px;
  background: #CACACA;
  color: #211359;
  padding: 5px;
  padding-right: 10px;
  font-size: 15px;
  border: none;
  border-radius: 5px;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 5px;
}

.iconImage {
  margin-left: 5px;
  margin-right: 10px;
}

.iconImage2 {
  margin-left: 0px;
  margin-right: 10px;
}

.iconImage3 {
  margin-left: 0px;
  margin-right: 10px;
}

.scout-icon {
  margin-top: -15px;
  height: 30px;
  margin-right: 7px;
}

i {
  margin-right: 8px; /* Adjust the value as needed */
}


.email-subject{
  margin-top: 15px;
}
.email-subject,
.email-from {
  font-size: 15px;
  margin-left: 10px;
  color: #606060;
  margin-bottom: 2px;
}

.email-summary-label {
  margin-left: 10px;
  font-size: 15px;
  color: #606060;
  font-weight: 600;
}
/* Progress bar styling */
#progress-bar-1, #progress-bar-2 {
  display: none; /* Hidden by default */
  width: 100%;
  height: 5px;
  background-color: #e0e0e0; /* Light gray background */
  overflow: hidden;
  margin: 5px 0;
}

#progress-bar-1::after, #progress-bar-2::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background-color: #4CAF50; /* Green progress */
  animation: progressAnimation 2s linear infinite; /* Infinite loop for indeterminate progress */
}

@keyframes progressAnimation {
  0% { width: 0; }
  100% { width: 100%; }
}

/* Button container for bottom buttons */
.button-container-bottom {
  display: flex;
  flex-direction: row; /* Stack buttons vertically */
  gap: 5px; /* Space between buttons */
  margin-top: 10px; /* Space above the button row */
}

.button-container-bottom2 {
  display: flex;
  width: auto;  
  flex-direction: column; /* Stack buttons vertically */
  gap: 5px; /* Space between buttons */
  margin-top: 10px; /* Space above the button row */
}

/* Icon styles using ::before pseudo-elements */
.icon-suggest::before {
  content: "\f044"; /* Font Awesome edit icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 5px;
}

.icon-back::before {
  content: "\f060"; /* Font Awesome back arrow icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 5px;
}

.icon-copy {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color : #461E96;
  font-size: 14px;
  font-weight: bold;
}

.insertDraft {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color : #461E96;
  font-size: 14px;
  font-weight: bold;
}

#replyIcon {
  margin-left: -5px;
}
.icon-copy::before {
  content: "\f0c5"; /* Font Awesome copy icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 5px;
  color : #461E96;
  
}

.icon-insert::before {
  content: "\f0c7"; /* Font Awesome save icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 5px;
}

.icon-suggest {
    display: inline-flex !important; /* Force visibility when shown */
  align-items: center;
  justify-content: center;
  
  padding: 7px 15px;
  margin: 0; /* Remove individual margins */
  border: 1px solid #cccccc; /* Original grayish border */
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  background: #461E96; /* Original light gray button */
  color: #FFFFFF; /* Original text color */
  position: relative; /* For pseudo-element positioning */
}

textarea {
  display: block !important; /* Force visibility */
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #8a8a8a;
  border-radius: 4px;
  font-size: 14px;
  background-color: #ffffff;
  color: #333333;
  resize: vertical;
}

span, div {
  display: block;
  margin: 5px 0;
}

/* Light mode adjustments */
body.light-mode {
  background-color: #ffffff; /* Slightly brighter white */
  color: #000000;
}

body.light-mode button {
  background-color: #e7e7e7; /* Retain original color */
  border-color: #cccccc;
  color: #000000;
}

body.light-mode button:hover {
  background-color: #d3d3d3;
}

body.light-mode textarea {
  background-color: #ffffff;
  color: #000000;
}

body.light-mode #progress-bar-1::after, body.light-mode #progress-bar-2::after {
  background-color: #4CAF50; /* Green progress */
}

body.light-mode #prototype-label {
  background-color: rgba(255, 99, 71, 0.8); /* Tomato red */
  color: white;
}

body.light-mode span {
  color: #000000;
}

span > strong {
  margin-right: 5px; /* Space between label and content */
}
/* Dark mode adjustments */
body.dark-mode {
  background-color: #1a1a1a;
  color: #ffffff;
}

body.dark-mode button {
  background-color: #4a4a4a; /* Darker neutral gray */
  border-color: #666666;
  color: #ffffff;
}

body.dark-mode button:hover {
  background-color: #5a5a5a;
}

body.dark-mode textarea {
  background-color: #2d2d2d;
  color: #ffffff;
  border-color: #666666;
}

body.dark-mode #progress-bar-1, body.dark-mode #progress-bar-2 {
  background-color: #333333; /* Darker background */
}

body.dark-mode #progress-bar-1::after, body.dark-mode #progress-bar-2::after {
  background-color: #81C784; /* Lighter green for contrast */
}

body.dark-mode #prototype-label {
  background-color: rgba(255, 99, 71, 0.6); /* Slightly transparent tomato red for dark mode */
  color: white;
}

body.dark-mode span {
  color: #ffffff;
}

/* Specific element styling */
#subject {
  margin-top: 40px;
  display: inline;
}

#subject, #from {
  display: inline; /* Ensure content stays on the same line */
}

#subject + br, #from {
  margin-top: 5px; /* Small gap between Subject and From lines */
}

/* Ensure no extra padding or margins cause line breaks */
#subject, #from, #summary {
  margin: 0;
  padding: 0;
}

#summary {
  display: block; /* Ensure it behaves as a block for borders */
  border: 0.7px solid #8a8a8a; /* Rectangle border, 1px width (adjusted from 0.1 for visibility) */
  border-radius: 5px; /* Rounded corners */
  padding: 10px; /* Inner spacing for content */
  margin-top: 10px; /* Space above the summary */
  word-wrap: break-word; /* Ensure long text wraps */
  max-width: 100%; /* Prevent overflow */
}

#suggestedResponse{
    display: block; /* Ensure it behaves as a block for borders */
  border: 0.7px solid #8a8a8a; /* Rectangle border, 1px width (adjusted from 0.1 for visibility) */
  border-radius: 5px; /* Rounded corners */
  padding: 10px; /* Inner spacing for content */
  margin-top: 10px; /* Space above the summary */
  word-wrap: break-word; /* Ensure long text wraps */
  max-width: 100%; /* Prevent overflow */
}
/* Sender highlight colors */
.sender-highlight {
  padding: 0 2px;
}

.sender-highlight[name="Mora, Pablo"] {
  color: #ff6347; /* Tomato red */
}

.sender-highlight[name="Baca, Mike"] {
  color: #4682b4; /* Steel blue */
}

/* Ensure no theme hides buttons or textareas */
body.light-mode button,
body.dark-mode button,
body.light-mode textarea,
body.dark-mode textarea {
  display: block !important; /* Redundant safety net */
}

.custom-instructions-label {
  margin-left: 0px;
  margin-bottom: 15px;
  font-size: 15px;
  color: #292929;
  font-weight: 700;
  margin-top: 10px;
}

#custom-instructions {
  padding-bottom: 5px;
}

#customize-draft {
  font-size: 14px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#apply-instructions {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
}

#discard-instructions {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
}

#backbutton1 {
  margin-left: -5px;
}