/* ============================================
   MICROSOFT COPILOT STUDIO ESTIMATOR
   Enhanced UX Version - Modern Design
   ============================================ */

/* === ANIMATIONS & KEYFRAMES === */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* === MICROSOFT BRANDING === */
.microsoft-header-bar {
  background: transparent;
  border-bottom: none;
  padding: 24px 0 16px 0;
  position: relative;
  width: 100%;
}

.microsoft-header-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.microsoft-logo {
  height: 60px;
  width: auto;
  display: block;
}

.microsoft-footer {
  background: transparent;
  border-top: none;
  margin-top: auto;
  padding: 32px 0;
  width: 100%;
}

.microsoft-footer-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 16px;
}

.footer-links a {
  color: #5E5E5E;
  text-decoration: none;
  font-size: 13px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #000000;
  text-decoration: underline;
}

.footer-copyright {
  color: #5E5E5E;
  font-size: 12px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer-copyright p {
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  .microsoft-logo {
    content: url('microsoft-logo-white.png');
  }

  .footer-links a {
    color: #E1E1E1;
  }

  .footer-links a:hover {
    color: #FFFFFF;
  }

  .footer-copyright {
    color: #A0A0A0;
  }
}

/* === GENERAL PAGE STYLING === */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  color: #242424;
  letter-spacing: 0.2px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  animation: fadeIn 0.6s ease-out;
}

.hidden {
  display: none !important;
}

.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
  flex: 1;
}

/* === HEADER SECTION === */
header {
  text-align: center;
  padding: 30px 20px 20px;
  margin: 0 0 30px 0;
}

header h1 {
  font-size: 28px;
  color: #0078D4;
  margin-bottom: 12px;
  font-weight: 600;
  margin-top: 0;
}

header p {
  font-size: 15px;
  color: #605E5C;
  margin: 0;
  line-height: 24px;
  font-weight: 400;
}

/* === PRICING INFO SECTION === */
.pricing-info {
  margin: 0 auto 30px;
  padding: 20px 20px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  border-top: 1px solid #F3F2F1;
  border-bottom: 1px solid #F3F2F1;
}

.pricing-info p {
  font-size: 15px;
  color: #323130;
  margin: 0;
}

.pricing-link {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  display: block;
  margin-top: 8px;
}

/* === LINKS === */
a {
  color: #0078D4;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

a:hover {
  color: #106EBE;
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #0078D4;
  outline-offset: 2px;
  border-radius: 2px;
}

/* === BUTTONS === */
.button-container {
  margin: 24px auto;
  text-align: center;
  max-width: 1200px;
  animation: fadeIn 0.8s ease-out 0.3s both;
}

.button-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

fluent-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

fluent-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

fluent-button:active {
  transform: translateY(0);
}

fluent-button::part(control) {
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
}

.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* === LAYOUT === */
.estimator-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-top: 20px;
  animation: fadeIn 1s ease-out 0.4s both;
  align-items: start;
}

/* Left column contains all multi-agent sections */
.multi-agent-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* === FORM PANEL === */
.estimator-form {
  flex: 1.5;
  padding: 0 32px 0 0;
}

.estimator-form h2 {
  font-size: 24px;
  color: #0F6CBD;
  border-bottom: 3px solid #0078D4;
  padding-bottom: 12px;
  margin-bottom: 24px;
  font-weight: 700;
}

.estimator-form h3 {
  color: #323130;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin-top: 24px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.estimator-form h3::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #0078D4 0%, #0F6CBD 100%);
  border-radius: 2px;
}

.estimator-form p {
  color: #605E5C;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 8px;
  margin-bottom: 20px;
  max-width: 700px;
}

/* === FORM ELEMENTS === */
.form-group {
  margin-bottom: 24px;
  animation: fadeIn 0.4s ease-out;
}

label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: #323130;
  padding-bottom: 10px;
  letter-spacing: 0.1px;
}

.radio-group label {
  display: block;
  font-weight: 400;
  font-size: 14px;
  padding-bottom: 0;
}

label.required::after {
  content: " *";
  color: #D13438;
  font-weight: 600;
}

/* === INPUT FIELDS === */
input,
select {
  width: 75%;
  padding: 12px 14px;
  border: 1px solid #EDEBE9;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  background: white;
}

input:hover {
  border-color: #C8C6C4;
}

input[type="number"],
input[type="text"] {
  outline: none;
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
  border-color: #0078D4;
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

input::placeholder {
  color: #A19F9D;
  font-style: italic;
}

/* === RADIO BUTTONS === */
.radio-group {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  margin-left: 0;
  padding-left: 0;
}

.radio-group input {
  width: auto;
  accent-color: #0078D4;
  cursor: pointer;
  margin: 0;
}

.radio-group label {
  margin-left: 4px;
  margin-right: 16px;
}

.stacked-radio-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: #F3F2F1;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.radio-option:hover {
  background: #EDEBE9;
  border-color: #C8C6C4;
  transform: translateX(4px);
}

.radio-option:has(input:checked) {
  background: linear-gradient(135deg, #EFF6FC 0%, #DEECF9 100%);
  border-color: #0078D4;
  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.15);
}

.radio-option input[type="radio"] {
  flex-shrink: 0;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #0078D4;
  cursor: pointer;
}

.radio-option label {
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: #323130;
  padding: 0;
  margin: 0;
}

/* === INPUT PAIRS === */
.input-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: end;
}

.input-pair input,
.input-pair select {
  width: 100%;
}

/* === DIVIDERS === */
hr {
  margin: 32px 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #EDEBE9 50%, transparent 100%);
}

