:root {
  /* Core Brand/UI Colors - ORIGINAL BLUE SCHEME */
  --clr-sidebar-bg: #eef0fc;
  --clr-sidebar-text: #1C2675;
  --clr-sidebar-active-bg: #dcdff9;
  --clr-primary: #5c6ff7;
  --clr-primary-hover: #4a5be6;
  --clr-primary-text: #ffffff;
  --clr-secondary-hover-bg: #eef0fc; /* Same as sidebar */

  /* Neutral/Text/Border Colors */
  --clr-white: #ffffff;
  --clr-black: #000000;
  --clr-light-bg: #F9FAFB;
  --clr-border-light: #e5e7eb;
  --clr-border-medium: #D1D5DB;
  --clr-border-dark: #ccc;
  --clr-text-heading: #1C2675; /* Reverted */
  --clr-text-dark: #374151;
  --clr-text-medium: #4B5563;
  --clr-text-light: #666;
  --clr-text-lighter: #999;
  --clr-header-bg: #f3f4f6;
  --clr-row-even-bg: #F9FAFB;
  --clr-row-hover-bg: #f0f2fc; /* Reverted */

  /* Action/Status Colors */
  --clr-danger: #ef4444;
  --clr-danger-hover: #dc2626;
  --clr-danger-bg-hover: #fee2e2;
  --clr-success: #16a34a;
  --clr-success-hover: #15803d;
  --clr-success-bg-hover: #f0fdf4;
  --clr-warning: #f59e0b;
  --clr-warning-hover: #d97706;
  --clr-warning-bg-hover: #fffbeb;

  /* Priority Label Colors (Keep original, can adjust later) */
  --clr-priority-1-bg: #fee2e2;
  --clr-priority-1-text: #b91c1c;
  --clr-priority-2-bg: #ffedd5;
  --clr-priority-2-text: #c2410c;
  --clr-priority-3-bg: #fef9c3;
  --clr-priority-3-text: #a16207;
  --clr-priority-4-bg: #dcfce7;
  --clr-priority-4-text: #15803d;

  /* Other Specifics (Keep original, can adjust later) */
  --clr-channel-bg: #e5e7eb; 
  --clr-channel-text: #4b5563; 
}

body {
  font-family: 'Barlow', sans-serif;
  margin: 0;
}

.app-container {
  display: flex;
  height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 240px;
  background-color: var(--clr-sidebar-bg);
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
  height: auto;
  text-align: center;
  align-self: center;
}

.logo-icon {
  flex-shrink: 0;
  /* Add styles for the paths within the logo icon */
}

.logo-icon path:nth-child(1) {
  fill: var(--clr-primary); /* Reverted */
}

.logo-icon path:nth-child(2) {
  fill: var(--clr-sidebar-text); /* Reverted */
}

.logo-icon path:nth-child(3) {
  fill: var(--clr-primary); /* Reverted */
}

.logo-text {
  font-family: 'Barlow', sans-serif;
  font-size: 2.65rem;
  font-weight: 600;
  /* color: var(--clr-sidebar-text); */ /* Color is now set individually */
  line-height: 1;
  letter-spacing: -0.05em;
}

.logo-text-fire {
  color: var(--clr-sidebar-text); /* Reverted */
}

.logo-text-iq {
  color: var(--clr-primary); /* Reverted */
}

.tagline {
  width: 200px;
  font-size: 1.0rem;
  font-weight: 500;
  color: var(--clr-sidebar-text);
  margin-top: 5px;
  margin-bottom: 2rem;
  text-align: center;
  align-self: center;
}

.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: none;
  text-align: left;
  padding: 0.75rem 1rem;
  margin-bottom: 0.2rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 25px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: var(--clr-sidebar-text);
}

.sidebar-btn img {
  width: 30px;
  height: 30px;
}

.sidebar-btn:not(.primary):hover {
  background-color: var(--clr-sidebar-active-bg);
}

.primary:hover {
  background-image: linear-gradient(to right, #4a5be6, #6b7eff); /* Reverted gradient */
  background-color: var(--clr-primary-hover); 
  box-shadow: 0 6px 12px rgba(92, 111, 247, 0.4); /* Reverted shadow */
  transform: scale(1.03);
}

.sidebar-btn.active {
  background-color: var(--clr-sidebar-active-bg);
  color: var(--clr-sidebar-text);
}

.sidebar-btn.active img {
  filter: none;
}

.primary {
  background-image: linear-gradient(to right, #3b4ac9, var(--clr-primary)); /* Reverted gradient */
  color: var(--clr-primary-text);
  border: 1px solid #3b4ac9; /* Reverted border */
  box-shadow: 0 4px 8px rgba(92, 111, 247, 0.3); /* Reverted shadow */
}

.primary img {
  filter: brightness(0) invert(1);
}

.sidebar-footer {
  margin-top: auto;
}

.version {
  font-size: 0.75rem;
  color: var(--clr-text-lighter);
  margin-top: 1rem;
  text-align: center;
}

/* Main */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--clr-white);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--clr-border-light);
  background-color: var(--clr-light-bg);
}

