/* ===============================
   Layout & Typography
================================= */

body {
  background-color: #f8f9fa;
}

.muted {
  color: #6c757d;
}

.mono {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

/* ===============================
   Chat Container
================================= */

.chat-box {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  padding: 14px;
  background: #ffffff;
  border-radius: 6px;
}

/* ===============================
   Message Blocks
================================= */

.msg {
  margin-bottom: 1rem;
}

.msg .role {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.msg.user .role {
  color: #0d6efd;
}

.msg.assistant .role {
  color: #198754;
}

/* subtle separation */
.msg.user .assistant-content,
.msg.user pre {
  background: #f1f6ff;
  padding: 10px;
  border-radius: 6px;
}

.msg.assistant .assistant-content {
  background: #f6fbf8;
  padding: 10px;
  border-radius: 6px;
}

/* ===============================
   User Message Formatting
================================= */

.msg.user pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

/* ===============================
   Assistant Markdown Rendering
================================= */

.assistant-content {
  line-height: 1.6;
  font-size: 0.95rem;
}

.assistant-content p {
  margin-bottom: 0.6rem;
}

.assistant-content ul,
.assistant-content ol {
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
}

.assistant-content ul ul,
.assistant-content ol ul,
.assistant-content ul ol,
.assistant-content ol ol {
  padding-left: 1.25rem;
  margin-top: 0.3rem;
}

.assistant-content li {
  margin-bottom: 0.4rem;
}

.assistant-content strong {
  font-weight: 600;
}

.assistant-content em {
  font-style: italic;
}

.assistant-content code {
  background: #f1f3f5;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* If assistant ever outputs fenced code blocks */
.assistant-content pre {
  background: #f1f3f5;
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
}

/* ===============================
   Scrollbar 
================================= */

.chat-box::-webkit-scrollbar {
  width: 6px;
}

.chat-box::-webkit-scrollbar-thumb {
  background: #ced4da;
  border-radius: 3px;
}

.chat-box::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}

/* ===============================
   Synthetic Simulation MVP
================================= */

.simulation-chat-box {
  height: 720px;
}

.framework-table-wrap {
  max-height: 75vh;
  overflow: auto;
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

.framework-table-wrap textarea {
  min-width: 260px;
  font-size: 0.85rem;
}

.framework-table-wrap input {
  min-width: 180px;
}

.state-row {
  margin: 6px 0;
}

.state-key {
  font-weight: 600;
}

.state-value {
  color: #555;
}

details {
  margin: 8px 0;
}

details summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 6px;
}

details ul {
  margin: 6px 0 6px 20px;
}

details li {
  margin-bottom: 4px;
}

.message {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 12px;
}

.message-user {
  background: #f7f7f7;
  margin-right: 40px;
}

.message-assistant {
  background: #ffffff;
  margin-left: 40px;
}

.message-system {
  background: #fafafa;
  border-style: dashed;
}

.state-panel,
.evaluation-panel {
  font-size: 0.88rem;
  line-height: 1.3;
}

.state-panel details,
.evaluation-panel details {
  margin-bottom: 0.35rem;
}

.state-panel summary,
.evaluation-panel summary {
  font-weight: 600;
  color: #495057;
  cursor: pointer;
}

.state-row {
  margin-left: 0.75rem;
  margin-bottom: 0.15rem;
}

.state-key {
  color: #6c757d;
  font-weight: 500;
}

.state-value {
  color: #212529;
}
.state-panel summary {
  color: #4f6475;
}

.evaluation-panel summary {
  color: #6d5b7b;
}

.evaluation-panel .state-key {
  color: #7a6b86;
}
.panel-scroll {
  max-height: 34vh;
  overflow-y: auto;
}