/* Core Layout and Structure with Default Style Values
 * This file defines the base structure of the chat interface
 * and provides default values for all CSS variables.
 */

/* ====== DEFAULT STYLE VALUES ====== */

:root {

  /* ---- Global Colors ---- */
  --text: #212529;                   /* Primary text color */
  --text-secondary: #6c757d;         /* Secondary text color */
  --border: #dee2e6;                 /* Borders and dividers */
  --link-color: #0a58ca;             /* Link text color */

  /* ---- Body Properties ---- */
  --body-bg-color: #f8f9fa;          /* Body background color */
  --body-bg-image: none;               /* Body background image */
  --body-bg-blur: none;                /* Body background blur effect */
  
  /* ---- Container Properties ---- */
  --container-bg-color: #ffffff;     /* Container background color */
  --container-opacity: 1.0;            /* Container background opacity */
  --container-bg-image: none;          /* Container background image */
  --container-backdrop-filter: none;   /* Container backdrop filter */
  --container-max-width: none;         /* Container maximum width */
  
  /* ---- Chat Container Properties ---- */
  --chat-container-bg-color: #ffffff;        /* Chat area background color */
  --chat-container-bg-image: none;             /* Chat area background image */
  --chat-container-opacity: 1.0;               /* Chat area opacity */
  --chat-container-backdrop-filter: none;      /* Chat backdrop filter */

  /* ---- Title & Header ---- */
  --logo-image: none;                  /* Logo image URL */  
  --title-text-color: var(--text);     /* Title text color */
  --title-text-shadow: none;           /* Title text shadow */
  --title-btn-bg: transparent;         /* Title buttons background */
  --title-btn-radius: 0;               /* Title buttons corner radius */
  --title-btn-color: #6c757d;        /* Title button icon color */
  --title-btn-hover-color: #495057;  /* Title button icon hover color */
  --title-btn-hover-bg: rgba(0, 0, 0, 0.05); /* Title button hover background */

  /* ---- Message Bubbles ---- */
  --user-message-bg: #dde6fa;        /* Light blue user bubbles */
  --user-message-text: #212529;      /* User message text */
  --assistant-message-bg: #d0f0d1;   /* Light green assistant bubbles */
  --assistant-message-text: #212529; /* Assistant message text */
  --message-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Message shadow */

  /* ---- About chatbot window ---- */
  --popup-bg-color: #ffffff;          /* Popup background color */
  --popup-opacity: 1.0;                 /* Popup/modal opacity */
  --popup-backdrop-filter: none;        /* Popup backdrop filter */
  --popup-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* Popup shadow */
  --overlay-bg: rgba(0, 0, 0, 0.5);   /* Background behind the about chatbot window */

    /* ---- Send Button ---- */
  --primary: #0d6efd;                /* Primary button color */
  --primary-hover: #0b5ed7;          /* Primary button hover */
  --hover: rgba(0, 0, 0, 0.05);      /* Hover effect color */
  
  /* ---- User text input Area ---- */
  --input-bg: #ffffff;               /* Input field background */
  --input-text: #212529;             /* Input text color */
  --input-placeholder-text: #adb5bd; /* Input placeholder text color */
  --input-area-bg: var(--body-bg-color); /* Input area background */
  
  /* ---- Message content: Code Elements ---- */
  --code-bg: #f7f7f7;                /* Code block background */
  --code-border: #e1e4e8;            /* Code block border */
 
  /* ---- Message content: Tables ---- */
  --table-header-bg: #f2f2f2;        /* Table header */
  --table-row-even: #f8f9fa;         /* Even table rows */
  
  /* ---- Scrollbars ---- */
  --scrollbar: #e9ecef;              /* Scrollbar track */
  --scrollbar-thumb: #ced4da;        /* Scrollbar handle */
  --scrollbar-thumb-hover: #adb5bd;  /* Scrollbar hover */
  
  /* ---- Alerts & Notifications ---- */
  --alert-danger-bg: #f8d7da;        /* Error background */
  --alert-danger-border: #f5c2c7;    /* Error border */
  --alert-danger-text: #842029;      /* Error text */
  --blockquote-border: #dee2e6;      /* Blockquote border */
}

/* ====== BASE STYLES ====== */

html, body { 
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100%;
  margin: 0;
  background-color: var(--body-bg-color) !important;
  color: var(--text) !important;
}

/* Apply to all elements to prevent unwanted backgrounds */
* {
  box-sizing: border-box;
}

#background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10000;
  background-image: var(--body-bg-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -9999;
  backdrop-filter: var(--body-bg-blur);
  -webkit-backdrop-filter: var(--body-bg-blur);
  pointer-events: none;
}