.scope-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 250px;
}

.scope-selector select {
  width: 100%;
  padding: 0.5rem 30px 0.5rem 10px;
  border-radius: 18px;
  border: 1px solid var(--clr-border-dark);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.notifications {
  position: relative;
  font-size: 1.25rem;
  margin-right: 10px;
}

.badge {
  background-color: var(--clr-primary); /* Reverted */
  color: var(--clr-primary-text);
  border-radius: 9999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  position: absolute;
  top: -8px;
  right: -12px;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-right: 20px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  object-fit: cover;
}

.name {
  font-weight: 600;
}

.role {
  font-size: 0.85rem;
  color: var(--clr-text-light);
}

/* Content Area */
.content {
  flex-grow: 1;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - 80px);
}

#content-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

/* New Content Wrapper inside iframe */
.content-wrapper {
  max-width: 1200px;
  margin: 0;
  padding: 2rem 2rem 2rem 3rem;
  box-sizing: border-box;
}

/* Content Section */
.content-section {
  display: block;
  height: 100%;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.content-section h1 {
  color: var(--clr-text-heading);
  font-size: 2rem;
  margin: 0;
  font-weight: 600;
}

.reports-container {}

.report-card {}

/* Updated Styles for Table Layout */
.reports-list-container { /* Applies to <table> now */
  width: 100%;
  border-collapse: collapse;
  /* border-radius, overflow, and border moved to wrapper */
}

/* NEW: Wrapper for table to handle rounded corners and border */
.table-wrapper {
  border: 1px solid var(--clr-border-light);
  border-radius: 12px;
  overflow: hidden;
}

/* REMOVED .reports-list-header, .header-item, and .report-card-row rules */

/* NEW: General Table Cell Styling (Header & Data) */
.reports-list-container th,
.reports-list-container td {
  padding: 1.25rem 1.5rem;
  text-align: left;
  vertical-align: middle; /* Vertically center content in cells */
  border-bottom: 1px solid var(--clr-border-light); /* Default row separator */
}

/* NEW: Table Header Specific Styling */
.reports-list-container thead th {
  background-color: var(--clr-header-bg);
  color: var(--clr-text-dark);
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 2px solid var(--clr-border-light); /* Thicker header bottom border */
}

/* NEW: Set specific width for the Frequency column (3rd column) */
.reports-list-container th:nth-child(3),
.reports-list-container td:nth-child(3) {
  width: 120px; /* Adjust as needed */
}

/* NEW: Remove border from the last row's cells */
.reports-list-container tbody tr:last-child td {
  border-bottom: none;
}

/* UPDATED: Banded Rows */
.reports-list-container tbody tr:nth-child(even) {
  background-color: var(--clr-row-even-bg);
}

/* UPDATED: Row Hover */
.reports-list-container tbody tr:hover {
  background-color: var(--clr-row-hover-bg);
}

/* Styles for content INSIDE table cells (mostly unchanged) */
.report-info h2 {
  color: var(--clr-text-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.report-info p.report-description {
  color: var(--clr-text-medium);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

.report-frequency select {
  width: 100%;
  padding: 0.5rem 30px 0.5rem 10px; /* Increased left padding again */
  border-radius: 18px;
  border: 1px solid var(--clr-border-dark);
  appearance: none;
  background-color: var(--clr-white);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  font-size: 0.9rem;
  cursor: pointer;
}

.report-delivery {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
}

.delivery-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--clr-text-medium);
  font-size: 0.9rem;
}

.delivery-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid var(--clr-border-medium);
  cursor: pointer;
  margin: 0;
}

.delivery-option span {
  line-height: 1;
}

.report-frequency {
  /* background-color: #fef9c3; */ /* TEMP: Removed */
  /* padding-left: 0; */ /* Reverted: Ensure no internal left padding */
}

/* Loading State */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: var(--clr-text-heading);
  font-size: 1.1rem;
  font-weight: 500;
}

/* General Button Styles */
.btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
  text-align: center;
}

