/* ─────────────────────────
   purifyEmail.com  •  Palette & Components  (v3 – 2025-06-27)
   ───────────────────────── */

/* 1.  Brand palette as CSS variables                               */
:root {
  --clr-midnight: #626F47;   /* navbar / dark text            */
  --clr-indigo:   #A4B465;   /* secondary surfaces            */
  --clr-indigo-25: rgba(164, 180, 101, 0.25);   /* NEW – 25 %-opacity indigo */
  --clr-violet:   #FFCF50;   /* CTA buttons / highlights      */
  --clr-solar:    #FEFAE0;   /* section tint (cream)          */
  --clr-formbg:   #FCEFCB;   /* NEW – page background for all forms */
}

/* 2.  Global typography                                            */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* 3.  Navbar                                                       */
.navbar {
  background: var(--clr-midnight);
}
.navbar .nav-link {
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  opacity: 1;
}
.navbar .btn-cta {
  color: var(--clr-midnight);
  background: var(--clr-violet);          /* 📌 bright yellow CTA */
  font-weight: 600;
}

/* Chrome, Safari, Edge support */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--clr-indigo-25) inset !important;
    background-color: var(--clr-indigo-25) !important;
}

/* Firefox support */
input:-moz-autofill {
    background-color: var(--clr-indigo-25) !important;
}

/* 4.  Hero section                                                 */
.hero {
  background: linear-gradient(135deg, var(--clr-midnight) 0%, var(--clr-indigo) 100%);
  color: #fff;
  padding-block: 6rem 5rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.hero .btn-primary {
  background: var(--clr-violet);          /* bright CTA */
  border: none;
  color: var(--clr-midnight);             /* dark text for contrast */
  font-weight: 700;
  padding: 0.9rem 2.5rem;
}

.hero .btn-primary:hover {
  background: #FFE37F;                    /*  lighter yellow hover  */
}

/* 5.  Feature grid                                                 */
.feature-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clr-violet);          /* yellow circle  */
  color: var(--clr-midnight);             /* dark icon for WCAG */
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

/* 6.  Credibility / logo bar                                       */
.logo-bar img {
  max-height: 36px;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.2s;
}
.logo-bar img:hover {
  opacity: 1;
}

/* 7.  Testimonial slider cards                                     */
.testimonial {
  background: var(--clr-midnight);        /* dark card   */
  color: #fff;
  border-radius: 1rem;
  padding: 2rem 2.5rem;
  margin-inline: 0.75rem;
  min-width: 280px;
}

/* 8.  Footer                                                       */
footer {
  background: var(--clr-midnight);
  color: #fff;
  padding: 3rem 0 2rem;
}

footer a {
  color: var(--clr-violet);               /* yellow links */
  text-decoration: none;
}

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

/* 9.  Utility helpers                                              */
.section-pad { padding-block: 5rem; }
.text-violet { color: var(--clr-violet); }
.bg-indigo   { background: var(--clr-indigo); }

.navbar { background: #FFCF50 !important; }

/* === Palette-tinted message alerts (25 % opacity) ================== */
.alert-warning {
  background: var(--clr-indigo-25) !important;   /* translucent */
  color: var(--clr-midnight);                    /* dark olive text */
  border: 1px solid var(--clr-indigo);           /* thin, solid edge */
}

/* Analyzer-specific styles - now using pymail.ai brand colors */
.analyzer-page {
  /* Update analyzer CSS variables to match your brand */
  --analyzer-primary: var(--clr-midnight);      /* Dark olive for primary buttons */
  --analyzer-secondary: var(--clr-indigo);      /* Light olive for secondary elements */
  --analyzer-accent: var(--clr-violet);         /* Yellow for highlights/CTAs */
  --analyzer-success: #22c55e;                  /* Keep green for success states */
  --analyzer-warning: #f59e0b;                  /* Keep orange for warnings */
  --analyzer-error: #ef4444;                    /* Keep red for errors */
  --analyzer-background: var(--clr-formbg);     /* Cream background */
  --analyzer-card-bg: #ffffff;                  /* White cards */
  --analyzer-text: var(--clr-midnight);         /* Dark olive text */
  --analyzer-border: var(--clr-indigo);         /* Light olive borders */
  --analyzer-shadow: 0 2px 8px rgba(98, 111, 71, 0.1); /* Subtle olive shadow */
  --analyzer-light-bg: var(--clr-solar);       /* Very light cream */
}

/* Analyzer-specific components */
.analyzer-page .main-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  margin-bottom: 20px;
}

.analyzer-page .editor-section {
    background: #FEFAE0 !important;
    border-radius: 1rem;
    box-shadow: var(--analyzer-shadow);
    border: 1px solid var(--analyzer-border);
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    height: fit-content !important;
}