/* === ESTIMATION PANEL === */
.estimation-panel {
  flex: 1;
  width: 100%;
  padding: 0 0 0 32px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.estimation-panel h2 {
  font-size: 24px;
  color: #0F6CBD;
  border-bottom: 3px solid #0078D4;
  padding-bottom: 12px;
  margin-bottom: 24px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.estimation-panel .total-messages {
  font-size: 32px;
  font-weight: 700;
  color: #107C10;
  background: linear-gradient(135deg, #107C10 0%, #0B6A0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pulse 2s ease-in-out infinite;
}

.estimation-section {
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
  border-radius: 12px;
  border-left: 4px solid #0078D4;
  transition: all 0.2s ease;
}

.estimation-section:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.estimation-section h3 {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  color: #323130;
  margin-bottom: 16px;
  align-items: center;
}

.total-messages,
.auto-calc {
  font-size: 24px;
  font-weight: 700;
  color: #0078D4;
}

/* === MESSAGE DISPLAY === */
ul {
  list-style: none;
  padding-left: 0;
  font-size: 14px;
  margin: 0;
}

ul li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding: 12px 12px 12px 28px;
  margin-bottom: 8px;
  background: white;
  border-radius: 8px;
  transition: all 0.2s ease;
  min-height: 40px;
}

ul li:hover {
  background: #F3F2F1;
  transform: translateX(4px);
}

ul li::before {
  content: "•";
  position: absolute;
  left: 12px;
  top: 12px;
  color: #0078D4;
  font-size: 1.2em;
  line-height: 1;
  font-weight: bold;
}

ul span.listnote {
  font-size: 13px;
  font-style: italic;
  color: #605E5C;
  line-height: 20px;
  font-weight: 400;
  padding: 8px 12px;
  background: #FFF4CE;
  border-radius: 6px;
  display: block;
  margin-top: 8px;
  border-left: 3px solid #F7B500;
}

/* Highlighted negated credits - Microsoft 365 theme */
span.listnote.negated-credits-highlight {
  background: #DFF6DD;
  color: #323130;
  font-weight: 400;
  padding: 10px 12px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

span.listnote.negated-credits-highlight em {
  font-style: normal;
  font-weight: 400;
}

span.listnote.negated-credits-highlight #negated-knowledge-user-count,
span.listnote.negated-credits-highlight #negated-actions-user-count,
span.listnote.negated-credits-highlight #negated-flows-user-count,
span.listnote.negated-credits-highlight #negated-modifiers-user-count {
  font-weight: 400;
  color: #323130;
}

/* Adjust spacing for negated credit values */
span.listnote.negated-credits-highlight .message-sub-value {
  margin-left: 8px;
}

.message-value {
  color: #0078D4;
  font-weight: 700;
  font-size: 20px;
}

.message-sub-value {
  color: #323130;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 1rem;
  font-size: 14px;
}

/* === MESSAGE TABLE === */
.message-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.message-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: white;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.message-row:hover {
  background: #F3F2F1;
  transform: translateX(2px);
}

.message-row span {
  font-size: 14px;
  color: #605E5C;
}

.sub-message-value {
  font-weight: 700;
  color: #0078D4;
  font-size: 16px;
}

/* === TABLES === */
th {
  font-weight: 600;
  color: #323130;
  text-align: left;
  padding: 12px 8px;
  background: #F3F2F1;
  border-bottom: 2px solid #0078D4;
}

/* Agent tools/actions table styling */
#agentActionsSection table,
#promptToolInfoGroup table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#agentActionsSection th,
#agentActionsSection td,
#promptToolInfoGroup th,
#promptToolInfoGroup td {
  padding: 12px;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  border-bottom: 1px solid #EDEBE9;
}

#agentActionsSection tr:last-child td,
#promptToolInfoGroup tr:last-child td {
  border-bottom: none;
}

#agentActionsSection tbody tr,
#promptToolInfoGroup tbody tr {
  transition: background 0.2s ease;
}

#agentActionsSection tbody tr:hover,
#promptToolInfoGroup tbody tr:hover {
  background: #F3F2F1;
}

#agentActionsSection input,
#promptToolInfoGroup input {
  width: 100%;
  box-sizing: border-box;
}

/* === TOOLTIPS === */
.tooltip-wrapper {
  display: inline;
  position: relative;
  vertical-align: middle;
}

.info-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: #EFF6FC;
  color: #0078D4;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 2px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  vertical-align: middle;
}

.info-circle:hover {
  background-color: #0078D4;
  color: white;
  transform: scale(1.1);
  border-color: #0078D4;
}

.tooltip-text {
  visibility: hidden;
  background-color: #323130;
  color: white;
  font-weight: 400;
  font-size: 13px;
  text-align: left;
  border-radius: 8px;
  padding: 14px 18px;
  position: absolute;
  z-index: 1000;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 300px;
  width: max-content;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: all 0.3s ease;
  white-space: normal;
}

.tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #323130 transparent transparent transparent;
}

.tooltip-wrapper:hover .tooltip-text,
.tooltip-wrapper:focus-within .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* === TRIGGER WRAPPER === */
.trigger-wrapper {
  margin-bottom: 20px;
  padding: 20px;
  border: 2px solid #EDEBE9;
  border-radius: 12px;
  background: linear-gradient(135deg, #FAFAFA 0%, #F8F8F8 100%);
  transition: all 0.2s ease;
}

.trigger-wrapper:hover {
  border-color: #C8C6C4;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.trigger-wrapper h3 {
  font-size: 17px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trigger-wrapper h3::before {
  content: '';
  width: 3px;
  height: 18px;
  background: #0078D4;
  border-radius: 2px;
}

.trigger-wrapper label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #323130;
}

.trigger-wrapper input[type="number"],
.trigger-wrapper input[type="radio"] {
  margin-bottom: 12px;
}

.trigger-wrapper .input-pair,
.trigger-wrapper .input-pair-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: end;
}

/* Ensure logo containers and images match page background */
.category-card,
.category-icon,
.category-icon img,
.agent-card,
.agent-card-header,
.agent-card-header img,
.category-card img,
.agent-card img {
  background-color: transparent !important;
  background: transparent !important;
}

/* Ensure SVG logos also have transparent backgrounds */
.category-icon svg,
.agent-card-header svg {
  background-color: transparent !important;
  background: transparent !important;
}

/* === LEGAL === */
.legal {
  margin-top: 60px;
  padding: 24px 20px;
  border-top: 1px solid #F3F2F1;
}

.legal p {
  font-size: 12px;
  color: #605E5C;
  line-height: 20px;
  text-align: center;
  margin: 0 auto;
}

/* === UTILITY CLASSES === */
.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(50%);
}

.table-container {
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* === LOADING STATE === */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: shimmer 1.5s infinite;
}

/* ============================================
   MULTI-AGENT SECTIONS
   ============================================ */

/* Section styling */
.category-selection-section,
.agent-selection-section,
.agent-configurations-section {
  padding: 0 0 32px 0;
  margin-bottom: 32px;
}

/* Hide agent selection section by default until categories are selected */
.agent-selection-section {
  display: none;
}

.category-selection-section h2,
.agent-selection-section h2,
.agent-configurations-section h2 {
  font-size: 20px;
  color: #323130;
  padding-bottom: 12px;
  margin-bottom: 20px;
  margin-top: 0;
  font-weight: 600;
}

.section-description {
  color: #605E5C;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 20px;
}

/* Category Grid */
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 20px;
}