.btn-primary {
  background-color: var(--clr-primary);
  color: var(--clr-primary-text);
  border-color: var(--clr-primary);
}

.btn-primary:hover {
  background-color: var(--clr-primary-hover);
  border-color: var(--clr-primary-hover);
}

.add-report-btn {}

.report-created-date {
  font-size: 0.9rem;
  color: var(--clr-text-medium);
  text-align: left;
  /* background-color: #dcfce7; */ /* TEMP: Removed */
  /* padding-left: 0; */ /* Reverted: Ensure no internal left padding */
}

/* Action Buttons */
.report-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.btn-xs {
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  border-radius: 15px;
}

/* Edit Button - Outline Style */
.btn-secondary {
  background-color: var(--clr-white);
  color: var(--clr-primary); /* Reverted */
  border: 1px solid var(--clr-primary); /* Reverted */
}

.btn-secondary:hover {
  background-color: var(--clr-secondary-hover-bg); /* Reverted */
  color: var(--clr-primary-hover); /* Reverted */
  border-color: var(--clr-primary); /* Reverted */
}

/* Delete Button - Outline Style */
.btn-danger {
  background-color: var(--clr-white);
  color: var(--clr-danger);
  border: 1px solid var(--clr-danger);
}

.btn-danger:hover {
  background-color: var(--clr-danger-bg-hover);
  color: var(--clr-danger-hover);
  border-color: var(--clr-danger);
}

/* Proactive Insights Specific Styles */

/* Header Adjustments */
.content-header .header-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.token-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-text-medium);
}

.token-control label {
  font-weight: 500;
  font-size: 0.9rem;
}

.token-control input[type="range"] {
  width: 150px;
  cursor: pointer;
}

.token-control output {
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 35px;
  text-align: right;
}

/* Table Grid Layout for Proactive Insights (5 columns) */
.reports-list-header.proactive-header {
  grid-template-columns: 1fr 4fr auto; /* Match summary: Priority, Theme, Toggle Space */
  align-items: start;
}

.report-card-row.proactive-row {
  display: block;
  padding: 0;
  /* Remove default bottom border again */
  border-bottom: none; 
  background-color: transparent;
  transition: background-color 0.2s ease;
}

/* Remove card styles specifically within active insights */
/* 
.active-insights-container .report-card-row.proactive-row {
  background-color: var(--clr-white);
  border: 1px solid var(--clr-border-medium);
  border-radius: 8px; 
  margin-bottom: 1rem; 
  overflow: hidden; 
}
*/

/* Remove last card margin rule */
/* 
.active-insights-container .report-card-row.proactive-row:last-child {
  margin-bottom: 0;
}
*/

.proactive-summary {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr auto; /* Added Status column */
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  cursor: default;
  background-color: var(--clr-white); /* Ensure this is white */
  transition: background-color 0.2s ease;
}

.insight-details-collapsible {
  display: grid;
  grid-template-columns: 3.5fr 1fr 1.5fr;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--clr-border-light);
  background-color: var(--clr-white); /* Ensure this is white */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.3s ease-in, padding 0.4s ease-out;
  padding-top: 0;
  padding-bottom: 0;
}

/* Styles when expanded */
.report-card-row.expanded .insight-details-collapsible {
  max-height: 500px;
  opacity: 1;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in, padding 0.5s ease-in-out;
}

/* Remove grid-column overrides */
.insight-details-collapsible > .proactive-insight-details,
.insight-details-collapsible > .proactive-channels,
.insight-details-collapsible > .proactive-actions {
  grid-column: auto;
}

/* Add styling for new labels inside collapsible area */
.insight-details-collapsible h4 {
  margin-top: 0; /* Remove default top margin */
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--clr-text-dark);
}

/* Hover state - apply to summary */
.report-card-row.proactive-row .proactive-summary:hover {
  background-color: var(--clr-row-hover-bg);
}

/* Restore banding rules */
.reports-list-container .report-card-row:nth-child(even) .proactive-summary,
.reports-list-container .report-card-row:nth-child(even) .insight-details-collapsible {
  background-color: var(--clr-row-even-bg);
}

/* Adjust hover rules to target summary (within the container)*/
.active-insights-container .reports-list-container .report-card-row.proactive-row .proactive-summary:hover {
  background-color: var(--clr-row-hover-bg);
}

/* Priority Label */
.priority-label {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  vertical-align: middle;
}

/* Priority Column container */
.proactive-priority {
  text-align: center;
}

