/* public/bonzi.css */

/* Font Face Declaration */
@font-face {
    font-family: 'ArcadeClassic';
    src: url('static/arcadeclassic.woff') format('woff');
  }
  
  /* Set ArcadeClassic as the default font for the UI */
  body, #bonzi-buddy-container, #bonzi-buddy-chatbox {
    font-family: 'ArcadeClassic', Arial, sans-serif;
  }
  
  /* Override font for assistant's responses */
  #bonzi-buddy-chatbox .bonzi-message.bot p {
    font-family: Arial, sans-serif;
  }
  
  /* Styling the assistant container */
  #bonzi-buddy-container {
    position: fixed;
    bottom: 60px; /* Adjusted from 20px to 60px */
    right: 20px;
    width: 100px;
    height: 100px;
    z-index: 9999999;
  }
  
  #bonzi-buddy-container img {
    width: 100%;
    height: auto;
    cursor: pointer;
  }
  
  /* Styling the chatbox */
  #bonzi-buddy-chatbox {
    position: fixed;
    bottom: 170px; /* Adjusted to match the new assistant position */
    right: 20px;
    width: auto;
    max-width: 300px;
    background: #fcfee4; /* Background color */
    border: 1px solid #000; /* Simple black outline */
    border-radius: 10px; /* Rounded corners for text bubble effect */
    overflow: hidden;
    display: none;
    flex-direction: column;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-sizing: border-box;
    z-index: 1000000; /* Include padding and border in size */
  }
  
  /* Remove header to make it minimal */
  #bonzi-buddy-chatbox header {
    display: none;
  }
  
  /* Styling the messages container */
  #bonzi-buddy-chatbox .messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
  }
  
  /* Styling the input area */
  #bonzi-buddy-chatbox .input {
    display: flex;
    border-top: none; /* Remove border-top to fix extra line issue */
  }
  
  /* Remove borders and padding from input and button */
  #bonzi-buddy-chatbox .input input,
  #bonzi-buddy-chatbox .input button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  /* Remove outline when input is focused */
  #bonzi-buddy-chatbox .input input:focus {
    outline: none;
  }
  
  /* Style the input field */
  #bonzi-buddy-chatbox .input input {
    flex: 1;
    padding: 10px;
    border-bottom: 1px solid #000;
    font-family: 'ArcadeClassic', Arial, sans-serif;
    word-spacing: 2px; /* Add extra space between words */
  }
  
  /* Style the button */
  #bonzi-buddy-chatbox .input button {
    padding: 10px;
    font-size: 16px;
    font-family: 'ArcadeClassic', Arial, sans-serif;
    cursor: pointer;
    background: none;
    color: #000;
    border-bottom: 1px solid #000; /* Add bottom border to match input */
  }
  
  /* Align button content */
  #bonzi-buddy-chatbox .input button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Styling messages */
  .bonzi-message {
    margin-bottom: 10px;
  }
  
  .bonzi-message.user {
    text-align: right;
  }
  
  .bonzi-message.bot {
    text-align: left;
  }
  
  /* User messages */
  .bonzi-message.user p {
    background: #dcf8c6;
    color: #000;
    border: 1px solid #000;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
    word-wrap: break-word;
    font-family: 'ArcadeClassic', Arial, sans-serif;
    word-spacing: 2px; /* Add extra space between words */
    box-sizing: border-box;
  }
  
  /* Assistant messages */
  #bonzi-buddy-chatbox .bonzi-message.bot p {
    background: #fcfee4;
    color: #000;
    border: 1px solid #000;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 80%;
    word-wrap: break-word;
    font-family: Arial, sans-serif; /* Assistant's responses in Arial */
    box-sizing: border-box;
  }
  
  /* Remove unnecessary styles to make it minimal */
  #bonzi-buddy-chatbox .input input,
  #bonzi-buddy-chatbox .input button {
    background: none;
    border: none;
  }
  
  #bonzi-buddy-chatbox .input button {
    font-size: 16px;
    z-index: 10000000;
  }