/*
 * Base styles for the Anniyan single‑page site.
 *
 * The page displays a full‑screen background image of the Anniyan character
 * sitting on a bull.  A translucent chat panel floats above it.  We use
 * modern CSS features such as flexbox and backdrop filter to create a
 * responsive, accessible interface.  All fonts are set to a legible
 * sans‑serif family with support for Tamil script.  Feel free to adjust
 * colours or sizing to better match the supplied artwork.
 */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* The background container uses an absolutely positioned div with the
   background image covering the entire viewport.  Replace
   images/background.jpg with the actual filename of the uploaded
   illustration. */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Use separate properties for finer control of the background positioning.
     Centre the image horizontally and offset it slightly downwards so the
     character’s head is fully visible on desktop.  The first value is the
     horizontal position (50% = centre) and the second is the vertical
     position.  A value of 20% pushes the image down a bit compared to
     centre (50%) so less of the top is cropped. */
  background-image: url('./images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 20%;
  z-index: -1;
}

/* Wrapper for chat interface anchored to the bottom of the page. */
.chat-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 60%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  color: #fff;
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  /* Subtle shadow to lift the panel off the background for better contrast */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
}

/* Scrollable area containing chat messages. */
.messages {
  flex: 1 1 auto;
  padding: 1rem;
  overflow-y: auto;
  font-size: 1rem;
  line-height: 1.5;
}

/* Individual message styling.  Outgoing (user) and incoming (bot)
   messages are distinguished by alignment and colour. */
.message {
  margin-bottom: 0.8rem;
  display: flex;
}

.message.user {
  justify-content: flex-end;
}

.message.bot {
  justify-content: flex-start;
}

.message .bubble {
  max-width: 80%;
  padding: 0.6rem 0.8rem;
  border-radius: 0.8rem;
  word-wrap: break-word;
}

.message.user .bubble {
  background: #4a8af4;
  color: #fff;
  border-bottom-right-radius: 0;
}

.message.bot .bubble {
  background: #2e2e2e;
  border-bottom-left-radius: 0;
  color: #e6e6e6;
}

/* Speaker button appended to bot messages */
.speak-btn {
  background: transparent;
  border: none;
  color: #b0cfff;
  margin-left: 0.5rem;
  cursor: pointer;
  vertical-align: middle;
}
.speak-btn:hover {
  color: #fff;
}

/* Input bar containing text field and send button. */
.input-bar {
  display: flex;
  padding: 0.6rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  /* Darker, more opaque background for the input bar to improve legibility */
  background: rgba(0, 0, 0, 0.7);
}

.input-bar input {
  flex: 1 1 auto;
  padding: 0.6rem 0.8rem;
  border: none;
  border-radius: 0.6rem;
  font-size: 1rem;
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.input-bar button {
  margin-left: 0.6rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 0.6rem;
  background: #4a8af4;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.input-bar button:hover {
  background: #3a72c0;
  transform: translateY(-1px);
}

/* Make the interface responsive by adjusting sizes on smaller screens. */
@media (max-width: 600px) {
  .messages {
    font-size: 0.9rem;
  }
  .input-bar input {
    font-size: 0.9rem;
  }
  .input-bar button {
    font-size: 0.9rem;
  }

  /* On narrow screens (mobile), adjust the background position so the
     character (who sits towards the left side of the artwork) remains fully
     visible.  The original illustration places Anniyan on the left with
     empty space on the right.  To bring the character into view on tall
     mobile screens, we shift the background toward the right (horizontal
     position ~70%) and further down (vertical position ~30%).  These
     percentage values are tuned to centre the figure while preserving the
     desktop layout.  You can tweak these values if the image composition
     changes. */
  .background {
    /* Use a distinct artwork for mobile screens.  This image is a
       portrait‑oriented version of Anniyan that fits better on tall
       viewports.  Position it slightly down from the top so the
       character’s head and horns remain fully visible. */
    background-image: url('./images/background_mobile.jpg');
    background-position: 50% 20%;
  }
}