.priority-1 { background-color: var(--clr-priority-1-bg); color: var(--clr-priority-1-text); }
.priority-2 { background-color: var(--clr-priority-2-bg); color: var(--clr-priority-2-text); }
.priority-3 { background-color: var(--clr-priority-3-bg); color: var(--clr-priority-3-text); }
.priority-4 { background-color: var(--clr-priority-4-bg); color: var(--clr-priority-4-text); }

/* Insight Details Column */
.proactive-insight-details {
  font-size: 0.9rem;
  color: var(--clr-text-medium);
}

.proactive-insight-details ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.5rem 0 0 0;
}

.proactive-insight-details p {
 margin: 0 0 0.5rem 0;
}

/* Channels Column */
.proactive-channels span {
  display: inline-block;
  background-color: var(--clr-channel-bg);
  color: var(--clr-channel-text);
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
}

/* Actions Column */
.proactive-actions {}

/* New Button Styles */
.btn-success {
  background-color: var(--clr-white);
  color: var(--clr-success);
  border: 1px solid var(--clr-success);
}

.btn-success:hover {
  background-color: var(--clr-success-bg-hover);
  color: var(--clr-success-hover);
  border-color: var(--clr-success);
}

.btn-warning {
  background-color: var(--clr-white);
  color: var(--clr-warning);
  border: 1px solid var(--clr-warning);
}

.btn-warning:hover {
  background-color: var(--clr-warning-bg-hover);
  color: var(--clr-warning-hover);
  border-color: var(--clr-warning);
}

/* Suggested Themes Section */
.suggested-themes-container {
  background-color: var(--clr-white);
  border: 1px solid var(--clr-border-light);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.suggested-themes-container h3 {
  color: var(--clr-text-heading);
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  border-bottom: 1px solid var(--clr-border-light);
  padding-bottom: 0.75rem;
}

.suggested-themes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.suggested-theme-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  background-color: var(--clr-light-bg);
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--clr-border-medium);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Add Hover Effect */
.suggested-theme-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.suggested-theme-content {
  position: relative;
  padding-top: 70px; /* Make space for the icon */
}

.suggested-theme-content img[alt="For You Icon"] {
  position: absolute;
  top: -10px;
  left: 0;
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.suggested-theme-content h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text-dark);
}

.suggested-theme-item p {
  margin: 0 0 1rem 0;
  color: var(--clr-text-medium);
  font-size: 0.9rem;
  line-height: 1.4;
}

.suggested-theme-item .btn-secondary {
  white-space: nowrap;
  margin-left: 0;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Theme Source Label */
.theme-source-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--clr-text-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  background-color: var(--clr-border-light);
  margin-bottom: 0.5rem;
  line-height: 1.2;
  z-index: 1; /* Ensure label appears above icon if they overlap */
}

/* Specific Styles for Labels */
.label-for-you {
  background-color: #e0e7ff;
  color: #3730a3;
}

.label-trending {
  background-color: var(--clr-channel-bg);
  color: var(--clr-channel-text);
}

.label-fireiq {
  background-color: var(--clr-priority-3-bg);
  color: var(--clr-priority-3-text);
}

/* Heading for Active Insights Table */
.active-insights-heading {
  color: var(--clr-text-heading);
  margin-top: 0; 
  margin-bottom: 0;
  font-size: 1.3rem;
  font-weight: 600;
  border-bottom: none;
  padding-bottom: 0;
}

/* Wrapper for Active Insights Title and Controls */
.active-insights-header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--clr-border-light);
  padding-bottom: 1rem;
}

/* Active Insights Container */
.active-insights-container {
  background-color: var(--clr-white);
  border: 1px solid var(--clr-border-light);
  border-radius: 12px;
  box-shadow: none;
  padding: 1.5rem; 
  margin-top: 2rem;
}

/* Target the inner list container for visual distinction (BORDER ONLY) */
.active-insights-container .reports-list-container {
  background-color: transparent; 
  border: 1px solid var(--clr-border-light);
  border-radius: 12px;
  overflow: hidden;
}

/* Note below Active Insights header */
.active-insights-note {
  font-size: 0.85rem;
  color: var(--clr-text-medium);
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

/* Prompt Library Styles */
.prompt-library-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.prompt-category {
  background-color: var(--clr-light-bg);
  border: 1px solid var(--clr-border-light);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.prompt-category h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text-heading);
  border-bottom: none;
  padding-bottom: 0;
}

.prompt-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--clr-border-medium);
  padding-bottom: 0.5rem;
}

.run-category-btn {
}