.analyzer-page .toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: var(--analyzer-light-bg);  /* Light cream background */
  border-bottom: 1px solid var(--analyzer-border);
}

.analyzer-page .btn-analyzer {
  padding: 0.9rem 2rem;  /* Match your existing button padding */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;  /* Match your existing button weight */
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.analyzer-page .btn-analyzer.btn-primary {
  background: var(--clr-violet);     /* Yellow CTA button */
  color: var(--clr-midnight);        /* Dark text for contrast */
}

.analyzer-page .btn-analyzer.btn-primary:hover {
  background: #FFE37F;               /* Lighter yellow hover */
}

.analyzer-page .btn-analyzer.btn-secondary {
  background: var(--clr-indigo);     /* Light olive */
  color: white;
}

.analyzer-page .btn-analyzer.btn-secondary:hover {
  background: #8fa04e;               /* Darker olive hover */
}

.analyzer-page .title-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--analyzer-border);
  border-radius: 5px;
  font-size: 0.9rem;
  background: white;
  color: var(--analyzer-text);
}

.analyzer-page .title-input:focus {
  outline: none;
  border-color: var(--clr-violet);
  box-shadow: 0 0 0 2px rgba(255, 207, 80, 0.2);
}

.analyzer-page .text-editor {
  position: relative;
  min-height: 400px;
}

.analyzer-page .ai-suggestions-section,
.analyzer-page .ai-suggestions-content {
    background: transparent !important; /* Let it inherit the cream from parent */
}

.analyzer-page .editor-content {
  padding: 20px;
  min-height: 400px;
  font-size: 16px;
  line-height: 1.6;
  outline: none;
  white-space: pre-wrap;
  color: var(--analyzer-text);
  background: white !important;
}

.analyzer-page .editor-content * {
    white-space: pre-wrap;
}

.analyzer-page .editor-content:focus {
  background: #fefffe;  /* Very subtle background change on focus */
}

.analyzer-page .editor-content:empty:before {
  content: attr(placeholder);
  color: #a1a1aa;
  pointer-events: none;
}

/* Highlighting styles using brand colors */
.analyzer-page .highlight-adverb {
  background-color: rgba(255, 207, 80, 0.2);  /* Light yellow background */
  border-bottom: 2px solid var(--clr-violet);
  cursor: help;
  border-radius: 2px;
  padding: 1px 2px;
}

.analyzer-page .highlight-complex {
  background-color: rgba(164, 180, 101, 0.2);  /* Light olive background */
  border-bottom: 2px solid var(--clr-indigo);
  cursor: help;
  border-radius: 2px;
  padding: 1px 2px;
}

.analyzer-page .highlight-hard-sentence {
  background-color: #fef3c7;
  border-left: 4px solid var(--clr-violet);  /* Yellow left border */
  padding: 2px 4px;
  margin: 2px 0;
  border-radius: 2px;
}

.analyzer-page .highlight-very-hard-sentence {
  background-color: #fee2e2;
  border-left: 4px solid #ef4444;
  padding: 2px 4px;
  margin: 2px 0;
  border-radius: 2px;
}

.analyzer-page .highlight-passive-voice {
  background-color: #d1fae5;
  border-bottom: 2px solid #10b981;
  cursor: help;
  border-radius: 2px;
  padding: 1px 2px;
}

.analyzer-page .stats-bar {
  display: flex;
  gap: 20px;
  padding: 15px;
  background: var(--analyzer-light-bg);  /* Light cream */
  border-top: 1px solid var(--analyzer-border);
  font-size: 0.9rem;
  color: var(--analyzer-text);
  font-weight: 500;
}

.analyzer-page .analysis-section {
    background: var(--analyzer-card-bg);
    border-radius: 1rem;
    box-shadow: var(--analyzer-shadow);
    height: fit-content;
    border: 1px solid var(--analyzer-border);
    overflow: hidden; /* This ensures the header radius shows properly */
}

.analyzer-page .analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--analyzer-border);
    background: var(--analyzer-light-bg);
    border-radius: 1rem 1rem 0 0; /* Add proper top radius */
}

.analyzer-page .analysis-header h2 {
  color: var(--analyzer-text);
  font-size: 1.4rem;
  font-weight: 600;
}

.analyzer-page .readability-score {
  display: flex;
  align-items: center;
  gap: 15px;
}

.analyzer-page .score-circle {
  width: 64px;  /* Match your feature icon size */
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--clr-midnight);  /* Dark text */
  background: var(--clr-violet);  /* Yellow background */
  transition: all 0.3s;
}

.analyzer-page .score-circle.excellent {
  background: var(--analyzer-success);
  color: white;
}

