/* Scoped styles for chat transcripts that respect the Hugo theme variables */
.chat-container {
  /* Use theme's variables for background and text color */
  background-color: var(--BOX-BG-color, #fafafa); /* Fallback for safety */
  color: var(--MAIN-TEXT-color, #212121);

  /* Define local variables for message bubbles, using theme variables */
  --user-bg: var(--MENU-SEARCH-BG-color, #e3f2fd);
  --agent-bg: var(--MENU-SECTIONS-ACTIVE-BG-color, #f5f5f5);
  --border-color: var(--MENU-SECTION-SEPARATOR-color, #e0e0e0);

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  padding: 20px;
  border-radius: 8px;
}

.chat-container .turn-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 1rem;
}

.chat-container .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--border-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 5px;
}

.chat-container .avatar.user-avatar { background-color: var(--SECONDARY-color, #1976d2); }
.chat-container .avatar.agent-avatar { background-color: #6d4c41; } /* Keeping this distinct */

.chat-container .message {
  padding: 12px 16px;
  border-radius: 10px;
  width: calc(100% - 50px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  border: 1px solid var(--border-color);
}

.chat-container .user .message { background: var(--user-bg); }
.chat-container .agent .message { background: var(--agent-bg); }

.chat-container .user { justify-content: flex-end; }
.chat-container .user .avatar { order: 2; }
.chat-container .user .message { order: 1; border-top-right-radius: 4px; }

.chat-container .agent { justify-content: flex-start; }
.chat-container .agent .message { border-top-left-radius: 4px; }

.chat-container .tool-call {
  /* Align with the theme's code block styling */
  background: var(--CODE-BLOCK-BG-color, #2d2d2d);
  border: 1px solid var(--CODE-BLOCK-BORDER-color, #444);
  border-left: 4px solid var(--ACCENT-color, #666);
  padding: 0;
  margin: 12px 0;
  border-radius: 4px;
  overflow: hidden;
  color: var(--CODE-BLOCK-color, #f1f1f1);
}

.chat-container .tool-call-header {
    background-color: var(--MENU-HEADER-color, #3a3a3a);
    padding: 8px 12px;
    font-weight: bold;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.chat-container .tool-call-content {
    padding: 12px;
    white-space: pre-wrap;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.chat-container details {
    margin: 12px 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.chat-container summary {
    padding: 10px 15px;
    cursor: pointer;
    background-color: var(--agent-bg);
    font-weight: bold;
}

.chat-container pre {
  margin: 0;
  padding: 1rem;
  background-color: var(--CODE-BLOCK-BG-color, #2d2d2d);
  color: var(--CODE-BLOCK-color, #f8f8f2);
  overflow-x: auto;
}

.chat-container code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: var(--CODE-INLINE-color, #e06c75);
}

.chat-container p {
  margin-top: 0;
  white-space: pre-wrap;
}

.chat-container h1 {
  font-size: 1.5rem;
  border-bottom: 2px solid var(--MENU-SECTION-SEPARATOR-color, #eee);
  padding-bottom: 10px;
  margin-bottom: 20px;
  color: var(--MAIN-TITLES-TEXT-color, #000);
}

/* ADD THIS: Padding for tool-call container */
.chat-container .tool-call-details {
  padding: 12px; /* Fixes "Arguments" text padding */
}

/* MODIFY THIS: Enhanced code block styling */
.chat-container .tool-call-details pre {
  background-color: var(--CODE-BLOCK-BG-color, #2d2d2d);
  color: var(--CODE-BLOCK-color, #f8f8f2);
  border: none;
  padding: 1rem;
  /* Critical additions below */
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
  white-space: pre-wrap; /* Enables line wrapping */
  overflow-x: auto; /* Keeps horizontal scroll for unwrapped content */
  word-break: break-word; /* Ensures long paths wrap properly */
  margin: 8px 0 0 0; /* Adds top spacing from "Arguments" text */
}


/* Styles for user and model message bubbles */
.user-prompt {
  background-color: var(--user-bg, #e3f2fd);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.model-response {
  background-color: var(--agent-bg, #f5f5f5);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}