/* MOSS — restrained, Codex-like conversation surface */
:root {
  --moss-surface: rgba(127, 127, 127, .08);
  --moss-surface-strong: rgba(127, 127, 127, .14);
  --moss-border: rgba(127, 127, 127, .24);
}

/* Current Chainlit message classes (the old .cl-message selectors no longer exist). */
.ai-message,
.human-message {
  gap: .75rem !important;
}

.ai-message .message-content,
.human-message .message-content {
  font-size: 15px;
  line-height: 1.68;
}

.ai-message h2,
.ai-message h3 {
  letter-spacing: -.015em;
  margin-top: .85rem;
  margin-bottom: .45rem;
}

.ai-message p,
.ai-message ul,
.ai-message ol {
  margin-top: .35rem;
  margin-bottom: .55rem;
}

.ai-message details {
  margin: .75rem 0;
  padding: .65rem .8rem;
  border: 1px solid var(--moss-border);
  border-radius: 10px;
  background: var(--moss-surface);
}

.ai-message summary {
  cursor: pointer;
  color: inherit;
  opacity: .68;
  font-size: 13px;
  user-select: none;
}

.ai-message button:not([class*="w-9"]) {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid var(--moss-border) !important;
  background: var(--moss-surface) !important;
  color: inherit !important;
}

.ai-message button:not([class*="w-9"]):hover {
  background: var(--moss-surface-strong) !important;
}

.ai-message code:not(pre code) {
  padding: .12rem .32rem;
  border: 0 !important;
  border-radius: 5px;
  background: var(--moss-surface-strong) !important;
  color: inherit;
  font-size: .9em;
}

.ai-message pre {
  border: 1px solid var(--moss-border) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, .22) !important;
}

.ai-message sub {
  color: inherit;
  opacity: .68;
  font-size: 11px;
}

@media (max-width: 640px) {
  .ai-message,
  .human-message {
    gap: .55rem !important;
  }

  .ai-message .message-content,
  .human-message .message-content {
    font-size: 14px;
    line-height: 1.62;
  }
}