.analyzer-page .score-circle.good {
  background: var(--clr-violet);
  color: var(--clr-midnight);
}

.analyzer-page .score-circle.fair {
  background: var(--analyzer-warning);
  color: white;
}

.analyzer-page .score-circle.poor {
  background: var(--analyzer-error);
  color: white;
}

.analyzer-page .score-label {
  font-size: 0.9rem;
  color: var(--analyzer-text);
  font-weight: 500;
}

.analyzer-page .analysis-content {
  padding: 20px;
}

.analyzer-page .analysis-card {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--analyzer-border);
  border-radius: 1rem;  /* Match your existing border radius */
  background: var(--analyzer-light-bg);  /* Light cream background */
}

.analyzer-page .analysis-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: var(--analyzer-text);
  font-size: 1.1rem;
  font-weight: 600;
}

.analyzer-page .analysis-card h3 i {
  color: var(--clr-violet);  /* Yellow icons */
}

.analyzer-page .metrics,
.analyzer-page .email-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analyzer-page .metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.analyzer-page .metric label {
  font-weight: 500;
  color: var(--analyzer-text);
}

.analyzer-page .metric span {
  font-weight: 600;
  color: var(--clr-midnight);
}

.analyzer-page .issues-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analyzer-page .issue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.analyzer-page .issue-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.analyzer-page .issue-color.hard-sentence {
  background-color: var(--clr-violet);  /* Yellow for hard sentences */
}

.analyzer-page .issue-color.very-hard-sentence {
  background-color: var(--analyzer-error);
}

.analyzer-page .issue-color.adverb {
  background-color: var(--clr-indigo);  /* Olive for adverbs */
}

.analyzer-page .issue-color.complex-word {
  background-color: var(--clr-midnight);  /* Dark olive for complex words */
}

.analyzer-page .issue-color.passive-voice {
  background-color: var(--analyzer-success);
}

.analyzer-page .suggestions-list {
  list-style: none;
  padding: 0;
}

.analyzer-page .suggestions-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--analyzer-border);
  color: var(--analyzer-text);
  font-weight: 400;
}

.analyzer-page .suggestions-list li:last-child {
  border-bottom: none;
}

.analyzer-page .suggestions-list li:before {
  content: "💡 ";
  margin-right: 8px;
}

.analyzer-page .saved-analyses .bg-white {
  background: var(--analyzer-card-bg) !important;
  border: 1px solid var(--analyzer-border);
  border-radius: 1rem !important;
  box-shadow: var(--analyzer-shadow);
}

.analyzer-page .saved-analyses h3 {
  margin-bottom: 15px;
  color: var(--analyzer-text);
  font-weight: 600;
}

.analyzer-page .analyses-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analyzer-page .analysis-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--analyzer-border);
  border-radius: 8px;
  background: var(--analyzer-light-bg);  /* Light cream */
  transition: all 0.2s;
}

.analyzer-page .analysis-item:hover {
  border-color: var(--clr-violet);  /* Yellow hover border */
  background: white;
  box-shadow: 0 2px 8px rgba(255, 207, 80, 0.1);  /* Yellow shadow */
}

.analyzer-page .analysis-info h4 {
  margin-bottom: 5px;
  color: var(--analyzer-text);
  font-weight: 600;
}

.analyzer-page .analysis-info p {
  font-size: 0.9rem;
  color: var(--analyzer-text);
  opacity: 0.7;
}

.analyzer-page .analysis-actions {
  display: flex;
  gap: 8px;
}

.analyzer-page .btn-load,
.analyzer-page .btn-delete {
  padding: 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-weight: 600;
}

.analyzer-page .btn-load {
  background: var(--clr-violet);     /* Yellow load button */
  color: var(--clr-midnight);        /* Dark text */
}

.analyzer-page .btn-load:hover {
  background: #FFE37F;               /* Lighter yellow hover */
}

.analyzer-page .btn-delete {
  background: var(--analyzer-error);
  color: white;
}

.analyzer-page .btn-delete:hover {
  background: #dc2626;
}

/* Loading states */
.analyzer-page .loading {
  opacity: 0.6;
  pointer-events: none;
}

.analyzer-page .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}


.analyzer-page .spam-score-guide {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.analyzer-page .spam-score-guide .bg-white {
    background: var(--analyzer-card-bg) !important;
    border: 1px solid var(--analyzer-border) !important;
    border-radius: 1rem !important; /* Match your existing card radius */
    box-shadow: var(--analyzer-shadow) !important;
    margin-bottom: 2rem; /* Additional bottom margin for the box itself */
}

.analyzer-page .score-guide-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    border-radius: 8px;
    text-align: center;
    height: 100%;
    border: 2px solid;
    min-height: 120px;
}