.prompt-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.prompt-category li {
  display: block;
  background-color: var(--clr-white);
  padding: 10px;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--clr-border-light);
  font-size: 0.9rem;
  color: var(--clr-text-dark);
  position: relative;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.prompt-category li:last-child {
  margin-bottom: 0;
}

.prompt-category li:hover {
  background-color: var(--clr-row-hover-bg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

.prompt-category li span {
}

.prompt-button-wrapper {
  text-align: left;
  margin-top: 0.75rem;
}

.run-prompt-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Styling for the new status indicator */
.proactive-status {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--clr-text-medium);
  text-align: center;
}

/* REMOVE the transparency rules for rows *within* the active container, as they should now have their own bg */
/*
.active-insights-container .proactive-summary,
.active-insights-container .insight-details-collapsible {
  background-color: transparent;
}
*/

/* REMOVE the rules that removed banding *within* the active container */
/*
.active-insights-container .reports-list-container .report-card-row:nth-child(even) .proactive-summary,
.active-insights-container .reports-list-container .report-card-row:nth-child(even) .insight-details-collapsible {
  background-color: transparent;
}
*/

.proactive-toggle-area {
  justify-self: end;
}

/* Add styling for new labels inside collapsible area */
.insight-details-collapsible h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--clr-text-dark);
}

/* == Recent Chats Page Styles == */

/* Overall Layout */
.chat-layout {
  display: flex;
  height: 100%; /* Fill the content area height */
  gap: 2rem; /* Space between panels */
  padding-top: 1rem; /* Add some padding at the top */
}

.chat-history-panel {
  flex: 0 0 340px; /* Fixed width for history panel */
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--clr-border-light);
  padding-right: 2rem;
  height: 100%;
}

.current-chat-panel {
  flex: 1; /* Take remaining space */
  display: flex;
  flex-direction: column;
  max-height: 1050px;
  overflow: hidden; /* Prevent content spill */
}

.chat-history-panel h3,
.current-chat-panel h3 {
  color: var(--clr-text-heading);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
}

/* Chat History Panel */
.chat-search-bar {
  display: flex;
  position: relative;
  gap: 0;
  margin-bottom: 1.5rem;
}

.chat-search-bar input[type="search"] {
  flex-grow: 1;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 1px solid var(--clr-border-medium);
  border-radius: 18px;
  font-size: 0.9rem;
}

.chat-search-bar button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 40px;
  background: none;
  border: none;
  border-radius: 0 18px 18px 0;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--clr-text-light);
  padding: 0;
}

.chat-list {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  margin-right: -0.5rem;
  max-height: 850px;
}

/* Webkit Scrollbar Styling */
.chat-list::-webkit-scrollbar {
  width: 10px; /* Increased width */
}
.chat-list::-webkit-scrollbar-track {
  background: transparent;
}
.chat-list::-webkit-scrollbar-thumb {
  background-color: var(--clr-border-medium);
  border-radius: 3px;
}

.chat-item {
  background-color: var(--clr-light-bg);
  border: 1px solid var(--clr-border-light);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-item:hover {
  background-color: var(--clr-row-hover-bg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.chat-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.chat-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-medium);
}

/* Commenting out conflicting chat-status rules previously defined here */
/*
.chat-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.chat-status.processing {
  background-color: var(--clr-primary);
  color: var(--clr-primary-text);
}

.chat-status.success {
  background-color: var(--clr-priority-4-bg);
  color: var(--clr-priority-4-text);
}
*/

.chat-menu {
  background: none;
  border: none;
  font-weight: bold;
  color: var(--clr-text-lighter);
  cursor: pointer;
  padding: 0 0.2rem;
  font-size: 1.1rem;
  line-height: 1;
}

.chat-title {
  font-size: 0.9rem;
  color: var(--clr-text-dark);
  margin: 0;
  line-height: 1.4;
}

/* Current Chat Panel */
.conversation-area {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem; 
  margin-bottom: 1rem;
  background-color: var(--clr-white);
}

.message {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.message .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.message p {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  line-height: 1.5;
  font-size: 0.95rem;
}

.ai-message p {
  background-color: var(--clr-light-bg);
  border: 1px solid var(--clr-border-light);
  color: var(--clr-text-dark);
  border-top-left-radius: 0; /* Give it a slight bubble feel */
}

.user-message {
  justify-content: flex-end; /* Align user message to the right */
}

.user-message p {
  background-color: var(--clr-sidebar-active-bg); /* Light purple/blue */
  color: var(--clr-sidebar-text);
  border-top-right-radius: 0; /* Give it a slight bubble feel */
}

.user-message .avatar {
  order: 1; /* Move avatar to the right */
}

/* Task Status Section */
.task-status-section {
  background-color: var(--clr-light-bg);
  border: 1px solid var(--clr-border-light);
  border-radius: 8px;
  margin: 1.5rem 0;
  padding: 0.5rem 1.5rem 1rem 1.5rem;
  position: relative; /* Needed for pseudo-elements */
}

.task-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem 0;
}

.task-status-header h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text-medium);
}