.container {
  background-color: rgba(0, 0, 0, 0); /* Start with transparent background */
  background-image: var(--container-bg-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: var(--container-max-width) !important;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  position: relative;
  backdrop-filter: var(--container-backdrop-filter);
  -webkit-backdrop-filter: var(--container-backdrop-filter);
}

/* Create a pseudo-element for the background color with opacity */
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--container-bg-color);
  opacity: var(--container-opacity);
  z-index: -1;
  border-radius: 8px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Form controls */
textarea { 
  resize: vertical; 
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border);
}

textarea:focus {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(92, 139, 255, 0.25);
}

/* Button overrides */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border);
}

.btn-outline-secondary:hover {
  background-color: var(--hover);
  color: var(--text);
  border-color: var(--text-secondary);
}

/* Initial hidden elements until config is loaded */
#titleContainer {
  visibility: hidden;
}

/* Title container styling */
#titleText {
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
  color: var(--title-text-color);
  text-shadow: var(--title-text-shadow);
}

/* Logo next to title */
#titleImage {
  content: var(--logo-image);
  max-height: 34px;
  width: auto;
}

/* Title container structure */
#titleContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

#titleContainer > div:first-child {
  display: flex;
  align-items: center;
  min-width: 0; /* Important for ellipsis to work */
  flex: 1; 
}

#titleContainer > div:last-child {
  display: flex;
  flex: 0 0 auto;
}

/* Title container buttons styling */
#titleContainer button {
  border: none;
  background-color: var(--title-btn-bg);
  transition: all 0.2s ease;
  padding: 6px 8px;
  margin-right: 5px;
  color: var(--title-btn-color);
  border-radius: var(--title-btn-radius);
}

#titleContainer button i.bi {
  font-size: 1.1rem;
}

/* Title container buttons hover effect */
#titleContainer button:hover {
  background-color: var(--title-btn-hover-bg);
  color: var(--title-btn-hover-color);
}

/* Chat container */
.chat-container {
  height: 75vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: .25rem;
  padding: 10px;
  margin-bottom: 15px;
  position: relative;
  background-image: var(--chat-container-bg-image);
  background-size: cover; /* or 'contain' depending on your need */
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: var(--chat-container-backdrop-filter);
  -webkit-backdrop-filter: var(--chat-container-backdrop-filter);
}

/* Create a pseudo-element for the chat background color with opacity */
.chat-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--chat-container-bg-color);
  opacity: var(--chat-container-opacity);
  z-index: -1;
  border-radius: .25rem;
}

/* Message styling */
.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  max-width: 80%;
  box-shadow: var(--message-shadow);
  position: relative;
  z-index: 1; /* Ensure message content stays above the background */
}

.user-message {
  background-color: var(--user-message-bg);
  margin-left: auto;
  margin-right: 0;
  white-space: pre-wrap;
  width: fit-content;
  color: var(--user-message-text);
  border-bottom-right-radius: 2px;
}

.assistant-message {
  background-color: var(--assistant-message-bg);
  margin-left: 0;
  margin-right: 20px;
  max-width: 90%;
  color: var(--assistant-message-text);
  border-bottom-left-radius: 2px;
}

/* Input area styling */
.input-area {
  position: relative;
  background-color: var(--input-area-bg);
  border-radius: 5px;
  padding: 0;
  margin-top: 15px;
}

/* Dynamic textarea styling */
#userInput {
  min-height: 38px;
  max-height: 33vh;
  overflow-y: auto;
  resize: none;
  padding-right: 80px;
  padding-left: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border);
  border-radius: 5px;
}

#userInput::placeholder {
  color: var(--input-placeholder-text);
  opacity: 0.7;
}

.send-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 0.875rem;
  padding: 0.3rem 0.75rem;
  border-radius: 0 5px 5px 0;
  background-color: var(--primary);
  border: none;
  color: white;
  height: 38px;
  transition: background-color 0.2s ease;
  margin-right: 10px;
  margin-bottom: 10px;
}

.send-btn:hover {
  background-color: var(--primary-hover);
}

/* Message content formatting */
.message-content h1, 
.message-content h2, 
.message-content h3, 
.message-content h4, 
.message-content h5, 
.message-content h6 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-weight: bold;
  color: var(--text);
}

/* Individual font sizes for proper hierarchy */
.message-content h1 { font-size: 1.5em; }
.message-content h2 { font-size: 1.3em; }
.message-content h3 { font-size: 1.2em; }
.message-content h4 { font-size: 1.1em; }
.message-content h5 { font-size: 1.05em; }
.message-content h6 { font-size: 1.00em; }



