/*
  Stylesheet for the AI Agent Interface page.  This file defines the layout
  and appearance of the chat container, message bubbles and form controls.
  It follows the same visual language as the existing hivehog site by
  using simple borders, rounded corners and blue accents on interactive
  elements.
*/

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  background-color: #f7fbff;
}

header {
  padding: 1rem;
  background: #eaf4ff;
  border-bottom: 1px solid #cce5ff;
}

main {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
}

/* Chat container that holds all messages */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #d0e6ff;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  overflow-y: auto;
  background: #ffffff;
}

/* Base message bubble */
.message {
  max-width: 80%;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* User messages aligned right with blue background */
.message.user {
  align-self: flex-end;
  background: #d0e6ff;
  border: 1px solid #99c0ff;
}

/* Agent messages aligned left with grey background */
.message.agent {
  align-self: flex-start;
  background: #f0f0f0;
  border: 1px solid #dddddd;
}

/* Chat form containing the input and button */
.chat-form {
  display: flex;
  gap: 0.5rem;
}

.chat-form input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.chat-form button {
  padding: 0.5rem 1rem;
  border: none;
  background: #0b5fff;
  color: #ffffff;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

.chat-form button:hover {
  filter: brightness(0.95);
}