.task-status-header .status-complete {
  color: var(--clr-success);
  font-weight: 600;
}

.task-status-header .toggle-details {
  background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--clr-text-light);
}

.task-steps {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  position: relative; /* Needed for pseudo-element line */
}

/* Vertical connector line */
.task-steps::before {
  content: '';
  position: absolute;
  left: 10px; /* Adjust based on icon/marker size */
  top: 10px; /* Start below the first item's center */
  bottom: 10px; /* End above the last item's center */
  width: 2px;
  background-color: var(--clr-border-medium);
  z-index: 0;
}

.task-steps li {
  display: grid;
  /* Adjust grid columns for consistent widths */
  grid-template-columns: 24px 180px 60px 50px 1fr;
  gap: 0.75rem 1rem; 
  align-items: start; /* Align items to top */
  padding: 0.8rem 0; /* Restore original padding */
  border-bottom: 1px solid var(--clr-border-light); /* Restore border */
  font-size: 0.85rem;
  position: relative; /* Needed for step marker */
  /* Remove progress bar styles */
  /* background-color: var(--clr-border-light); */
  /* border-radius: 6px; */
  /* margin-bottom: 0.5rem; */
  /* overflow: hidden; */
  /* z-index: 1; */
}

/* Restore diamond marker */
.task-steps li::before {
 content: '\25C7'; 
 position: absolute;
 left: 2px; 
 top: 50%;
 transform: translateY(-50%);
 width: 16px;
 height: 16px;
 text-align: center;
 line-height: 16px; 
 color: var(--clr-primary); /* Reverted */
 background-color: var(--clr-white); 
 font-size: 16px; 
 z-index: 1; 
}

.task-steps li:last-child {
  border-bottom: none; 
}

/* Restore original grid column assignments and adjust */
.task-steps li > span:nth-of-type(1) { /* Step Name */
  grid-column: 2 / 3;
}

.task-steps .status-badge { /* Status Badge */
   grid-column: 3 / 4;
   justify-self: start; 
}

/* Style the success badge as a pill */
.task-steps .status-badge.success {
  background-color: var(--clr-success);
  color: var(--clr-primary-text);
  padding: 0.2rem 0.8rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.task-steps .timestamp { /* Timestamp */
  grid-column: 4 / 5; /* Move to 4th column */
  text-align: right;
  color: var(--clr-text-medium); /* Ensure color */
  font-size: 0.8rem; /* Adjust size */
}

.task-steps .step-details { /* Details Text */
  color: var(--clr-text-medium); 
  font-size: 0.75rem; /* Reduce font size */ 
  grid-column: 5 / 6; /* Move to last column */
  /* white-space: nowrap; */ /* REMOVE to allow wrapping */
}

.task-steps button.btn { /* Button */
 grid-column: 5 / 6; /* Move to last column */
 justify-self: end; /* Align button right */
 grid-row: 1; /* Keep on same row */
 margin-left: 0; /* Remove previous margin */
}

/* AI Response Area */
.ai-response-area {
  margin-top: 1rem;
}

.ai-response-area > p {
  /* Inherits from .ai-message p essentially, but outside the bubble */
  background-color: var(--clr-light-bg);
  border: 1px solid var(--clr-border-light);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.chart-area {
  text-align: center; /* Center the placeholder image */
  margin-bottom: 1rem;
}

.chart-area img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--clr-border-light);
  border-radius: 4px;
}

.feedback-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.feedback-buttons button {
  background: none;
  border: 1px solid var(--clr-border-medium);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--clr-text-medium);
  transition: background-color 0.2s, color 0.2s;
}

.feedback-buttons button:hover {
  background-color: var(--clr-secondary-hover-bg);
  color: var(--clr-text-dark);
}

/* Message Input Area */
.message-input-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem; 
  border-top: 1px solid var(--clr-border-light);
  background-color: var(--clr-white);
}

.message-input-area textarea {
  flex-grow: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--clr-border-medium);
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: none; /* Prevent manual resizing */
  min-height: 40px; /* Minimum height */
  max-height: 150px; /* Maximum height before scroll */
  overflow-y: auto;
}