.message-content p {
  margin-bottom: 0.4em;   /* line spacing after sentence */
  color: var(--text);
}

.message-content ul, .message-content ol {
  margin-left: 0.2em;      /* bullet indent size */
  margin-bottom: 0.6em;    /* line spacing after last bullet */
  color: var(--text);
}

/* Code block styling */
.message-content pre {
  background-color: var(--code-bg);
  padding: 0.8em;
  border-radius: 5px;
  overflow-x: auto;
  margin-bottom: 1em;
  border: 1px solid var(--code-border);
}

.message-content pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  line-height: 1.5;
  font-size: 0.9em;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
  display: block;
  color: var(--text);
}

.message-content code {
  background-color: var(--code-bg);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
  color: var(--text);
}

/* Tables */
.message-content table {
  border-collapse: collapse;
  margin: 1em 0;
  overflow-x: auto;
  width: 100%;
}

.message-content table th,
.message-content table td {
  border: 1px solid var(--border);
  padding: 8px;
}

.message-content table th {
  background-color: var(--table-header-bg);
  font-weight: 600;
  text-align: left;
}

.message-content table tr:nth-child(even) {
  background-color: var(--table-row-even);
}

/* Links */
.message-content a {
  color: var(--primary);
  text-decoration: none;
}

.message-content a:hover {
  text-decoration: underline;
  color: var(--link-color);
}

/* Blockquotes */
.message-content blockquote {
  border-left: 4px solid var(--blockquote-border);
  color: var(--text-secondary);
  margin: 0.5em 0;
  padding: 0 1em;
}

/* Horizontal rule */
.message-content hr {
  border: none !important;  /* Use !important to override Bootstrap */
  border-top: 1px solid var(--text) !important;
  margin: 1em 0 !important;
  height: 0 !important;
  background: none !important;
}

/* Override bootstrap alert colors */
.alert {
  background-color: var(--container-bg-color);
  color: var(--text);
  border-color: var(--border);
}

.alert-danger {
  background-color: var(--alert-danger-bg);
  border-color: var(--alert-danger-border);
  color: var(--alert-danger-text);
}

.alert-heading {
  color: var(--alert-danger-text);
}

/* Overlay background behind the about chatbot window */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-bg, rgba(0, 0, 0, 0.7));
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Window showing info about chatbot */
.info-popup {
  position: relative;
  color: var(--text);
  padding: 20px;
  border-radius: 5px;
  box-shadow: var(--popup-shadow);
  max-width: 500px;
  width: 90%;
  border: 1px solid var(--border);
  backdrop-filter: var(--popup-backdrop-filter);
  -webkit-backdrop-filter: var(--popup-backdrop-filter);
}

/* Create a pseudo-element for the popup background color with opacity */
.info-popup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--popup-bg-color);
  opacity: var(--popup-opacity);
  z-index: -1;
  border-radius: 5px;
}

/* Popup button styling */
.popup-btn {
  position: absolute;
  top: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  color: var(--text-secondary);
}

/* Position buttons on right side */
.popup-close-btn {
  right: 8px;
}

.popup-export-btn {
  right: 40px;
}

/* Icon sizing */
.popup-btn i.bi {
  font-size: 18px;
  line-height: 1;
}

/* Specifically for the X button which might need adjustment */
.popup-close-btn i.bi-x {
  font-size: 22px;
}

/* Hover effect */
.popup-btn:hover {
  background-color: var(--hover);
  border-radius: 4px;
  color: var(--text);
}

.info-popup h3 {
  margin-top: 0;
  padding-right: 70px; /* Make space for the buttons */
}

/* Mobile responsive adjustments */
@media (max-width: 576px) {
  #titleText {
    font-size: 1.1rem;
    max-width: 65%;
  }
  
  .chat-container {
    height: 65vh;
  }
  
  .message {
    max-width: 95%;
  }
  
  .user-message {
    max-width: 85%;
  }
  
  .assistant-message {
    max-width: 95%;
    margin-right: 10px;
  }
  
  .info-popup {
    width: 95%;
    max-width: 400px;
  }
}

/* Small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  #titleText {
    font-size: 1rem;
    max-width: 60%;
  }
  
  .chat-container {
    height: 58vh;
    padding: 6px;
  }
  
  .assistant-message {
    max-width: 97%;
    margin-right: 3px;
  }
  
  .message {
    padding: 8px;
  }
}

/* Fix for iOS Safari's 100vh issue */
@supports (-webkit-touch-callout: none) {
  .chat-container {
    height: 60vh;
  }
}