.agent-intro,.agent-welcome {
  padding: 28px;
  background: linear-gradient(135deg,#f4f8ff,#fff);
  border: 1px solid #dce9fc;
  border-radius: 12px;
}

.agent-intro h2,.agent-welcome h2 {
  font-size: 25px;
  margin: 5px 0;
}

.agent-eyebrow,.agent-card-kicker {
  font-size: 11px;
  letter-spacing: .14em;
  color: #1269f5;
  font-weight: 800;
}

.agent-mode {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff1cc;
  color: #8a5b00;
  font-size: 11px;
  font-weight: 700;
}

.agent-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 16px;
  margin: 18px 0;
}

.agent-catalog-card {
  position: relative;
  padding: 22px;
  border: 1px solid #dce9fc;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(33,91,169,.08);
}

.agent-catalog-card h2 {
  font-size: 18px;
  margin: 14px 0 7px;
}

.agent-catalog-card p {
  min-height: 44px;
  color: #5d708d;
}

.agent-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #1269f5;
  color: #fff;
  font-size: 20px;
}

.agent-catalog-card .agent-mode {
  position: absolute;
  right: 16px;
  top: 16px;
}

.agent-history {
  margin-top: 24px;
}

.agent-history-list {
  display: grid;
}

.agent-history-row {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(100px,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid #e8eef8;
  color: inherit;
  text-decoration: none;
}

.agent-muted {
  color: #71829b;
  font-size: 12px;
}

.agent-stage {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e9f2ff;
  color: #075fdc;
  font-size: 12px;
}

.agent-loading {
  padding: 28px;
  border: 1px dashed #c8d9f2;
  border-radius: 10px;
  text-align: center;
  color: #667b99;
}

.agent-session {
  max-width: 920px;
  margin: 0 auto;
}

.agent-session-head {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  background: #f7faff;
}

.agent-session-head h2 {
  font-size: 20px;
  margin: 5px 0;
}

.agent-stream {
  display: grid;
  gap: 13px;
  padding: 4px 0 18px;
}

.agent-message,.agent-card {
  max-width: 760px;
  padding: 15px 17px;
  border: 1px solid #dbe7f8;
  border-radius: 12px;
  background: #fff;
  overflow-wrap: anywhere;
}

.agent-message-user {
  justify-self: end;
  background: #e9f2ff;
  border-color: #cfe0fb;
}

.agent-message-role {
  display: block;
  margin-bottom: 5px;
  color: #6e809a;
  font-size: 11px;
  font-weight: 700;
}

.agent-message-copy {
  white-space: pre-wrap;
  margin: 0;
  line-height: 1.65;
}

.agent-attachment-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin-top: 10px;
}

.agent-attachment {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.agent-analysis h3,.agent-selection h3,.agent-quote h3 {
  margin: 6px 0 12px;
}

.agent-analysis-fields {
  display: grid;
  gap: 8px;
}

.agent-analysis-row {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 12px;
}

.agent-analysis-row dt {
  font-weight: 700;
  color: #4c617e;
}

.agent-analysis-row dd {
  margin: 0;
}

.agent-selection-list {
  display: grid;
  gap: 8px;
}

.agent-selection-item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) 100px;
  gap: 9px;
  align-items: center;
}

.agent-selection-item input[type=text],.agent-selection-item select,.agent-input-card textarea,.agent-input-card input[type=file] {
  width: 100%;
  min-width: 0;
  border: 1px solid #cbdaf0;
  border-radius: 7px;
  padding: 9px;
  background: #fff;
  color: #17243a;
}

.agent-card-actions,.agent-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.agent-input-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) 250px;
  gap: 14px;
  padding: 18px;
  border: 1px solid #cddcf2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(33,91,169,.08);
}

.agent-input-card label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.agent-input-card button {
  align-self: end;
}

.agent-upload-state {
  font-size: 12px;
  color: #6e809a;
}

.agent-progress {
  color: #075fdc;
  background: #f1f6ff;
}

.agent-alert {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #efb7b7;
  border-radius: 8px;
  background: #fff3f3;
  color: #9d2525;
}

.agent-quote {
  margin: 16px 0;
  max-width: none;
}

.agent-results {
  margin: 18px 0;
}

.agent-results h2 {
  font-size: 18px;
}

.agent-ledger {
  color: #536a89;
}

.agent-generation-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.agent-generation {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #dbe7f8;
  border-radius: 10px;
  background: #fff;
}

.agent-generation h4 {
  margin: 0;
}

.agent-result-image,.agent-result-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  background: #f1f5fb;
}

.agent-result-placeholder {
  color: #6c7e97;
}

.agent-task-status {
  width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e9f2ff;
  color: #075fdc;
  font-size: 11px;
}

.agent-status-failed {
  background: #fff0f0;
  color: #a92727;
}

.agent-status-unknown {
  background: #fff4d8;
  color: #805800;
}

.agent-error-copy {
  color: #a92727;
}

.agent-cancel {
  margin: 8px 0 20px;
}

@media(max-width:760px) {
  .agent-intro,.agent-welcome {
    padding: 19px;
  }
  .agent-catalog {
    grid-template-columns: 1fr;
  }
  .agent-history-row {
    grid-template-columns: minmax(0,1fr) auto;
  }
  .agent-history-row .agent-muted {
    display: none;
  }
  .agent-session-head {
    align-items: flex-start;
  }
  .agent-selection-item {
    grid-template-columns: auto minmax(0,1fr);
  }
  .agent-selection-item select {
    grid-column: 2;
  }
  .agent-input-card {
    grid-template-columns: 1fr;
  }
  .agent-generation-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .agent-attachment-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .agent-analysis-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .agent-message,.agent-card {
    max-width: 100%;
  }
}

@media(max-width:390px) {
  .agent-generation-grid {
    grid-template-columns: 1fr;
  }
}