.category-card {
  background: transparent;
  padding: 16px 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  border-bottom: 1px solid #F3F2F1;
}

.category-card:hover {
  background: #FAFAFA;
}

.category-card.selected {
  background: #F8FBFF;
}

.category-card input[type="checkbox"] {
  width: 28px;
  height: 28px;
  margin: 0;
  margin-top: 0;
  cursor: pointer;
  flex-shrink: 0;
  order: 3;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #FFFFFF;
  border: 3px solid #605E5C;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s ease;
}

.category-card input[type="checkbox"]:hover {
  border-color: #0078D4;
}

.category-card input[type="checkbox"]:checked {
  background-color: #0078D4 !important;
  border-color: #0078D4 !important;
  border-width: 0 !important;
  opacity: 1 !important;
}

.category-card input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #FFFFFF !important;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.category-icon {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F2F1;
  border-radius: 4px;
}

.category-icon svg,
.category-icon img {
  width: 72px;
  height: 72px;
  display: block;
}

.category-info {
  flex: 1;
  min-width: 0;
}

.category-name {
  font-weight: 600;
  font-size: 15px;
  color: #242424;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.category-count {
  font-size: 13px;
  color: #605E5C;
  margin: 0;
  font-weight: 400;
}

.coming-soon-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #605E5C;
  background: #F3F2F1;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-card.coming-soon {
  opacity: 0.6;
  cursor: not-allowed;
}

.category-card.coming-soon:hover {
  background: #F3F2F1;
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

/* Agent Cards Grid */
.agent-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 20px;
}

.agent-card {
  background: transparent;
  padding: 16px 0;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #F3F2F1;
}

.agent-card:hover {
  background: #FAFAFA;
}

.agent-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.agent-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F2F1;
  border-radius: 4px;
}

.agent-icon svg,
.agent-icon img {
  width: 72px;
  height: 72px;
  display: block;
}

.agent-card-title {
  flex: 1;
  min-width: 0;
}

.agent-name {
  font-weight: 600;
  font-size: 15px;
  color: #242424;
  margin: 0 0 4px 0;
}

.agent-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #605E5C;
  margin-bottom: 8px;
}

.agent-category-badge::before {
  content: '⚙';
  font-size: 14px;
}

.agent-description {
  font-size: 13px;
  color: #605E5C;
  line-height: 18px;
  margin: 0;
}

.agent-add-button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  background: #0078D4;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 400;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.agent-add-button:hover {
  background: #106EBE;
}

.agent-add-button:active {
  background: #005A9E;
}

/* No items messages */
.no-agents-message,
.no-configs-message {
  text-align: center;
  padding: 40px;
  color: #605E5C;
  font-size: 14px;
  background: #F3F2F1;
  border-radius: 8px;
  margin-top: 20px;
}