.analyzer-page .score-guide-item.high-risk {
    background: #fee2e2;
    border-color: #ef4444;
    color: #7f1d1d;
}

.analyzer-page .score-guide-item.medium-risk {
    background: #fef3c7;
    border-color: var(--clr-violet);
    color: var(--clr-midnight);
}

.analyzer-page .score-guide-item.low-risk {
    background: #d1fae5;
    border-color: #22c55e;
    color: #14532d;
}

.analyzer-page .score-range {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 12px;
    display: block;
}

.analyzer-page .score-meaning {
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
}

.analyzer-page .score-meaning strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .analyzer-page .score-guide-item {
        margin-bottom: 10px;
    }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.analyzer-page .main-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
    margin-bottom: 20px;
    align-items: start;
    grid-template-rows: auto; /* Let content determine height */
}


.analyzer-page header .bg-white {
  background: var(--analyzer-card-bg) !important;
  border: 1px solid var(--analyzer-border);
  box-shadow: var(--analyzer-shadow);
}

.analyzer-page header h1 {
  color: var(--clr-midnight) !important;  /* Dark olive title */
}

.analyzer-page header h1 i {
  color: var(--clr-violet);  /* Yellow icon */
}

/* AI Suggestions Section */
.analyzer-page .ai-suggestions-section {
    background: transparent !important;
    border-top: 1px solid var(--analyzer-border);
    padding: 0;
    border-radius: 0 0 1rem 1rem;
    height: auto; /* Let it grow naturally */
    overflow: visible; /* No clipping */
}

.analyzer-page .editor-section .ai-suggestions-content {
    padding: 20px;
    min-height: 150px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--clr-solar) !important;
}

.analyzer-page .ai-suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--clr-indigo);
    color: white;
    border-bottom: 1px solid var(--analyzer-border);
    border-radius: 0; /* No radius on header */
}

.analyzer-page .ai-suggestions-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analyzer-page .ai-suggestions-header h3 i {
    color: var(--clr-violet);
    font-size: 1.2rem;
}

.analyzer-page .ai-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.analyzer-page .ai-status.thinking {
    color: var(--clr-violet);
}

.analyzer-page .ai-status.thinking i {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.analyzer-page .ai-suggestions-content {
    padding: 20px;
    background: transparent !important;
    border-radius: 0 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Completely remove any height constraints */
    height: unset !important;
    min-height: unset !important;
    max-height: unset !important;
    overflow: visible !important;
}

.analyzer-page .ai-placeholder {
    text-align: center;
    color: var(--analyzer-text);
    opacity: 0.6;
     background: transparent;
}

.analyzer-page .ai-placeholder i {
    font-size: 2rem;
    color: var(--clr-violet);
    margin-bottom: 10px;
    display: block;
}

.analyzer-page .ai-suggestion-item {
    background: white !important;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid var(--clr-violet);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Don't compress items */
    width: 100%;
    box-sizing: border-box;
}

.analyzer-page .ai-suggestion-item:last-child {
    margin-bottom: 0;
}

.analyzer-page .ai-suggestion-title {
    font-weight: 600;
    color: var(--clr-midnight);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analyzer-page .ai-suggestion-title i {
    color: var(--clr-violet);
    font-size: 0.9rem;
}

.analyzer-page .ai-suggestion-text {
    color: var(--analyzer-text);
    line-height: 1.5;
    margin-bottom: 8px;
}

.analyzer-page .ai-suggestion-example {
    background: var(--analyzer-light-bg);
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    border-left: 3px solid var(--clr-indigo);
}

.analyzer-page .ai-suggestion-example .before {
    color: #dc2626;
    margin-bottom: 5px;
}

.analyzer-page .ai-suggestion-example .after {
    color: #16a34a;
}

.analyzer-page .ai-suggestion-example .before:before {
    content: "❌ ";
    margin-right: 5px;
}

.analyzer-page .ai-suggestion-example .after:before {
    content: "✅ ";
    margin-right: 5px;
}

/* Responsive design for analyzer */
@media (max-width: 1024px) {
  .analyzer-page .main-content {
    grid-template-columns: 1fr;
  }

  .analyzer-page .analysis-section {
    order: -1;
  }
}

@media (max-width: 768px) {
  .analyzer-page .readability-score {
    flex-direction: column;
    gap: 8px;
  }
  
  .analyzer-page .metrics,
  .analyzer-page .email-metrics {
    gap: 8px;
  }
  
  .analyzer-page .metric {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .analyzer-page .toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
}


/* Branded Modal Styles */
.pymail-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(98, 111, 71, 0.5);  /* Olive overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.pymail-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.pymail-modal {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(98, 111, 71, 0.2);
  border: 2px solid var(--clr-indigo);
  max-width: 400px;
  width: 90%;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.pymail-modal-overlay.show .pymail-modal {
  transform: scale(1);
}

.pymail-modal-header {
  padding: 20px 20px 10px 20px;
  border-bottom: 1px solid var(--clr-indigo);
  background: var(--clr-solar);
  border-radius: 1rem 1rem 0 0;
}

.pymail-modal-title {
  margin: 0;
  color: var(--clr-midnight);
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pymail-modal-body {
  padding: 20px;
  color: var(--clr-midnight);
  line-height: 1.5;
}

.pymail-modal-footer {
  padding: 15px 20px 20px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.pymail-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pymail-btn-primary {
  background: var(--clr-violet);
  color: var(--clr-midnight);
}

.pymail-btn-primary:hover {
  background: #FFE37F;
}

.pymail-btn-secondary {
  background: var(--clr-indigo);
  color: white;
}

.pymail-btn-secondary:hover {
  background: #8fa04e;
}

.pymail-btn-danger {
  background: #ef4444;
  color: white;
}

.pymail-btn-danger:hover {
  background: #dc2626;
}

/* Success and Error Icons */
.pymail-modal-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
}

.pymail-modal-icon.success {
  background: #22c55e;
  color: white;
}

.pymail-modal-icon.warning {
  background: var(--clr-violet);
  color: var(--clr-midnight);
}

.pymail-modal-icon.error {
  background: #ef4444;
  color: white;
}

/* Input field for save modal */
.pymail-modal-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--clr-indigo);
  border-radius: 5px;
  font-size: 0.9rem;
  margin-top: 10px;
  color: var(--clr-midnight);
}