.message-input-area .send-button {
  flex-shrink: 0;
  background-color: var(--clr-primary); /* Reverted */
  color: var(--clr-primary-text);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.message-input-area .send-button:hover {
  background-color: var(--clr-primary-hover); /* Reverted */
}

/* Styles for the inlined For You SVG Icon */
.for-you-icon {
  position: absolute;
  top: -10px;
  left: 0;
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.for-you-icon path {
  stroke: #3730a3; /* Set stroke color */
  fill: none; /* Default: no fill for stroked paths */
}

/* Target the specific background path (identified by opacity) */
.for-you-icon path[opacity="0.1"] {
  fill: #e0e7ff; /* Set background fill color */
  stroke: none; /* Remove stroke from background */
  opacity: 1; /* Override the default opacity */
}

/* Styles for the inlined FireIQ Noticed SVG Icon */
.fireiq-noticed-icon {
  position: absolute;
  top: -10px;
  left: 0;
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.fireiq-noticed-icon path {
  stroke: #a16207; /* Amber color from label-fireiq */
  fill: none;
}

/* Target the specific background path */
.fireiq-noticed-icon path[opacity="0.1"] {
  fill: #fef9c3; /* Light yellow color from label-fireiq */
  stroke: none;
  opacity: 1;
}

/* Styles for the inlined Trending SVG Icon */
.trending-icon {
  position: absolute;
  top: -10px;
  left: 0;
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.trending-icon path {
  stroke: var(--clr-success); /* Success Green stroke */
  fill: none;
}

/* Target the specific background path */
.trending-icon path[opacity="0.1"] {
  fill: var(--clr-priority-4-bg); /* Light Success Green fill */
  stroke: none;
  opacity: 1;
}

/* Styles for the inlined Beaker SVG Icon in Sidebar */
.sidebar-btn .beaker-icon {
  /* Size is set inline, position adjusted by flexbox */
}

.sidebar-btn .beaker-icon path {
  stroke: var(--clr-sidebar-text); /* Sidebar text color for stroke */
  fill: none;
}

.sidebar-btn .beaker-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg); /* Sidebar background color for fill */
  stroke: none;
  opacity: 1;
}

/* Ensure active state styles override */
.sidebar-btn.active .beaker-icon path {
  stroke: var(--clr-sidebar-text); /* Keep same stroke on active */
}

.sidebar-btn.active .beaker-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg); /* Use active background for fill */
}

/* Styles for the inlined Report SVG Icon in Sidebar */
.sidebar-btn .report-icon {
  /* Size is set inline, position adjusted by flexbox */
}

.sidebar-btn .report-icon path {
  /* Override inline styles with CSS variables */
  stroke: var(--clr-sidebar-text) !important;
  fill: none !important;
  stroke-width: 0.6px !important; /* Consistent stroke width */
}

/* Target the specific background path (the one with fill initially) */
.sidebar-btn .report-icon path[style*="fill:#ced2f3"] {
  fill: var(--clr-sidebar-bg) !important;
  stroke: var(--clr-sidebar-text) !important; /* Keep the outline */
  /* stroke-width is now handled by the general rule above */
}

/* Active state overrides */
.sidebar-btn.active .report-icon path {
  stroke: var(--clr-sidebar-text) !important;
  /* Stroke width remains consistent in active state */
}

.sidebar-btn.active .report-icon path[style*="fill:#ced2f3"] {
  fill: var(--clr-sidebar-active-bg) !important;
  stroke: var(--clr-sidebar-text) !important; /* Keep the outline */
}

/* Styles for the inlined Book SVG Icon in Sidebar */
.sidebar-btn .book-icon {
  /* Size is set inline, position adjusted by flexbox */
}

.sidebar-btn .book-icon path {
  stroke: var(--clr-sidebar-text); /* Sidebar text color for stroke */
  fill: none;
}

.sidebar-btn .book-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg); /* Sidebar background color for fill */
  stroke: none;
  opacity: 1;
}

/* Ensure active state styles override */
.sidebar-btn.active .book-icon path {
  stroke: var(--clr-sidebar-text); /* Keep same stroke on active */
}

.sidebar-btn.active .book-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg); /* Use active background for fill */
}

/* Styles for the inlined Gem SVG Icon in Sidebar */
.sidebar-btn .gem-icon {
  /* Size is set inline, position adjusted by flexbox */
}

