html, body {
    font-family: system-ui, sans-serif;
    margin: 0px;
    height: 100%;
}

:root {
  --main-max: 800px;
}

#chat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    min-height: 300px;
    overflow-y: auto;
    background-color: #fefefe;
}

#chat .user {
    white-space: pre-wrap;
}

button {
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}
.assistant {
    color: green;
    margin-bottom: 0.5em;
}
#top-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

#top-bar button {
    padding: 6px 10px;
    font-size: 0.9rem;
}

/* Textarea that can grow; no inner scrollbar = one scrollbar overall */
#message {
  flex: 1;
  width: 100%;
  resize: none;     /* we’ll auto-grow it */
  min-height: 2.5em;
  overflow: hidden; /* prevent the textarea from showing its own scroll */
  font-family: inherit;  /* use same font as the surrounding UI */
  font-size: 1rem;       /* keep it consistent */
  line-height: 1.4;
}

header {
  padding: 1em;
  flex: 0 0 auto;
}

#chat-container {
  /* Default padding in case JS hasn’t run yet */
  /* padding-bottom: calc(var(--input-bar-h, 64px));  */
  padding-bottom: 1em;
}

#input-bar {
  position: sticky;
  bottom: 0;                 /* stick to bottom of the viewport */
  background: #fff;
  padding: 8px;
  border-top: 1px solid #e5e5e5;
  z-index: 10;               /* ensure it sits above content */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#main {
    width: min(100%, var(--main-max));
    margin: 0 auto;     /* Centered */
    padding-inline: 16px;   /* Side padding */
}

/* All direct children fill the column */
#main > * {
  width: 100%;
}

#input-controls {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

#send {
    flex: 0 0 auto; /* keeps the button at default size */
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #eee;
    cursor: pointer;
}

#send:hover {
    background: #e0e0e0;
}

#hint {
    font-size: 0.85rem;
    color: #666;
    margin-top: 4px;
    text-align: right;
}

kbd {
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 1px 4px;
    font-family: monospace;
}
#status {
    min-height: 1.2em;
    font-size: 0.9rem;
    color: #888;
    margin: 4px 0 6px;
    font-style: italic;
}
/* The dots only animate when the "sending" class is present */
#status.sending::after {
    content: "";
    animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
    0%,
    20% {
        content: "";
    }
    40% {
        content: ".";
    }
    60% {
        content: "..";
    }
    80%,
    100% {
        content: "...";
    }
}

.message {
    max-width: 75%;
    padding: 8px 12px;
    line-height: 1.4;
    font-size: 1rem;
    white-space: pre-wrap; /* preserve newlines */
    word-wrap: break-word;
}

/* Assistant (tutor) messages: left-aligned, plain */
.message.assistant {
    align-self: flex-start;
    background: transparent;
    color: #333;
}

/* User (you) messages: right-aligned bubble */
.message.user {
    align-self: flex-end;
    background: #e5e5e5;
    color: 000;
    border-radius: 18px 18px 2px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Optional: nicer text wrapping for long code blocks */
.message pre {
    overflow-x: auto;
}

/* Tighter spacing for Markdown content */
.message.assistant p {
    margin: 0 0; /* reduce vertical gap between paragraphs */
}

.message.assistant ul,
.message.assistant ol {
    margin: 0.4em 0 0.4em 1.2em; /* smaller top/bottom, normal indent */
}

.message.assistant pre {
    margin: 0.4em 0;
    padding: 8px;
    background: #f8f8f8;
    border-radius: 6px;
    overflow-x: auto;
}

.message.assistant code {
    background: #f0f0f0;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
}

/* --- Compact Markdown Chat Styling --- */
.message.assistant {
    .markdown-body {
        line-height: 1.4;
        font-size: 1rem;
        color: #222;
        white-space: normal;
    }

    /* Paragraph spacing */
    .markdown-body p {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    /* Lists */
    .markdown-body ul,
    .markdown-body ol {
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        padding-left: 1.2em;
    }

    .markdown-body li {
        margin-top: 0.1em;
        margin-bottom: 0.1em;
    }

    /* Code */
    .markdown-body pre,
    .markdown-body code {
        font-family: var(--font-monospace, monospace);
        font-size: 0.95em;
        background: #f8f8f8;
        padding: 0.15em 0.25em;
        border-radius: 3px;
    }

    /* Blockquotes */
    .markdown-body blockquote {
        margin: 0.3em 0;
        padding-left: 0.8em;
        border-left: 3px solid #ccc;
        color: #555;
    }
}