.pymail-modal-input:focus {
  outline: none;
  border-color: var(--clr-violet);
  box-shadow: 0 0 0 2px rgba(255, 207, 80, 0.2);
}

.metric-icon.excellent {
    background: #22c55e !important;
    color: white !important;
}

.metric-icon.good {
    background: var(--clr-violet) !important;
    color: var(--clr-midnight) !important;
}

.metric-icon.warning {
    background: #f59e0b !important;
    color: white !important;
}

.metric-icon.poor {
    background: #ef4444 !important;
    color: white !important;
}

.btn-clear-custom {
    background: var(--clr-violet) !important;
    color: var(--clr-midnight) !important;
    border: none !important;
    padding: 0.9rem 2rem !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-clear-custom:hover {
    background: #FFE37F !important; /* Lighter yellow hover */
    color: var(--clr-midnight) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(255, 207, 80, 0.3) !important;
}

.btn-clear-custom:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(255, 207, 80, 0.2) !important;
}

/* Ensure both buttons have consistent styling */
.analyzer-page .btn-analyzer.btn-primary,
.analyzer-page .btn-clear-custom {
    background: var(--clr-violet);
    color: var(--clr-midnight);
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analyzer-page .btn-analyzer.btn-primary:hover,
.analyzer-page .btn-clear-custom:hover {
    background: #FFE37F;
    color: var(--clr-midnight);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 207, 80, 0.3);
}

.analyzer-page .btn-analyzer:disabled {
    cursor: not-allowed;
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
}

/* For text highlighting overlay only */

.custom-tooltip {
    position: fixed;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(98, 111, 71, 0.25);
    border: 2px solid;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    max-width: 280px;
    white-space: normal;
    pointer-events: none;
    
    /* Animation */
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.3s ease;
}

.custom-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.custom-tooltip-arrow {
    position: fixed;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    z-index: 1001;
    pointer-events: none;
    
    /* Animation */
    opacity: 0;
    transition: all 0.3s ease;
}

.custom-tooltip-arrow.show {
    opacity: 1;
}

/* Arrow positioning */
.custom-tooltip-arrow.below {
    border-bottom-color: transparent !important;
    border-top: none !important;
}

.custom-tooltip-arrow.above {
    border-top-color: transparent !important;
    border-bottom: none !important;
}

/* TOOLTIP COLORS - ALPHA = 1.0 (FULLY OPAQUE) */

/* Adverb tooltips - Olive theme */
.custom-tooltip.adverb {
    background: #A4B465; /* Full opacity olive */
    color: white;
    border-color: #626F47; /* Dark olive border */
}

.custom-tooltip-arrow.adverb.below {
    border-bottom-color: #A4B465 !important;
}

.custom-tooltip-arrow.adverb.above {
    border-top-color: #A4B465 !important;
}

/* Complex word tooltips - Dark olive theme */
.custom-tooltip.complex {
    background: #626F47; /* Full opacity dark olive */
    color: #FFCF50; /* Yellow text */
    border-color: #A4B465; /* Light olive border */
}