/* Agent Configuration Cards */
.agent-configs-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.agent-config-card {
  background: #FAFAFA;
  border: 2px solid #EDEBE9;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.agent-config-card.expanded {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.agent-config-header {
  background: white;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.agent-config-header:hover {
  background: #F8F8F8;
}

.agent-config-icon {
  font-size: 24px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-config-icon svg,
.agent-config-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.agent-config-title {
  flex: 1;
}

.agent-config-name {
  font-weight: 600;
  font-size: 16px;
  color: #323130;
  margin: 0 0 4px 0;
}

.agent-config-category {
  font-size: 12px;
  color: #605E5C;
  margin: 0;
}

.agent-config-preview {
  font-size: 20px;
  font-weight: 700;
  color: #0078D4;
  margin-right: 16px;
}

.agent-config-actions {
  display: flex;
  gap: 8px;
}

.agent-action-button {
  background: transparent;
  border: 1px solid #EDEBE9;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  color: #323130;
  font-weight: 500;
}

.agent-action-button:hover {
  background: #F3F2F1;
  border-color: #D2D0CE;
}

.agent-action-button.duplicate:hover {
  background: #E1F5FE;
  border-color: #0078D4;
  color: #0078D4;
}

.agent-action-button.remove:hover {
  background: #FDE7E9;
  border-color: #D13438;
  color: #D13438;
}

.expand-toggle {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
  padding: 4px;
  line-height: 1;
}

.agent-config-card.expanded .expand-toggle {
  transform: rotate(90deg);
}

.agent-config-body {
  padding: 0 24px 24px 24px;
  display: none;
}

.agent-config-card.expanded .agent-config-body {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

/* Agent config form inherits existing form styles */
.agent-config-form {
  background: white;
  padding: 24px;
  border-radius: 8px;
}

.agent-config-form h3 {
  color: #323130;
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-config-form h3::before {
  content: '';
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg, #0078D4 0%, #0F6CBD 100%);
  border-radius: 2px;
}

.agent-config-form .form-group {
  margin-bottom: 20px;
}

.agent-config-form .input-pair {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.agent-config-form .input-pair .form-group {
  flex: 1;
  margin-bottom: 0;
}

.agent-config-form input[type="text"],
.agent-config-form input[type="number"],
.agent-config-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #D2D0CE;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.agent-config-form input[type="text"]:focus,
.agent-config-form input[type="number"]:focus,
.agent-config-form select:focus {
  outline: none;
  border-color: #0078D4;
  box-shadow: 0 0 0 1px #0078D4;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Large screens */
@media screen and (max-width: 1400px) {
  .container {
    max-width: 1200px;
    padding: 15px;
  }

  header h1 {
    font-size: 28px;
  }
}

/* Medium screens - Tablets */
@media screen and (max-width: 1024px) {
  .container {
    padding: 10px;
  }

  .estimator-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .estimation-panel {
    position: static;
    max-height: none;
  }

  /* Adjust multi-agent grids for tablets */
  .category-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .agent-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .category-icon,
  .agent-icon {
    width: 88px;
    height: 88px;
  }

  .category-icon svg,
  .category-icon img,
  .agent-icon svg,
  .agent-icon img {
    width: 66px;
    height: 66px;
  }

  .estimator-form,
  .estimation-panel {
    flex: none;
    width: 100%;
  }

  .estimation-panel {
    position: relative;
    top: 0;
    max-height: none;
  }

  .input-pair {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .button-group {
    flex-wrap: wrap;
    gap: 10px;
  }

  header {
    padding: 24px 16px;
  }

  header h1 {
    font-size: 26px;
  }
}

/* Small screens - Mobile landscape */
@media screen and (max-width: 768px) {
  body {
    padding: 14px;
  }

  .container {
    margin: 10px auto;
    padding: 8px;
  }

  header {
    padding: 20px 16px;
    border-radius: 12px;
  }

  header h1 {
    font-size: 22px;
  }

  header p {
    font-size: 14px;
    line-height: 22px;
  }

  .estimator-form,
  .estimation-panel {
    padding: 24px;
    border-radius: 12px;
  }

  .estimator-form h3 {
    font-size: 18px;
  }

  .form-group {
    margin-bottom: 28px;
  }

  .estimation-section {
    padding: 20px;
    margin-bottom: 20px;
  }

  .radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .button-group {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .button-group fluent-button,
  .button-group a {
    width: 100%;
    min-width: 220px;
  }

  /* Multi-agent sections responsive */
  .category-selection-section,
  .agent-selection-section,
  .agent-configurations-section {
    padding: 20px;
    border-radius: 12px;
  }

  .category-selection-section h2,
  .agent-selection-section h2,
  .agent-configurations-section h2 {
    font-size: 20px;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .category-card {
    padding: 20px 0;
  }

  .category-icon {
    width: 80px;
    height: 80px;
  }

  .category-icon svg,
  .category-icon img {
    width: 60px;
    height: 60px;
  }

  .agent-cards-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .agent-card {
    padding: 20px 0;
  }

  .agent-icon {
    width: 80px;
    height: 80px;
  }

  .agent-icon svg,
  .agent-icon img {
    width: 60px;
    height: 60px;
  }

  .agent-add-button {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
  }

  .agent-config-header {
    padding: 16px;
    flex-wrap: wrap;
  }

  .agent-config-actions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
  }

  .agent-action-button {
    flex: 1;
    font-size: 12px;
    padding: 6px 10px;
  }

  .agent-config-form {
    padding: 16px;
  }

  .agent-config-form .input-pair {
    flex-direction: column;
    gap: 20px;
  }

  input,
  select {
    width: 100%;
  }

  ul li {
    padding: 14px 14px 14px 32px;
    margin-bottom: 10px;
  }

  .message-sub-value {
    margin-left: 0.5rem;
    font-size: 13px;
  }

  .estimation-panel h2 {
    font-size: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .estimation-panel .total-messages {
    font-size: 28px;
  }
}

/* Extra small screens - Mobile portrait */
@media screen and (max-width: 480px) {
  body {
    padding: 8px;
  }

  .container {
    margin: 8px auto;
    padding: 4px;
  }

  header {
    padding: 16px 12px;
    border-radius: 10px;
  }

  header h1 {
    font-size: 20px;
    margin-bottom: 8px;
  }

  header p {
    font-size: 13px;
    line-height: 20px;
  }

  .estimator-form,
  .estimation-panel {
    padding: 16px;
  }

  .estimator-form h3 {
    font-size: 16px;
  }

  .estimator-form p {
    font-size: 13px;
    line-height: 20px;
  }

  .pricing-info {
    font-size: 16px;
    padding: 16px;
  }

  .pricing-info p {
    font-size: 13px;
  }

  /* Stack table content vertically */
  #promptToolInfoGroup table,
  #promptToolInfoGroup thead,
  #promptToolInfoGroup tbody,
  #promptToolInfoGroup th,
  #promptToolInfoGroup td,
  #promptToolInfoGroup tr {
    display: block;
  }

  #promptToolInfoGroup thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #promptToolInfoGroup tr {
    border: 2px solid #EDEBE9;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 8px;
    background: white;
  }

  #promptToolInfoGroup td {
    border: none;
    position: relative;
    padding: 10px 0;
  }

  #promptToolInfoGroup td:before {
    content: attr(data-label) ": ";
    font-weight: 600;
    display: inline-block;
    width: 100%;
    margin-bottom: 6px;
    color: #323130;
  }

  .message-sub-value {
    margin-left: 0.5rem;
    font-size: 12px;
    padding: 3px 8px;
  }

  .tooltip-text {
    max-width: 260px;
    font-size: 12px;
    padding: 12px 14px;
  }

  /* Ensure 44x44px minimum touch targets */
  fluent-button::part(control) {
    min-height: 44px;
    padding: 14px 20px;
    font-size: 14px;
  }

  /* Larger radio buttons for easier tapping */
  .radio-option {
    min-height: 44px;
    padding: 16px;
  }

  /* Category and agent cards for small screens */
  .category-card,
  .agent-card {
    padding: 16px 0;
  }

  .category-icon,
  .agent-icon {
    width: 72px;
    height: 72px;
  }

  .category-icon svg,
  .category-icon img,
  .agent-icon svg,
  .agent-icon img {
    width: 54px;
    height: 54px;
  }

  .category-name,
  .agent-name {
    font-size: 14px;
  }

  .category-count,
  .agent-category-badge,
  .agent-description {
    font-size: 12px;
  }

  .category-card input[type="checkbox"] {
    width: 24px;
    height: 24px;
    border-width: 2px;
  }

  .category-card input[type="checkbox"]:checked::after {
    font-size: 16px;
  }

  .agent-add-button {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .radio-option input[type="radio"] {
    width: 24px;
    height: 24px;
    margin-top: 0;
  }

  /* Larger touch target for info tooltips */
  .info-circle {
    width: 2rem;
    height: 2rem;
  }

  /* Ensure input fields are easy to tap */
  input,
  select {
    min-height: 48px;
    padding: 16px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  ul li {
    padding: 10px 10px 10px 24px;
  }

  ul li::before {
    left: 10px;
    top: 10px;
  }
}

/* Smooth transition breakpoint - Intermediate sizing */
@media screen and (max-width: 640px) {
  header h1 {
    font-size: 21px;
    line-height: 1.3;
  }

  .estimator-form h3 {
    font-size: 17px;
  }

  label {
    font-size: 13.5px;
  }

  .estimation-panel h2 {
    font-size: 21px;
  }

  .pricing-info {
    font-size: 17px;
    padding: 18px;
  }
}

/* Optimize for mobile landscape orientation */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .estimator-layout {
    gap: 16px;
  }

  .estimator-form,
  .estimation-panel {
    padding: 20px;
  }

  header {
    padding: 16px;
  }

  header h1 {
    font-size: 20px;
    margin-bottom: 8px;
  }
}

/* Improve button responsiveness */
@media screen and (max-width: 1024px) {
  fluent-button::part(control) {
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* Make tooltips more mobile-friendly */
@media screen and (max-width: 768px) {
  .tooltip-text {
    bottom: auto;
    top: 100%;
    left: 0;
    transform: none;
    margin-top: 8px;
    max-width: 90vw;
  }

  .tooltip-text::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #323130 transparent;
  }

  .tooltip-wrapper:hover .tooltip-text,
  .tooltip-wrapper:focus-within .tooltip-text {
    transform: translateY(4px);
  }
}

/* === PRINT STYLES === */
@media print {
  body {
    background: white;
  }

  .button-container,
  .button-group {
    display: none;
  }

  .estimation-panel {
    page-break-inside: avoid;
  }

  .estimator-layout {
    flex-direction: column;
  }
}

/* === DARK MODE SUPPORT (Optional) === */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #1E1E1E 0%, #2D2D2D 100%);
    color: #E1DFDD;
  }

  header,
  .estimator-form,
  .estimation-panel,
  .pricing-info {
    background: #292827;
    color: #E1DFDD;
  }

  header h1 {
    background: linear-gradient(135deg, #4CC2FF 0%, #0078D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  input,
  select {
    background: #3B3A39;
    border-color: #484644;
    color: #E1DFDD;
  }

  .radio-option {
    background: #3B3A39;
  }

  .radio-option:hover {
    background: #484644;
  }

  .radio-option label {
    color: #E1DFDD;
  }

  /* Dark text for checked radio options (light blue background) */
  .radio-option:has(input:checked) label {
    color: #323130;
  }

  /* Inline radio group labels and inputs */
  .radio-group label {
    color: #E1DFDD !important;
  }

  .radio-group input[type="radio"] {
    accent-color: #4CC2FF;
  }

  /* === Fluent Buttons === */
  fluent-button::part(control) {
    background: #3B3A39;
    color: #E1DFDD;
    border-color: #484644;
  }

  fluent-button[appearance="accent"]::part(control) {
    background: #0078D4;
    color: white;
    border-color: #0078D4;
  }

  fluent-button[appearance="outline"]::part(control) {
    background: transparent;
    border: 2px solid #0078D4;
    color: #4CC2FF;
  }

  fluent-button:hover::part(control) {
    background: #484644;
    transform: translateY(-2px);
  }

  fluent-button[appearance="accent"]:hover::part(control) {
    background: #106EBE;
  }

  fluent-button[appearance="outline"]:hover::part(control) {
    background: rgba(0, 120, 212, 0.1);
  }

  /* === Links and Focus States === */
  a {
    color: #4CC2FF;
  }

  a:hover {
    color: #6DCAFF;
  }

  a:focus {
    outline-color: #4CC2FF;
  }

  /* === Tooltips === */
  .tooltip-text {
    background-color: #484644;
    color: #E1DFDD;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  }

  .tooltip-text::after {
    border-color: #484644 transparent transparent transparent;
  }

  .info-circle {
    background-color: #3B3A39;
    color: #4CC2FF;
    border-color: #484644;
  }

  .info-circle:hover {
    background-color: #0078D4;
    color: white;
    border-color: #0078D4;
  }

  /* === Tables === */
  th {
    background: #3B3A39;
    border-bottom-color: #0078D4;
    color: #E1DFDD;
  }

  #agentActionsSection tbody tr:hover,
  #promptToolInfoGroup tbody tr:hover {
    background: #3B3A39;
  }

  #agentActionsSection th,
  #agentActionsSection td,
  #promptToolInfoGroup th,
  #promptToolInfoGroup td {
    border-bottom-color: #484644;
  }

  #agentActionsSection td,
  #promptToolInfoGroup td {
    background: #292827;
  }

  #agentActionsSection tr:last-child td,
  #promptToolInfoGroup tr:last-child td {
    border-bottom: none;
  }

  .table-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  /* === Borders and Dividers === */
  hr {
    background: linear-gradient(90deg, transparent 0%, #484644 50%, transparent 100%);
  }

  .estimation-section {
    background: linear-gradient(135deg, #3B3A39 0%, #323130 100%);
    border-left-color: #4CC2FF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .estimator-form:hover,
  .estimation-panel:hover {
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.5);
  }

  /* === Pricing Info Section === */
  .pricing-info {
    background: #292827;
    border-left-color: #4CC2FF;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }

  .pricing-info p {
    color: #E1DFDD;
  }

  .pricing-link {
    color: #C8C6C4;
  }

  /* === Legal Section === */
  .legal {
    background: #292827;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }

  .legal p {
    color: #C8C6C4;
  }

  /* === Message Displays and Lists === */
  ul li {
    background: #3B3A39;
  }

  ul li:hover {
    background: #484644;
  }

  ul li::before {
    color: #4CC2FF;
  }

  .message-row {
    background: #3B3A39;
  }

  .message-row:hover {
    background: #484644;
  }

  .message-row span {
    color: #C8C6C4;
  }

  /* === Highlighted Elements === */
  span.listnote.negated-credits-highlight {
    background: #2D4A2C;
    color: #E1DFDD;
  }

  span.listnote.negated-credits-highlight #negated-knowledge-user-count,
  span.listnote.negated-credits-highlight #negated-actions-user-count,
  span.listnote.negated-credits-highlight #negated-flows-user-count,
  span.listnote.negated-credits-highlight #negated-modifiers-user-count,
  span.listnote.negated-credits-highlight em {
    color: #B4E380 !important;
  }

  span.listnote.negated-credits-highlight .message-sub-value {
    color: #B4E380 !important;
  }

  ul span.listnote {
    background: #3F3800;
    border-left-color: #F7B500;
    color: #E1DFDD;
  }

  /* === Trigger Wrappers === */
  .trigger-wrapper {
    background: linear-gradient(135deg, #3B3A39 0%, #323130 100%);
    border-color: #484644;
  }

  .trigger-wrapper:hover {
    border-color: #605E5C;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }

  .trigger-wrapper h3 {
    color: #E1DFDD;
  }

  .trigger-wrapper h3::before {
    background: #4CC2FF;
  }

  /* === Form Elements and Labels === */
  label {
    color: #E1DFDD;
  }

  .estimator-form h3,
  .estimation-section h3,
  .trigger-wrapper label {
    color: #E1DFDD;
  }

  .estimator-form p,
  header p {
    color: #C8C6C4;
  }

  .estimator-form h3::before {
    background: linear-gradient(180deg, #4CC2FF 0%, #0078D4 100%);
  }

  /* === Value Displays === */
  .total-messages,
  .auto-calc,
  .message-value,
  .sub-message-value {
    color: #4CC2FF;
  }

  .estimation-panel .total-messages {
    color: #4CC2FF;
  }

  .message-sub-value {
    color: #E1DFDD;
  }

  /* === Loading State === */
  .loading::after {
    background: linear-gradient(90deg, transparent, rgba(59, 58, 57, 0.8), transparent);
  }

  /* === Container and Panel Borders === */
  .container {
    background: rgba(30, 30, 30, 0.5);
  }

  .form-section {
    border-color: #484644;
  }

  /* === Input Hover States === */
  input:hover,
  select:hover {
    border-color: #5F5E5C;
  }

  input:focus,
  select:focus {
    border-color: #4CC2FF;
  }

  /* === Multi-Agent Sections Dark Mode === */
  .category-selection-section,
  .agent-selection-section,
  .agent-configurations-section {
    background: #292827;
    color: #E1DFDD;
  }

  .category-selection-section h2,
  .agent-selection-section h2,
  .agent-configurations-section h2 {
    color: #4CC2FF;
    border-bottom-color: #0078D4;
  }

  .section-description {
    color: #C8C6C4;
  }

  /* Category Cards */
  .category-card {
    background: transparent;
    border-bottom-color: #484644;
  }

  .category-card:hover {
    background: #323130;
  }

  .category-card.selected {
    background: #2B2A29;
  }

  .category-card input[type="checkbox"] {
    background-color: #3B3A39;
    border-color: #8A8886;
  }

  .category-card input[type="checkbox"]:hover {
    border-color: #4CC2FF;
  }

  .category-card input[type="checkbox"]:checked {
    background-color: #0078D4 !important;
    border-color: #0078D4 !important;
  }

  .category-icon {
    background: #3B3A39;
  }

  .category-name {
    color: #E1DFDD;
  }

  .category-count {
    color: #C8C6C4;
  }

  .coming-soon-badge {
    background: #484644;
    color: #C8C6C4;
  }

  /* Agent Cards */
  .agent-card {
    background: transparent;
    border-bottom-color: #484644;
  }

  .agent-card:hover {
    background: #323130;
  }

  .agent-icon {
    background: #3B3A39;
  }

  .agent-name {
    color: #E1DFDD;
  }

  .agent-category-badge {
    color: #C8C6C4;
  }

  .agent-description {
    color: #C8C6C4;
  }

  .agent-add-button {
    background: #0078D4;
    color: white;
    border: none;
  }

  .agent-add-button:hover {
    background: #106EBE;
  }

  /* No items messages */
  .no-agents-message,
  .no-configs-message {
    background: #3B3A39;
    color: #C8C6C4;
  }

  /* Agent Config Cards */
  .agent-config-card {
    background: #3B3A39;
    border-color: #484644;
  }

  .agent-config-header {
    background: #323130;
  }

  .agent-config-header:hover {
    background: #3B3A39;
  }

  .agent-config-name {
    color: #E1DFDD;
  }

  .agent-config-category {
    color: #C8C6C4;
  }

  .agent-config-preview {
    color: #4CC2FF;
  }

  .agent-action-button {
    background: transparent;
    border-color: #484644;
    color: #E1DFDD;
  }

  .agent-action-button:hover {
    background: #484644;
    border-color: #605E5C;
  }

  .agent-action-button.duplicate:hover {
    background: #1E3A52;
    border-color: #0078D4;
    color: #4CC2FF;
  }

  .agent-action-button.remove:hover {
    background: #4A2828;
    border-color: #D13438;
    color: #FF6B6B;
  }

  .agent-config-form {
    background: #323130;
  }

  .agent-config-form h3 {
    color: #E1DFDD;
  }

  .agent-config-form h3::before {
    background: linear-gradient(180deg, #4CC2FF 0%, #0078D4 100%);
  }

  .agent-config-form input[type="text"],
  .agent-config-form input[type="number"],
  .agent-config-form select {
    background: #3B3A39;
    border-color: #484644;
    color: #E1DFDD;
  }

  .agent-config-form input[type="text"]:focus,
  .agent-config-form input[type="number"]:focus,
  .agent-config-form select:focus {
    border-color: #4CC2FF;
    box-shadow: 0 0 0 1px #4CC2FF;
  }

  .agent-config-form label {
    color: #E1DFDD;
  }

  .agent-config-form p {
    color: #C8C6C4;
  }

  .agent-config-form hr {
    border-color: #484644;
  }

  .agent-config-form .total-messages {
    color: #4CC2FF;
  }
}

/* ============================================
   MULTI-AGENT RESULTS SECTIONS
   ============================================ */

/* Container for individual agent results */
.agent-results-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
  visibility: visible;
}

/* Individual agent result card */
.agent-result-card {
  background: transparent;
  border-bottom: 1px solid #F3F2F1;
  overflow: hidden;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}

.agent-result-card.expanded {
  background: #FAFAFA;
}

/* Agent result header (clickable to expand/collapse) */
.agent-result-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #FAFAFA;
  border-bottom: 1px solid #E1DFDD;
  transition: background 0.2s ease;
}

.agent-result-header:hover {
  background: #F5F5F5;
}

.agent-result-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-result-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.agent-result-title-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.agent-result-title {
  cursor: pointer;
}

.agent-result-name {
  font-size: 16px;
  font-weight: 600;
  color: #323130;
  margin: 0 0 4px 0;
}

.agent-result-category {
  font-size: 13px;
  color: #605E5C;
  margin: 0;
}

/* Action buttons in result cards */
.agent-result-actions {
  display: flex;
  gap: 8px;
}

.agent-result-action-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid #E1DFDD;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #323130;
  cursor: pointer;
  transition: all 0.2s ease;
}

.agent-result-action-button:hover {
  background: #F5F5F5;
  border-color: #C8C6C4;
}

.agent-result-action-button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.agent-result-action-button.delete:hover {
  background: #FFF0F0;
  border-color: #D13438;
  color: #D13438;
}

.agent-result-total {
  font-size: 18px;
  font-weight: 700;
  color: #323130;
  margin-right: 16px;
}

.agent-result-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.agent-result-card.expanded .agent-result-toggle {
  transform: rotate(180deg);
}

/* Agent result body (collapsible content) */
.agent-result-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.agent-result-card.expanded .agent-result-body {
  max-height: 2000px;
}

.agent-result-content {
  padding: 20px;
}

/* Sections within agent results */
.agent-result-section {
  margin-bottom: 24px;
}

.agent-result-section:last-child {
  margin-bottom: 0;
}

.agent-result-section h4 {
  font-size: 15px;
  font-weight: 600;
  color: #323130;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-result-section-value {
  font-size: 16px;
  font-weight: 700;
  color: #323130;
}

.agent-result-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.agent-result-section li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #F3F2F1;
  font-size: 14px;
  color: #605E5C;
}

.agent-result-section li:last-child {
  border-bottom: none;
}

.agent-result-item-value {
  font-weight: 600;
  color: #323130;
}

/* SQA-specific result card styles */
.agent-result-card.sqa-card .agent-result-body {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.agent-result-card.sqa-card.expanded .agent-result-body {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}

.sqa-result-info {
  margin: 0;
  padding: 20px;
}

/* CMA-specific result card styles */
.agent-result-card.cma-card .agent-result-body {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.agent-result-card.cma-card.expanded .agent-result-body {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}

.cma-result-info {
  margin: 0;
  padding: 12px 0;
}

.cma-result-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  background: #FAF9F8;
  border-radius: 6px;
  border: 1px solid #E1DFDD;
}

.cma-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .agent-result-card {
    background: #323130;
    border-color: #484644;
  }

  .agent-result-header {
    background: #3B3A39;
    border-bottom-color: #484644;
  }

  .agent-result-header:hover {
    background: #484644;
  }

  .agent-result-name {
    color: #E1DFDD;
  }

  .agent-result-category {
    color: #C8C6C4;
  }

  .agent-result-action-button {
    background: transparent;
    border-color: #484644;
    color: #E1DFDD;
  }

  .agent-result-action-button:hover {
    background: #484644;
    border-color: #605E5C;
  }

  .agent-result-action-button.delete:hover {
    background: #4A2828;
    border-color: #D13438;
    color: #FF6B6B;
  }

  .agent-result-name-input {
    background: #3B3A39 !important;
    border-color: #484644 !important;
    color: #E1DFDD !important;
  }

  .agent-result-name-input:focus {
    border-color: #4CC2FF !important;
  }

  .agent-result-total {
    color: #E1DFDD;
  }

  .agent-result-section h4 {
    color: #E1DFDD;
  }

  .agent-result-section-value {
    color: #E1DFDD;
  }

  .agent-result-section li {
    border-bottom-color: #484644;
    color: #C8C6C4;
  }

  .agent-result-item-value {
    color: #E1DFDD;
  }

  /* SQA card dark mode */
  .sqa-result-body {
    background: #323130;
  }

  .sqa-result-info p {
    color: #C8C6C4;
  }

  /* CMA card dark mode */
  .cma-result-info p {
    color: #C8C6C4;
  }

  .cma-result-breakdown {
    background: #323130;
    border-color: #484644;
  }

  .cma-result-item span {
    color: #E1DFDD;
  }

  .cma-result-item span:last-child {
    color: #4CC2FF;
  }
}

/* Mobile responsive styles for agent result cards */
@media (max-width: 768px) {
  .agent-result-header {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  .agent-result-icon {
    width: 28px;
    height: 28px;
  }

  .agent-result-title-wrapper {
    flex: 1;
    min-width: 0;
  }

  .agent-result-name-input {
    font-size: 14px !important;
    padding: 6px !important;
  }

  .agent-result-category {
    font-size: 12px;
  }

  .agent-result-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .agent-result-action-button {
    padding: 6px 10px;
    font-size: 12px;
  }

  .agent-result-total {
    font-size: 16px;
    font-weight: 700;
  }

  .agent-result-toggle {
    padding: 4px;
  }

  /* Ensure total and toggle stay on the right */
  .agent-result-header {
    display: flex;
    align-items: flex-start;
  }

  /* Total summary card mobile styles */
  .total-summary-card .agent-result-header {
    padding: 16px !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }

  .total-summary-card h3 {
    font-size: 16px !important;
  }

  .total-summary-card p {
    font-size: 13px !important;
  }

  .total-summary-card .agent-result-header > div:last-child {
    font-size: 28px !important;
    align-self: flex-end;
  }

  /* Mobile styles for expanded content */
  .agent-result-content {
    padding: 16px;
  }

  .agent-result-section {
    margin-bottom: 20px;
  }

  .agent-result-section h4 {
    font-size: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .agent-result-section-value {
    font-size: 15px;
  }

  .agent-result-section li {
    font-size: 13px;
    gap: 8px;
  }

  /* Stack content vertically on very small screens */
  @media (max-width: 480px) {
    .agent-result-action-button {
      flex: 1 1 calc(50% - 3px);
      min-width: 80px;
    }

    .agent-result-total {
      font-size: 18px;
    }

    .total-summary-card .agent-result-header > div:last-child {
      font-size: 24px !important;
    }

    .agent-result-content {
      padding: 12px;
    }
  }
}

/* ============================================
   CRITICAL: Remove blue dots from agent results panels
   The global `ul li::before { content: "•" }` rule (line ~590) bleeds into
   every agent results panel. Suppress it for all of them.
   ============================================ */
.sqa-results-panel ul li::before,
.sqa-results-panel .results-list li::before,
.cma-results-panel ul li::before,
.cma-results-panel .results-list li::before,
.kma-results-panel ul li::before,
.kma-results-panel .results-list li::before,
.sales-order-results-panel ul li::before,
.sales-order-results-panel .results-list li::before,
.sales-opportunity-results-panel ul li::before,
.sales-opportunity-results-panel .results-list li::before,
.simple-volume-results-panel ul li::before,
.simple-volume-results-panel .results-list li::before,
#sqaResultsPanel ul li::before,
#sqaResultsPanel .results-list li::before,
#cmaResultsPanel ul li::before,
#cmaResultsPanel .results-list li::before,
#kmaResultsPanel ul li::before,
#kmaResultsPanel .results-list li::before,
#salesOrderResultsPanel ul li::before,
#salesOrderResultsPanel .results-list li::before,
#salesOpportunityResultsPanel ul li::before,
#salesOpportunityResultsPanel .results-list li::before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure no list styles on results lists */
.sqa-results-panel .results-list,
.cma-results-panel .results-list,
.kma-results-panel .results-list,
.sales-order-results-panel .results-list,
.sales-opportunity-results-panel .results-list,
.simple-volume-results-panel .results-list,
#sqaResultsPanel .results-list,
#cmaResultsPanel .results-list,
#kmaResultsPanel .results-list,
#salesOrderResultsPanel .results-list,
#salesOpportunityResultsPanel .results-list {
    list-style: none !important;
    list-style-type: none !important;
}

.sqa-results-panel .results-list li,
.cma-results-panel .results-list li,
.kma-results-panel .results-list li,
.sales-order-results-panel .results-list li,
.sales-opportunity-results-panel .results-list li,
.simple-volume-results-panel .results-list li,
#sqaResultsPanel .results-list li,
#cmaResultsPanel .results-list li,
#kmaResultsPanel .results-list li,
#salesOrderResultsPanel .results-list li,
#salesOpportunityResultsPanel .results-list li {
    list-style: none !important;
    list-style-type: none !important;
}

/* Remove any pseudo-element markers */
.sqa-results-panel .results-list li::marker,
.cma-results-panel .results-list li::marker,
.kma-results-panel .results-list li::marker,
.sales-order-results-panel .results-list li::marker,
.sales-opportunity-results-panel .results-list li::marker,
.simple-volume-results-panel .results-list li::marker,
#sqaResultsPanel .results-list li::marker,
#cmaResultsPanel .results-list li::marker,
#kmaResultsPanel .results-list li::marker,
#salesOrderResultsPanel .results-list li::marker,
#salesOpportunityResultsPanel .results-list li::marker {
    display: none !important;
    content: none !important;
}

/* Also suppress the hover translate / background that ul li gets globally */
.sqa-results-panel ul li:hover,
.cma-results-panel ul li:hover,
.kma-results-panel ul li:hover,
.sales-order-results-panel ul li:hover,
.sales-opportunity-results-panel ul li:hover,
.simple-volume-results-panel ul li:hover {
    background: transparent !important;
    transform: none !important;
}

/* ============================================
   SQA ESTIMATOR STYLES
   ============================================ */

/* Back to selection buttons */
.back-to-selection {
    margin-bottom: 32px;
}

/* Common button styles */
.back-button,
.save-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Back button (secondary style) */
.back-button {
    background: white;
    color: #323130;
    border: 1px solid #E1DFDD;
}

.back-button:hover {
    background: #F3F2F1;
    border-color: #C8C6C4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.back-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Save button (primary style) */
.save-button {
    background: #0078D4;
    color: white;
}

.save-button:hover {
    background: #106EBE;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.save-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.back-button span:first-child,
.save-button span:first-child {
    font-size: 18px;
}

.sqa-estimator-container,
.cma-estimator-container,
#sqaEstimatorContainer,
#cmaEstimatorContainer {
    display: none;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 24px;
}

.estimator-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.estimator-form-column,
.estimator-results-column {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.sqa-estimator-form h2 {
    margin-top: 0;
    margin-bottom: 16px;
    color: #323130;
    font-size: 24px;
}

.sqa-estimator-form h3 {
    margin-top: 32px;
    margin-bottom: 16px;
    color: #323130;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 2px solid #E1DFDD;
    padding-bottom: 8px;
}

.sqa-estimator-form p {
    color: #605E5C;
    margin-bottom: 24px;
}

.info-tooltip {
    display: inline-block;
    margin-left: 4px;
    color: #0078D4;
    cursor: help;
    font-size: 14px;
}

/* Responsive layout */
@media (max-width: 1400px) {
    .estimator-content-grid {
        grid-template-columns: 1fr;
    }

    .estimator-results-column {
        position: sticky;
        top: 80px;
    }
}

@media (max-width: 768px) {
    .sqa-estimator-container,
    .cma-estimator-container,
    #sqaEstimatorContainer,
    #cmaEstimatorContainer,
    .cia-estimator-container,
    .qea-estimator-container,
    .sca-estimator-container,
    .ara-estimator-container,
    #ciaEstimatorContainer,
    #qeaEstimatorContainer,
    #scaEstimatorContainer,
    #araEstimatorContainer {
        padding: 16px;
    }

    .estimator-form-column,
    .estimator-results-column {
        padding: 0;
    }

    .estimator-results-column {
        position: static;
    }

    .back-to-selection {
        flex-direction: column;
    }

    .back-button,
    .save-button {
        width: 100%;
        justify-content: center;
    }
}

/* Dark mode for SQA estimator */
@media (prefers-color-scheme: dark) {
    .estimator-form-column,
    .estimator-results-column {
        background: transparent;
        color: #E1DFDD;
    }

    .back-button {
        background: #3B3A39;
        color: #E1DFDD;
        border-color: #605E5C;
    }

    .back-button:hover {
        background: #484644;
        border-color: #8A8886;
    }

    .save-button {
        background: #0078D4;
        color: white;
    }

    .save-button:hover {
        background: #106EBE;
    }

    .sqa-estimator-form h2,
    .sqa-estimator-form h3,
    .cma-estimator-form h2,
    .cma-estimator-form h3 {
        color: #E1DFDD;
    }

    .sqa-estimator-form h3,
    .cma-estimator-form h3 {
        border-bottom-color: #605E5C;
    }

    .sqa-estimator-form p,
    .cma-estimator-form p {
        color: #C8C6C4;
    }

    .info-tooltip {
        color: #4CC2FF;
    }

    /* Dark mode for calculated/display fields in SQA form */
    #sqaLeadsNotEngaged,
    #sqaLeadsEngaged,
    .sqa-estimator-form .total-messages {
        background: #484644 !important;
        color: #E1DFDD !important;
    }
}

/* New Agent Estimators - Responsive Layouts */
.cia-estimator-wrapper,
.qea-estimator-wrapper,
.sca-estimator-wrapper,
.ara-estimator-wrapper {
    display: flex;
    gap: 32px;
}

.cia-form-column,
.qea-form-column,
.sca-form-column,
.ara-form-column,
.cia-results-column,
.qea-results-column,
.sca-results-column,
.ara-results-column {
    flex: 1;
}

/* Mobile responsive for new estimators */
@media (max-width: 768px) {
    .cia-estimator-wrapper,
    .qea-estimator-wrapper,
    .sca-estimator-wrapper,
    .ara-estimator-wrapper {
        flex-direction: column;
        gap: 24px;
    }

    .cia-form-column,
    .qea-form-column,
    .sca-form-column,
    .ara-form-column,
    .cia-results-column,
    .qea-results-column,
    .sca-results-column,
    .ara-results-column {
        padding: 0;
    }
}

/* CIA, QEA, SCA, ARA result cards - expandable bodies */
.agent-result-card.cia-card .agent-result-body,
.agent-result-card.qea-card .agent-result-body,
.agent-result-card.sca-card .agent-result-body,
.agent-result-card.ara-card .agent-result-body {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.agent-result-card.cia-card.expanded .agent-result-body,
.agent-result-card.qea-card.expanded .agent-result-body,
.agent-result-card.sca-card.expanded .agent-result-body,
.agent-result-card.ara-card.expanded .agent-result-body {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}