/*
  Minimalist Stylesheet for AI Analysis Workspace.
  
  Most layout and positioning styles are now handled inline within the
  React component to avoid conflicts with the parent framework's CSS.
  
  This file only contains styles that are safe and non-conflicting.
*/

/* Loading spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e0e0e0;
  border-top: 3px solid #0f62fe;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 0.5rem;
}

/* Header layout is now handled inline in the component */

/* Styles for Carbon components that don't affect layout */

.chat-input-wrapper .cds--form-item {
  margin-bottom: 0;
}

.chat-input-wrapper .cds--text-input {
  background-color: #ffffff;
  border-radius: 18px;
  border: none;
  padding: 0.6rem 1rem;
}

.chat-input-button .cds--btn {
  background-color: #0088ff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  min-width: 44px;
}

.chat-input-button .cds--btn svg {
  fill: white;
}

/* Styles for the original analysis view (non-chat) */
.analysis-content {
  padding: 1rem;
}

.patient-header-tile {
  background-color: var(--cds-layer-02, #f4f4f4);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.patient-name-header {
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
  font-size: 1.5rem;
  font-weight: 600;
}

/* patient-stats layout is now handled inline in the component */

/* All stat pill styling is now handled inline in the component */

.analysis-section {
  /* Match accordion header padding exactly - header uses 1rem 1.5rem */
  padding: 1rem 1.5rem !important;
  line-height: 1.6;
  box-sizing: border-box;
}

/* ReactMarkdown styling for proper text rendering */
.analysis-section h1,
.analysis-section h2,
.analysis-section h3,
.analysis-section h4,
.analysis-section h5,
.analysis-section h6 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--cds-text-primary, #161616);
}

.analysis-section h1 {
  font-size: 1.5rem;
}

.analysis-section h2 {
  font-size: 1.25rem;
}

.analysis-section h3 {
  font-size: 1.125rem;
}

.analysis-section p {
  margin-bottom: 1rem;
  color: var(--cds-text-primary, #161616);
  line-height: 1.6;
  margin-top: 0; /* Remove default top margin from first paragraph */
}

.analysis-section ul,
.analysis-section ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.analysis-section li {
  margin-bottom: 0.5rem;
  color: var(--cds-text-primary, #161616);
  line-height: 1.5;
}

.analysis-section strong {
  font-weight: 600;
  color: var(--cds-text-primary, #161616);
}

.analysis-section em {
  font-style: italic;
}

.analysis-section code {
  background-color: var(--cds-layer-01, #f4f4f4);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
}

.analysis-section pre {
  background-color: var(--cds-layer-01, #f4f4f4);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: 1rem;
}

.analysis-section pre code {
  background-color: transparent;
  padding: 0;
}

.analysis-section blockquote {
  border-left: 4px solid var(--cds-support-info, #0043ce);
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 1rem;
  color: var(--cds-text-secondary, #525252);
  font-style: italic;
}

/* Accordion styling fixes */
.cds--accordion {
  border: none;
}

.cds--accordion__item {
  border-top: 1px solid var(--cds-border-subtle, #e0e0e0);
  border-bottom: none;
}

.cds--accordion__item:last-child {
  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
}

.cds--accordion__heading {
  background-color: var(--cds-layer-01, #f4f4f4);
  border: none;
  padding: 1rem 1.5rem;
}

.cds--accordion__heading:hover {
  background-color: var(--cds-layer-hover-01, #e8e8e8);
}

.cds--accordion__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cds-text-primary, #161616);
}

.cds--accordion__content {
  padding: 0;
  background-color: white;
}

.patient-message-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.edit-message-container .edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: flex-end;
}

.patient-message-content {
  padding: 1.5rem;
  background-color: var(--cds-layer-02);
  border-radius: 8px;
  border-left: 4px solid var(--cds-support-info);
  margin-top: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Chat message styling */
.message-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.message-time {
  font-size: 0.75rem;
  color: var(--cds-text-secondary, #6f6f6f);
  margin-top: 0.25rem;
  align-self: flex-end;
}

/* Custom Accordion Styling */
.custom-accordion {
  border: 1px solid var(--cds-border-subtle, #e0e0e0);
  border-radius: 4px;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  transition: background-color 0.2s ease;
}

.accordion-header:hover {
  background-color: var(--cds-layer-hover-01, #e8e8e8) !important;
}

.accordion-content {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  to {
    opacity: 1;
    max-height: 1000px;
    overflow: visible;
  }
}