.custom-tooltip-arrow.complex.below {
    border-bottom-color: #626F47 !important;
}

.custom-tooltip-arrow.complex.above {
    border-top-color: #626F47 !important;
}

/* Hard sentence tooltips - Yellow theme */
.custom-tooltip.hard-sentence {
    background: #FFCF50; /* Full opacity yellow */
    color: #626F47; /* Dark olive text */
    border-color: #A4B465; /* Light olive border */
}

.custom-tooltip-arrow.hard-sentence.below {
    border-bottom-color: #FFCF50 !important;
}

.custom-tooltip-arrow.hard-sentence.above {
    border-top-color: #FFCF50 !important;
}

/* Very hard sentence tooltips - Red theme */
.custom-tooltip.very-hard-sentence {
    background: #ef4444; /* Full opacity red */
    color: white;
    border-color: #dc2626; /* Darker red border */
}

.custom-tooltip-arrow.very-hard-sentence.below {
    border-bottom-color: #ef4444 !important;
}

.custom-tooltip-arrow.very-hard-sentence.above {
    border-top-color: #ef4444 !important;
}

/* Passive voice tooltips - Green theme */
.custom-tooltip.passive-voice {
    background: #22c55e; /* Full opacity green */
    color: white;
    border-color: #16a34a; /* Darker green border */
}

.custom-tooltip-arrow.passive-voice.below {
    border-bottom-color: #22c55e !important;
}

.custom-tooltip-arrow.passive-voice.above {
    border-top-color: #22c55e !important;
}

/* Default tooltip (fallback) */
.custom-tooltip.default {
    background: #374151;
    color: white;
    border-color: #1f2937;
}

.custom-tooltip-arrow.default.below {
    border-bottom-color: #374151 !important;
}

.custom-tooltip-arrow.default.above {
    border-top-color: #374151 !important;
}


/* Text Highlighting Overlay */
.text-highlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    white-space: pre-wrap; /* IMPORTANT: Preserve whitespace */
    word-wrap: break-word;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.95);
    pointer-events: auto;
    z-index: 10;
    /* FIX 1: Ensure line breaks are preserved */
    white-space: pre-line; /* This handles both \n and <br> tags */
}

/* Make the text-editor container position relative so overlay positions correctly */
.analyzer-page .text-editor {
    position: relative; /* IMPORTANT: This allows the overlay to position correctly */
}

/* Highlighting styles for the overlay */
/* Issue 1 Fix: Update overlay highlighting colors to match your analysis legend */
/* Replace the highlighting styles in your overlay CSS with these: */

/* Yellow square = Hard sentences */
.text-highlight-overlay .highlight-hard-sentence {
    background-color: rgba(255, 207, 80, 0.3); /* Use your brand yellow */
    border-left: 4px solid var(--clr-violet);
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 4px;
    display: inline;
    position: relative;
}

/* Red square = Very hard sentences */
.text-highlight-overlay .highlight-very-hard-sentence {
    background-color: rgba(239, 68, 68, 0.3); /* True red to match legend */
    border-left: 4px solid #ef4444;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 4px;
    display: inline;
    position: relative;
}

/* Olive/brown square = Adverbs */
.text-highlight-overlay .highlight-adverb {
    background-color: rgba(164, 180, 101, 0.3); /* Use your brand olive */
    border-bottom: 2px solid var(--clr-indigo);
    cursor: help;
    border-radius: 3px;
    padding: 1px 3px;
    position: relative;
}

/* Dark olive square = Complex words */
.text-highlight-overlay .highlight-complex {
    background-color: rgba(98, 111, 71, 0.3); /* Use your dark olive (midnight) */
    border-bottom: 2px solid var(--clr-midnight);
    cursor: help;
    border-radius: 3px;
    padding: 1px 3px;
    position: relative;
}

/* Green square = Passive voice */
.text-highlight-overlay .highlight-passive-voice {
    background-color: rgba(34, 197, 94, 0.3); /* True green to match legend */
    border-bottom: 2px solid #22c55e;
    cursor: help;
    border-radius: 3px;
    padding: 1px 3px;
    position: relative;
}

/* Spam (if you add it later) */
.text-highlight-overlay .highlight-spam {
    background-color: rgba(239, 68, 68, 0.2);
    border-bottom: 2px solid #ef4444;
    cursor: help;
    border-radius: 3px;
    padding: 1px 3px;
    position: relative;
}

/* Keep the hover effects */
.text-highlight-overlay .highlight-adverb:hover,
.text-highlight-overlay .highlight-complex:hover {
    transform: translateY(-1px);
    opacity: 0.8;
}