.sidebar-btn .gem-icon path {
  stroke: var(--clr-sidebar-text); /* Sidebar text color for stroke */
  fill: none;
  stroke-width: 2px !important; /* Ensure consistent stroke width */
}

.sidebar-btn .gem-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg); /* Sidebar background color for fill */
  stroke: none;
  opacity: 1;
}

/* Ensure active state styles override */
.sidebar-btn.active .gem-icon path {
  stroke: var(--clr-sidebar-text); /* Keep same stroke on active */
}

.sidebar-btn.active .gem-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg); /* Use active background for fill */
}

/* Styles for the inlined Star SVG Icon in Sidebar */
.sidebar-btn .star-icon {
  /* Size is set inline, position adjusted by flexbox */
}

.sidebar-btn .star-icon path {
  stroke: var(--clr-sidebar-text); /* Sidebar text color for stroke */
  fill: none;
  stroke-width: 2px !important; /* Ensure consistent stroke width */
}

.sidebar-btn .star-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg); /* Sidebar background color for fill */
  stroke: none;
  opacity: 1;
}

/* Ensure active state styles override */
.sidebar-btn.active .star-icon path {
  stroke: var(--clr-sidebar-text); /* Keep same stroke on active */
}

.sidebar-btn.active .star-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg); /* Use active background for fill */
}

/* Styles for the inlined Clock SVG Icon in Sidebar */
.sidebar-btn .clock-icon {
  /* Size is set inline, position adjusted by flexbox */
}

.sidebar-btn .clock-icon path {
  stroke: var(--clr-sidebar-text); /* Sidebar text color for stroke */
  fill: none;
  stroke-width: 2px !important; /* Ensure consistent stroke width */
}

.sidebar-btn .clock-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg); /* Sidebar background color for fill */
  stroke: none;
  opacity: 1;
}

/* Ensure active state styles override */
.sidebar-btn.active .clock-icon path {
  stroke: var(--clr-sidebar-text); /* Keep same stroke on active */
}

.sidebar-btn.active .clock-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg); /* Use active background for fill */
}

/* Styles for the inlined Cog SVG Icon in Sidebar */
.sidebar-btn .cog-icon {
  /* Size is set inline, position adjusted by flexbox */
}

.sidebar-btn .cog-icon path {
  stroke: var(--clr-sidebar-text); /* Sidebar text color for stroke */
  fill: none;
  stroke-width: 2px !important; /* Ensure consistent stroke width */
}

.sidebar-btn .cog-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg); /* Sidebar background color for fill */
  stroke: none;
  opacity: 1;
}

/* Ensure active state styles override */
.sidebar-btn.active .cog-icon path {
  stroke: var(--clr-sidebar-text); /* Keep same stroke on active */
}

.sidebar-btn.active .cog-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg); /* Use active background for fill */
}

/* Styles for the inlined Help SVG Icon in Sidebar */
.sidebar-btn .help-icon {
  /* Size is set inline, position adjusted by flexbox */
}

.sidebar-btn .help-icon path {
  stroke: var(--clr-sidebar-text); /* Sidebar text color for stroke */
  fill: none;
  stroke-width: 2px !important; /* Ensure consistent stroke width */
}

.sidebar-btn .help-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg); /* Sidebar background color for fill */
  stroke: none;
  opacity: 1;
}

/* Ensure active state styles override */
.sidebar-btn.active .help-icon path {
  stroke: var(--clr-sidebar-text); /* Keep same stroke on active */
}

.sidebar-btn.active .help-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg); /* Use active background for fill */
}

/* Styles for the inlined New (Circle Plus) SVG Icon in the Primary Sidebar Button */
.sidebar-btn.primary .new-icon {
  /* Size is set inline, position adjusted by flexbox */
}

.sidebar-btn.primary .new-icon path {
  stroke: var(--clr-primary-text); /* Use primary button text color (white) for stroke */
  fill: none;
  stroke-width: 2px !important; /* Ensure consistent stroke width */
}

.sidebar-btn.primary .new-icon path[opacity="0.1"] {
  fill: var(--clr-primary); /* Reverted */
  stroke: none;
  opacity: 1;
}

/* No separate active state needed as primary button style doesn't change on active/hover */

/* Styles for the AI Avatar SVG */
.ai-avatar-icon path:nth-child(1) {
  fill: var(--clr-primary); /* Reverted */
}

.ai-avatar-icon path:nth-child(2) {
  fill: var(--clr-sidebar-text); /* Reverted */
}

.ai-avatar-icon path:nth-child(3) {
  fill: var(--clr-primary); /* Reverted */
}