/* Import Tilda Sans font */
@font-face {
  font-family: 'Tilda Sans';
  src: url('../fonts/TildaSans-Regular/TildaSans-Regular.woff2') format('woff2'),
       url('../fonts/TildaSans-Regular/TildaSans-Regular.woff') format('woff'),
       url('../fonts/TildaSans-Regular/TildaSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Global styles */
body {
  font-family: 'Tilda Sans', sans-serif;
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  padding-top: 50px;
  margin: 0;
  box-sizing: border-box;
}

*, *::before, *::after {
  font-family: 'Tilda Sans', sans-serif !important;
  box-sizing: border-box;
}

/* Chat container */
.chat-container {
  width: 400px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* Header with light teal */
.chat-header {
  background: #28b67a; /* Teal green */
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

/* Chat box area */
.chat-box {
  height: 400px;
  overflow-y: auto;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

/* Message styles */
.chat-message {
  margin: 10px 0;
  max-width: 90%;
}

.chat-message.user {
  text-align: right;
}

.chat-message.bot {
  text-align: left;
}

.chat-message span {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 16px;
  line-height: 1.4;
  max-width: 100%;
}

/* Lighter user & bot message bubbles */
.chat-message.user span {
  background: #d0f4ff; /* Soft light blue-teal */
  color: #0077a6;
}

.chat-message.bot span {
  background: #e0f8f6; /* Pale mint-teal */
  color: #007c6c;
}

/* Input area */
.chat-input {
  display: flex;
  border-top: 1px solid #ccc;
}

.chat-input input {
  flex: 1;
  padding: 12px;
  border: none;
  font-size: 15px;
  outline: none;
}

.chat-input button {
  background: #28b67a; /* Teal green */
  color: white;
  padding: 0 20px;
  border: none;
  cursor: pointer;
  font-size: 15px;
}

.chat-input button:hover {
  background: #20a06a;
}

/* Typing indicator */
.typing-indicator {
  font-style: italic;
  color: #888;
  padding: 5px 10px;
}

/* Links */
a {
  color: #28b67a;
  text-decoration: underline;
}

/* Code blocks */
pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: #f3fdfd;
  padding: 10px;
  border-radius: 8px;
  color: #00695c;
  max-height: 200px;
  overflow-y: auto;
  font-family: monospace;
}