.text-highlight-overlay .highlight-hard-sentence:hover,
.text-highlight-overlay .highlight-very-hard-sentence:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.text-highlight-overlay .highlight-passive-voice:hover,
.text-highlight-overlay .highlight-spam:hover {
    transform: translateY(-1px);
    opacity: 0.8;
}
/* End of text highlighting overlay */

/* Hide default browser tooltips and create custom ones */
.text-highlight-overlay [title] {
    position: relative;
    cursor: help;
}

.text-highlight-overlay [title]:hover::before,
.text-highlight-overlay [title]:hover::after {
    /* This will be overridden below for our custom tooltips */
}

.text-highlight-overlay [title]:hover::before {
    content: attr(title);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 280px;
    white-space: normal;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(98, 111, 71, 0.25);
    border: 2px solid;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    
    /* SMART POSITIONING: Show below by default, above only if near top */
    top: 100%;
    margin-top: 8px;
    
    /* Animation */
    opacity: 0;
    animation: tooltipFadeIn 0.3s ease forwards;
}

.text-highlight-overlay [title]:hover::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    z-index: 1001;
    
    /* SMART POSITIONING: Arrow points up by default (tooltip below) */
    top: 100%;
    margin-top: 2px;
    
    /* Animation */
    opacity: 0;
    animation: tooltipFadeIn 0.3s ease forwards;
}

.text-highlight-overlay [title]:hover::before {
    /* Use CSS calc to detect if we're near the top and position accordingly */
}

.text-highlight-overlay [title][style*="top: 0"],
.text-highlight-overlay [title][style*="top: 1"],
.text-highlight-overlay [title][style*="top: 2"],
.text-highlight-overlay [title][style*="top: 3"],
.text-highlight-overlay [title][style*="top: 4"],
.text-highlight-overlay [title][style*="top: 5"] {
    /* This is a fallback - we'll use JavaScript for better detection */
}

/* ADVERB TOOLTIPS - Olive theme */
.text-highlight-overlay .highlight-adverb:hover::before {
    background: var(--clr-indigo); /* Light olive background */
    color: white;
    border-color: var(--clr-midnight); /* Dark olive border */
}

.text-highlight-overlay .highlight-adverb:hover::after {
    border-top-color: var(--clr-indigo); /* Match background */
    border-top: none;
}

/* COMPLEX WORD TOOLTIPS - Dark olive theme */
.text-highlight-overlay .highlight-complex:hover::before {
    background: var(--clr-midnight); /* Dark olive background */
    color: var(--clr-violet); /* Yellow text for contrast */
    border-color: var(--clr-indigo); /* Light olive border */
}

.text-highlight-overlay .highlight-complex:hover::after {
    border-bottom-color: var(--clr-midnight); /* Arrow points up to tooltip below */
    border-top: none;
}

/* HARD SENTENCE TOOLTIPS - Yellow theme */
.text-highlight-overlay .highlight-hard-sentence:hover::before {
    background: var(--clr-violet); /* Yellow background */
    color: var(--clr-midnight); /* Dark olive text */
    border-color: var(--clr-indigo); /* Light olive border */
}

.text-highlight-overlay .highlight-hard-sentence:hover::after {
    border-bottom-color: var(--clr-violet); /* Arrow points up to tooltip below */
    border-top: none;
}

/* VERY HARD SENTENCE TOOLTIPS - Red theme */
.text-highlight-overlay .highlight-very-hard-sentence:hover::before {
    background: #ef4444; /* Red background */
    color: white;
    border-color: #dc2626; /* Darker red border */
}

.text-highlight-overlay .highlight-very-hard-sentence:hover::after {
    border-bottom-color: #ef4444; /* Arrow points up to tooltip below */
    border-top: none;
}

/* PASSIVE VOICE TOOLTIPS - Green theme */
.text-highlight-overlay .highlight-passive-voice:hover::before {
    background: #22c55e; /* Green background */
    color: white;
    border-color: #16a34a; /* Darker green border */
}

.text-highlight-overlay .highlight-passive-voice:hover::after {
    border-bottom-color: #22c55e; /* Arrow points up to tooltip below */
    border-top: none;
}

/* SPAM TOOLTIPS - Red theme (if you add spam highlighting) */
.text-highlight-overlay .highlight-spam:hover::before {
    background: #ef4444; /* Red background */
    color: white;
    border-color: #dc2626; /* Darker red border */
}

.text-highlight-overlay .highlight-spam:hover::after {
    border-bottom-color: #ef4444; /* Arrow points up to tooltip below */
    border-top: none;
}

/* Tooltip animations */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.text-highlight-overlay [title]:hover::before {
    /* Responsive width */
    min-width: 120px;
    max-width: min(280px, 90vw);
    
    /* Better positioning for screen edges */
    left: clamp(10px, 50%, calc(100vw - 10px));
}

.text-highlight-overlay [title]:hover::after {
    /* Match arrow positioning */
    left: clamp(16px, 50%, calc(100vw - 16px));
}

/* Special styling for long tooltips */
.text-highlight-overlay [title*="Break this up"]:hover::before,
.text-highlight-overlay [title*="word count"]:hover::before {
    max-width: 320px;
    text-align: left;
}

/* Hover effects for the highlighted elements themselves */
.text-highlight-overlay .highlight-adverb:hover {
    background-color: rgba(164, 180, 101, 0.5) !important; /* Darker on hover */
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.text-highlight-overlay .highlight-complex:hover {
    background-color: rgba(98, 111, 71, 0.5) !important; /* Darker on hover */
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.text-highlight-overlay .highlight-hard-sentence:hover {
    background-color: rgba(255, 207, 80, 0.5) !important; /* Darker on hover */
    box-shadow: 0 2px 8px rgba(255, 207, 80, 0.3);
    transition: all 0.2s ease;
}

.text-highlight-overlay .highlight-very-hard-sentence:hover {
    background-color: rgba(239, 68, 68, 0.5) !important; /* Darker on hover */
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    transition: all 0.2s ease;
}

.text-highlight-overlay .highlight-passive-voice:hover {
    background-color: rgba(34, 197, 94, 0.5) !important; /* Darker on hover */
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Highlight toggle button styles */
#highlightToggleBtn {
    background: var(--clr-indigo) !important; /* Olive green background */
    color: white !important; /* White text */
    border: none !important;
    padding: 0.9rem 2rem !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    outline: none !important; /* Remove focus outline */
    box-shadow: none !important; /* Remove any default box shadow */
}

/* Hover effect - darker olive */
#highlightToggleBtn:hover {
    background: #8fa04e !important; /* Darker olive on hover */
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(164, 180, 101, 0.3) !important;
}

/* Active/pressed state */
#highlightToggleBtn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(164, 180, 101, 0.2) !important;
}

/* When highlighting is enabled (active state) */
#highlightToggleBtn.btn-primary {
    background: var(--clr-violet) !important; /* Yellow background when active */
    color: var(--clr-midnight) !important; /* Dark olive text when active */
    border: none !important; /* No border */
    outline: none !important; /* No outline */
    box-shadow: none !important; /* No shadow border */
}

#highlightToggleBtn.btn-primary:hover {
    background: #FFE37F !important; /* Lighter yellow on hover */
    color: var(--clr-midnight) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(255, 207, 80, 0.4) !important;
}

/* Disabled state */
#highlightToggleBtn:disabled {
    background: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
}

#highlightToggleBtn:disabled:hover {
    background: #e9ecef !important;
    color: #6c757d !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Ensure consistency with other buttons in the toolbar */
.toolbar #highlightToggleBtn {
    /* Match the spacing and alignment of other toolbar buttons */
    margin-right: 10px;
}

/* Icon styling within the button */
#highlightToggleBtn i {
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

/* Subtle icon animation on hover */
#highlightToggleBtn:hover i {
    transform: scale(1.1);
}

/* When button is active (highlighting enabled), make icon more prominent */
#highlightToggleBtn.btn-primary i {
    transform: scale(1.05);
}

/* Focus state for accessibility - using custom styling instead of default */
#highlightToggleBtn:focus {
    outline: none !important; /* Remove default focus outline */
    box-shadow: 0 0 0 2px rgba(255, 207, 80, 0.3) !important; /* Custom yellow glow */
}

/* Remove any conflicting btn-secondary styles when applied */
#highlightToggleBtn.btn-secondary {
    background: var(--clr-indigo) !important;
    color: white !important;
    border: none !important;
}

#highlightToggleBtn.btn-secondary:hover {
    background: #8fa04e !important;
    color: white !important;
    border: none !important;
}

/* == Save Modal etc. */
.modal-header {
    padding: 24px 30px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-modal:hover {
    background: #e9ecef;
    color: #495057;
}

.modal-body {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #f8f9fa;
}

/* Button Styles */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,123,255,0.3);
}

.btn-secondary {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
}

.btn-secondary:hover {
    background: #e9ecef !important;
    color: #495057 !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40,167,69,0.3);
}

.btn-clear-custom { 
    background: var(--clr-indigo);
    color: var(--clr-midnight);
    border: 1px solid var(--clr-indigo);
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
}

.btn-clear-custom:hover {
    background: #95a35a;
    border-color: #95a35a;
}

.email-component.analyzing {
    position: relative;
}

.email-component.analyzing::after {
    content: 'Analyzing...';
    position: absolute;
    top: 5px;
    right: 5px;
    background: #FDB515;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}