/* Minimalist chatbot CSS */

/* Base font size for responsive scaling */
html {
  font-size: 16px; /* Base font size - all rem units will be relative to this */
}

/* Responsive font scaling for different screen sizes */
@media (max-width: 480px) {
  html {
    font-size: 14px; /* Smaller base size for mobile phones */
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  html {
    font-size: 15px; /* Medium base size for tablets */
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 16px; /* Slightly larger base size for large screens */
  }
}

@media (min-width: 1600px) {
  html {
    font-size: 17px; /* Larger base size for very large screens */
  }
}

/* Minimalist scrollbar styling */
::-webkit-scrollbar {
  width: 0.375rem; /* 6px */
  height: 0.375rem; /* 6px */
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.1875rem; /* 3px */
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.1875rem; /* 3px */
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Chat-specific scrollbar for chat body */
.chat-body::-webkit-scrollbar {
  width: 0.25rem; /* 4px */
}

.chat-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0.125rem; /* 2px */
}

.chat-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0.125rem; /* 2px */
}

.chat-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar styling */
.chat-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.02);
}

/* Chat toggle button - simple and clean */
.chat-button {
  position: fixed;
  bottom: 1.25rem; /* 20px */
  right: 1.25rem; /* 20px */
  width: 3.5rem; /* 56px */
  height: 3.5rem; /* 56px */
  background: #ffffff;
  color: white;
  border: none;
  border-radius: 50%;
}
:root {
  --chat-pos-x: 2rem;
  --chat-pos-y: 1.25rem;
  --chat-btn-size: 3.5rem;
  --chat-width: 28.125rem; /* 450px converted to rem */
  --chat-height: 43.75rem; /* 700px converted to rem */
}

/* chatbot css */
.chat-button {
  position: fixed;
  bottom: var(--chat-pos-y);
  right: var(--chat-pos-x);
  background-color: white;
  color: white;
  border: none;
  border-radius: 50%;
  width: var(--chat-btn-size);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem; /* 20px */
  cursor: pointer;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 123, 255, 0.3); /* 0 4px 12px */
  transition: all 0.3s ease;
  z-index: 1000;
}

.chat-button img {
  height: 90%;
  object-fit: contain;
}

.chat-button:hover {
  background: #000000;
  transform: translateY(-0.125rem); /* -2px */
  box-shadow: 0 0.375rem 1rem rgba(0, 123, 255, 0.4); /* 0 6px 16px */
}

.chat-button-fourdy:hover {
  background: #ffffff;
}

.chat-button:hover img {
  height: 100%;
  object-fit: contain;
}

/* Notification tooltip */
.chat-notification {
  position: fixed;
  bottom: 5.625rem; /* 90px */
  right: 1.25rem; /* 20px */
  background: white;
  color: #333;
  padding: 0.75rem 1rem; /* 12px 16px */
  border-radius: 0.5rem; /* 8px */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15); /* 0 4px 12px */
  z-index: 1001;
  border-left: 0.25rem solid #007bff; /* 4px */
  animation: slideInUp 0.3s ease;
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

#notification-welcome {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

#notification-spinner {
  color: #007bff;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chat container - responsive design with resize functionality */
.chat-container {
  position: fixed;
  bottom: calc(var(--chat-btn-size) + var(--chat-pos-y) * 2);
  right: var(--chat-pos-x);
  width: clamp(18.75rem, var(--chat-width), calc(100vw - var(--chat-pos-x) * 2)); /* min 300px, preferred 450px, max viewport-aware */
  height: clamp(25rem, var(--chat-height), calc(100vh - var(--chat-btn-size) - var(--chat-pos-y) * 4)); /* min 400px, preferred 700px, max viewport-aware */
  max-width: 90vw;
  max-height: 90vh;
  background: white;
  border-radius: 0.75rem; /* 12px */
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12); /* 0 8px 32px - enhanced shadow */
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  resize: none; /* Disable default resize */
  border: 0.125rem solid transparent; /* 2px */
}

.chat-container.show {
  transform: scale(1);
  opacity: 1;
}

/* Custom resize handles for all borders */
.chat-container .resize-handle {
  position: absolute;
  z-index: 1001;
}

/* Top resize handle */
.chat-container .resize-handle.top {
  top: 0;
  left: 0.5rem; /* 8px */
  right: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  cursor: ns-resize;
  background: transparent;
}

/* Bottom resize handle */
.chat-container .resize-handle.bottom {
  bottom: 0;
  left: 0.5rem; /* 8px */
  right: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  cursor: ns-resize;
  background: transparent;
}

/* Left resize handle */
.chat-container .resize-handle.left {
  left: 0;
  top: 0.5rem; /* 8px */
  bottom: 0.5rem; /* 8px */
  width: 0.5rem; /* 8px */
  cursor: ew-resize;
  background: transparent;
}

/* Right resize handle */
.chat-container .resize-handle.right {
  right: 0;
  top: 0.5rem; /* 8px */
  bottom: 0.5rem; /* 8px */
  width: 0.15rem; /* ~2px */
  cursor: ew-resize;
  background: transparent;
}

/* Corner resize handles */
.chat-container .resize-handle.top-left {
  top: 0;
  left: 0;
  width: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  cursor: nw-resize;
  background: transparent;
}

.chat-container .resize-handle.top-right {
  top: 0;
  right: 0;
  width: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  cursor: ne-resize;
  background: transparent;
  /* Move away from scrollbar area */
  margin-right: 0.375rem; /* 6px - width of scrollbar */
}

.chat-container .resize-handle.bottom-left {
  bottom: 0;
  left: 0;
  width: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  cursor: sw-resize;
  background: transparent;
}

.chat-container .resize-handle.bottom-right {
  bottom: 0;
  right: 0;
  width: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  cursor: se-resize;
  background: transparent;
  /* Move away from scrollbar area */
}

/* Visual indicator for bottom-right corner */
.chat-container .resize-handle.bottom-right::after {
  content: '';
  position: absolute;
  bottom: 0.125rem; /* 2px */
  right: 0.125rem; /* 2px */
  width: 0.625rem; /* 10px */
  height: 0.625rem; /* 10px */
  background: linear-gradient(-45deg, transparent 0%, transparent 30%, #ccc 30%, #ccc 40%, transparent 40%, transparent 60%, #ccc 60%, #ccc 70%, transparent 70%);
  border-radius: 0 0 0.5rem 0; /* 8px */
}

.chat-container:hover {
  border-color: rgba(0, 123, 255, 0.2);
}

/* Minimalist header */
.chat-header {
  background: #007bff;
  color: white;
  padding: 16px 20px;
  border-radius: 12px 12px 0 0;
  cursor: default; /* Default cursor since dragging is desktop-only */
  position: relative;
}

/* On desktop, enable dragging cursor */
@media (min-width: 769px) {
  .chat-header {
    cursor: grab;
  }
  
  .chat-header:active {
    cursor: grabbing;
  }
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px; /* Ensures consistent height */
}

.assistant-name {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  line-height: 1.2;
  flex: 1; /* Allow it to take available space */
}

.beta-tag {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  height: 16px; /* Fixed height for vertical alignment */
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
}

.header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0; /* Prevent shrinking */
}

/* New minimalist close button */
.close-btn {
  background: none;
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 16px;
  opacity: 0.8;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  opacity: 1;
  transform: scale(1.1);
}

.close-btn:active {
  transform: scale(0.95);
}

.action-btn {
  background: none;
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.action-btn:active {
  transform: scale(0.95);
}

/* Add ripple effect for better interaction feedback */
.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.action-btn:active::before {
  width: 40px;
  height: 40px;
}

/* Chat body */
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  /* Add margin to ensure scrollbar doesn't interfere with resize handles */
  margin-right: 0.125rem; /* 2px */
}

/* Welcome screen */
.welcome-screen {
  padding: 0 24px;
  text-align: center;
}

.assistant-avatar {
  width: 48px;
  height: 48px;
  background-image: url('../../_static/images/hoopsy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: transform 0.2s ease;
}

.assistant-avatar:hover {
  transform: scale(1.1);
}

.welcome-screen h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #333;
}

.welcome-screen p {
  margin: 0 0 32px;
  color: #666;
  font-size: 14px;
}

/* Quick questions */
.quick-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.question-item {
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  border: 1px solid transparent;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.question-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.question-icon i {
  color: white;
  font-size: 14px;
}

/* Animated border effect for question items - DISABLED */
.question-item::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 10px;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, #007bff 270deg, #0056b3 330deg, transparent 330deg, transparent 360deg);
  opacity: 0; /* Always hidden */
  animation: none; /* Disable animation */
  z-index: -1;  
}

/* Show animated border when chat container is opened - DISABLED */
.chat-container.show .question-item::before {
  opacity: 0; /* Keep hidden */
  animation: none; /* Disable animation */
}

/* Staggered animation delay for each question item */
.chat-container.show .question-item:nth-child(1)::before {
  animation-delay: 0.2s;
}

.chat-container.show .question-item:nth-child(2)::before {
  animation-delay: 0.4s;
}

.chat-container.show .question-item:nth-child(3)::before {
  animation-delay: 0.6s;
}

.chat-container.show .question-item:nth-child(4)::before {
  animation-delay: 0.8s;
}

.chat-container.show .question-item:nth-child(5)::before {
  animation-delay: 1.0s;
}

@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.question-item:hover {
  background: #e9ecef;
  border-color: #007bff;
}

.question-item span {
  font-size: 14px;
  color: #333;
}

/* Disclaimer */
.disclaimer {
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.disclaimer p {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.disclaimer a {
  color: #007bff;
  text-decoration: none;
}

.disclaimer a:hover {
  text-decoration: underline;
}

/* Loading indicator */
.loading-indicator {
  padding: 0 24px;
  margin-bottom: 16px;
}

/* Loading message styled like assistant message */
.message.assistant.loading-message {
  display: grid;
  grid-template-areas: 
    "icon text";
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto;
  gap: 8px 12px;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 0;
  padding: 0;
}

/* Loading message avatar */
 .message.assistant.loading-message::before {
  content: '';
  grid-area: icon;
  width: 32px;
  height: 32px;
  background-image: url('../../_static/images/hoopsy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 0;
  border-radius: 50%;
  transition: transform 0.2s ease;
  justify-self: center;
}

.message.assistant.loading-message:hover::before {
  transform: scale(1.1);
}

/* Loading content area */
.message.assistant.loading-message .loading-spinner-container {
  grid-area: text;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-left: 3px solid transparent;
  padding-left: 12px;
  margin-left: -12px;
  transition: border-color 0.2s ease;
}

.message.assistant.loading-message .loading-spinner-container:hover {
  border-left-color: #007bff;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e9ecef;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

.loading-text {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  line-height: 1.6;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Chat input area */
.chat-input {
  padding: 16px;
  border-top: 1px solid #e9ecef;
  position: relative;
  overflow: hidden;
}

/* Animated RGB strip for typing status */
.chat-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  /* Smooth flowing rainbow gradient */
  background: linear-gradient(90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff00ff,
    #ff0000
  );
  background-size: 400% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: none;
}

/* Activate RGB strip when typing */
.chat-input.typing::before {
  opacity: 1;
  animation: rgbFlow 3s linear infinite;
}

@keyframes rgbFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.input-container {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* When layout-3 is active, change alignment to center */
.input-container:has(.action-buttons-grid.layout-3) {
  align-items: center;
}

/* Action buttons grid layout */
.action-buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  /* Ensure the grid is vertically centered within the input container */
  align-self: center;
}

/* Dynamic layout for single button */
.action-buttons-grid.layout-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 32px;
  height: 32px;
}

/* Dynamic layout for two buttons */
.action-buttons-grid.layout-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  width: 60px;
  height: 30px;
  justify-items: center;
  align-items: center;
}

/* Reset summarize button positioning for 2-button layout */
.action-buttons-grid.layout-2 .summarize-btn {
  grid-column: auto;
  justify-self: center;
}

/* Dynamic layout for three or more buttons */
.action-buttons-grid.layout-3 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 60px;
  height: 60px;
}

/* Make buttons smaller for grid layout */
.action-buttons-grid .new-conversation-btn,
.action-buttons-grid .share-btn,
.action-buttons-grid .summarize-btn {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.action-buttons-grid .new-conversation-btn i,
.action-buttons-grid .share-btn i,
.action-buttons-grid .summarize-btn i {
  font-size: 10px;
}

/* Hover effects for grid buttons */
.action-buttons-grid .new-conversation-btn:hover,
.action-buttons-grid .share-btn:hover,
.action-buttons-grid .summarize-btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}

/* Position the third button to span both columns in the second row (only for 3-button layout) */
.action-buttons-grid.layout-3 .summarize-btn {
  grid-column: 1 / -1;
  justify-self: center;
  width: 28px; /* Keep same size as other buttons */
}

/* Bottom actions - no longer used */

.share-btn {
  width: 40px;
  height: 40px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.share-btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}

.share-btn i {
  font-size: 14px;
}

.new-conversation-btn {
  width: 40px;
  height: 40px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.new-conversation-btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}

.summarize-btn {
  width: 40px;
  height: 40px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.summarize-btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}

.summarize-btn i {
  font-size: 14px;
}

.input-wrapper {
  flex: 1;
  background: white;
  border-radius: 13px;
  border: 1px solid #ddd;
  overflow: hidden;
  transition: border-color 0.2s ease;
  position: relative;  
  border: 1px solid #687078;
}

.input-wrapper:focus-within {
  border-color: #007bff;
}

.input-wrapper textarea {
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 16px 12px 16px;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  background: transparent;
  max-height: 120px;
}

.input-wrapper textarea::placeholder {
  color: #999;
}

.char-counter {
  position: absolute;
  bottom: 4px;
  right: 12px;
  font-size: 11px;
  color: #999;
  display: none;
}

/* Send button - base styling with highest priority */
#send-button {
  background: #007bff !important;
  border: none !important;
  color: white !important;
}

#send-button:not(.stop-active) {
  background: #007bff !important;
  border: none !important;
  color: white !important;
}

#send-button:not(.stop-active):hover {
  background: #0056b3 !important;
}

/* Universal send button override - highest specificity */
button#send-button:not(.stop-active) {
  background: #007bff !important;
  border: none !important;
  color: white !important;
}

button#send-button:not(.stop-active):hover {
  background: #0056b3 !important;
}

/* Ensure send button is always blue by default */
button#send-button {
  background: #007bff !important;
  border: none !important;
  color: white !important;
}

/* ONLY allow red background when explicitly stop-active */
button#send-button.stop-active {
  background: #ff4757 !important;
  border: none !important;
  color: white !important;
}

.send-btn {
  background: #007bff !important;
  border: none !important;
  color: white !important;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Send button hover state (only when not in stop mode) */
.send-btn:hover:not(.stop-active) {
  background: #0056b3 !important;
  transform: scale(1.05);
}

/* Disabled state for send button */
.send-btn:disabled:not(.stop-active) {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ccc !important;
}

/* Stop icon styling - properly centered with pointer cursor */
.send-btn #stop-icon {
  color: white !important;
  font-size: 16px;
  cursor: pointer !important;
}

/* Send icon styling - properly centered */
.send-btn #send-icon {
  color: white !important;
  font-size: 14px;
  cursor: pointer !important;
  transform: translateX(-1px);
}

/* Loading icon styling - properly centered */
.send-btn #loading-icon {
  color: white !important;
  font-size: 14px;
  cursor: pointer !important;
  display: inline-block; /* ensure transform animations can apply */
}

/* Fallback spin animation in case Font Awesome styles aren't applied yet */
@keyframes fa-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#loading-icon.fa-spin,
#notification-spinner.fa-spin {
  animation: fa-spin 1s linear infinite;
}

/* Ensure stop icon is perfectly centered */
.send-btn.stop-active #stop-icon {
  color: white !important;
  cursor: pointer !important;
}

/* Stop button active state - ONLY when stop-active class is present */
.send-btn.stop-active {
  background: #ff4757 !important;
  border: none !important;
  color: white !important;
  cursor: pointer !important;
}

.send-btn.stop-active:hover {
  background: #ff3742 !important;
  transform: scale(1.05);
  cursor: pointer !important;
}

/* Messages */
.message {
  margin-bottom: 16px;
  padding: 0 0;
}

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

.message.user .text {
  background: #007bff;
  color: white;
  font-size: 14px;
  padding: 0.75rem 1rem; /* 12px 16px */
  border-radius: 1.125rem 1.125rem 0.25rem 1.125rem; /* 18px 18px 4px 18px */
  max-width: 70%;
  word-wrap: break-word;
}

.message.assistant {
  display: grid;
  grid-template-areas:
    "icon text"
    ". refs-rating";
  grid-template-columns: 2.75rem 1fr; /* 44px */
  grid-template-rows: auto auto;
  gap: 0.5rem 0.75rem; /* 8px 12px */
  justify-content: flex-start;
  position: relative;
}

.message.assistant::before {
  content: '';
  grid-area: icon;
  width: 2rem; /* 32px */
  height: 2rem; /* 32px */
  background-image: url('../../_static/images/hoopsy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 0;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

/* Error message styling - keep normal hoopsy avatar */
.message.assistant.error::before {
  /* Keep the normal hoopsy avatar - don't override it */
  content: '';
  background-image: url('../../_static/images/hoopsy.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.message.assistant.error .text {
  background: #ffe6e6;
  border: 0.125rem solid #ff4444; /* 2px */
  color: #000000;
  padding: 0.75rem 1rem 0.75rem 2.5rem; /* 12px 16px 12px 40px - Add left padding for cross mark */
  border-radius: 0.25rem 1.125rem 1.125rem 1.125rem; /* 4px 18px 18px 18px */
  box-shadow: 0 0.125rem 0.5rem rgba(255, 68, 68, 0.15); /* 0 2px 8px */
  grid-area: text;
  position: relative;
}

/* Cross mark inside the error message */
.message.assistant.error .text::before {
  content: "✕";
  position: absolute;
  left: 1rem; /* 16px - fixed positioning instead of percentage for consistency */
  top: 50%;
  transform: translateY(-50%);
  color: #ff4444;
  font-size: 0.875rem; /* 14px */
  font-weight: bold;
}

/* Remove hover effect on error messages */
.message.assistant.error .text:hover {
  border-left-color: #ff4444 !important;
  border-color: #ff4444 !important;
}

.message.assistant:hover::before {
  transform: scale(1.1);
}

.message.assistant .text {
  grid-area: text;
  background: transparent;
  color: #333;
  padding: 8px 0;
  border-radius: 0;
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.6;
  font-size: 14px;
  border: none;
  box-shadow: none;
  border-left: 3px solid transparent;
  padding-left: 12px;
  margin-left: -12px;
  transition: border-color 0.2s ease;
}
/* Turn off pre-wrap for normal block content inside assistant messages */
.message.assistant .text {
  white-space: normal !important; /* overrides earlier pre-wrap */
}

/* Keep pre-wrap where it makes sense */
.message.assistant .text pre,
.message.assistant .text code {
  white-space: pre-wrap; /* you already set this for code blocks */
}
.message.assistant .chat-ref {
  margin-top: 8px;
  cursor: pointer;
}

/* Row that holds all the reference chips (left) and the rating buttons (right).
   Chips flow in their own cell and wrap; the rating buttons stay pinned
   top-right, exactly where they were before. */
.message.assistant .refs-rating-container {
  grid-area: refs-rating;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-top: 8px;
}

/* All reference chips: flow inline and wrap to the next line as they run out of
   horizontal space, instead of stacking one per row. This cell takes the free
   width so the rating buttons sit to its right. */
.message.assistant .refs-chips {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Spacing is handled by the container gap, so drop the per-chip top margin. */
.message.assistant .refs-chips .chat-ref {
  margin-top: 0;
}

.message.assistant .text {
  background: transparent;
  color: #333;
  padding: 8px 0;
  border-radius: 0;
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.6;
  font-size: 14px;
  border: none;
  box-shadow: none;
  border-left: 3px solid transparent;
  padding-left: 12px;
  margin-left: -12px;
  transition: border-color 0.2s ease;
}

.message.assistant .text:hover {
  border-left-color: #007bff;
}

/* Rating buttons for assistant messages */
.message.assistant .rating-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Rating feedback text */
.rating-feedback {
  font-size: 12px;
  color: #666;
  margin-right: 8px;
  display: none;
}

.rating-buttons.rated .rating-feedback {
  display: block;
}

/* Hide unselected button when rated */
.rating-buttons.rated .rating-btn:not(.active) {
  display: none;
}

/* Hide rating buttons initially */
.message.assistant .rating-buttons.rating-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.rating-btn {
  background: none;
  border: 1px solid #e9ecef;
  color: #6c757d;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.rating-btn:hover {
  border-color: #007bff;
  color: #007bff;
  transform: scale(1.1);
}

.rating-btn.active.thumbs-up {
  background: #28a745;
  border-color: #28a745;
  color: white;
}

.rating-btn.active.thumbs-down {
  background: #dc3545;
  border-color: #dc3545;
  color: white;
}

.rating-btn i {
  font-size: 12px;
}

/* Rating buttons fade-in animation */
@keyframes fadeInRating {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message.assistant .rating-buttons {
  animation: fadeInRating 0.3s ease-out;
}

/* Under construction banner */
#under-construction-banner {
  background: #ff9800;
  color: white;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  border-radius: 12px 12px 0 0;
}

/* References */
.chat-ref {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #0066cc;
  text-decoration: none; /* no underline on container */
  font-size: 12px;
  transition: all 0.2s ease;
  width: fit-content;
  /* Add padding to give hover highlight some space */
  padding: 3px 6px;
  margin-left: -6px;
  border-radius: 4px;
}

/* Reference text label */
.chat-ref__label {
  text-decoration: none; /* default: no underline */
  transition: all 0.2s ease;
}

/* Favicon to the left */
.chat-ref::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../../_static/images/favicon.ico');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform 0.2s ease;
}

/* Replace trailing icon with a globe */
.chat-ref:after {
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  content: "\f0ac"; /* globe */
  color: #b3b3b3;
  font-size: 85%;
  margin-left: 6px;
  vertical-align: baseline;
  text-decoration: none; /* prevent underline on the globe */
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Enhanced hover effects for better usability */
.chat-ref:hover {
  background: rgba(0, 102, 204, 0.05); /* Very subtle background */
  transform: scale(1.02); /* Subtle scale up */
}

/* Hover: underline only the label (not the icons) */
.chat-ref:hover .chat-ref__label {
  text-decoration: underline;
  text-shadow: 0 0 0.5px rgba(0, 102, 204, 0.3); /* Subtle text shadow for better visibility */
}

/* Scale up icons on hover */
.chat-ref:hover::before {
  transform: scale(1.1); /* Scale up favicon */
}

.chat-ref:hover::after {
  transform: scale(1.15); /* Scale up globe icon */
  color: #0066cc; /* Change globe color to match link */
}

/* Keep transparent background on hover */
.chat-ref:hover {
  background-color: rgba(0, 102, 204, 0.05);
  border-color: transparent;
}

/* Code blocks - removed old styling, using enhanced version below */

/* Scrollbar styling */
.chat-body::-webkit-scrollbar {
  width: 6px;
}

.chat-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.chat-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Responsive design */
@media (max-width: 768px) {
  .chat-container {
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    transform: translateY(100%);
    opacity: 1;
    z-index: 9999; /* Higher z-index to cover everything */
    resize: none; /* Disable resize on mobile */
    border: none;
  }
  
  .chat-container .resize-handle {
    display: none; /* Hide all resize handles on mobile */
  }
  
  .chat-container.show {
    transform: translateY(0);
    opacity: 1;
  }
  
  .chat-button {
    bottom: 20px;
    right: 20px;
    width: 48px; /* Smaller on mobile */
    height: 48px;
    /* Remove any transform/transition effects for mobile */
    transition: background-color 0.2s ease;
  }
  
  .chat-button:hover {
    transform: none; /* Remove hover transform on mobile */
  }
  
  .chat-notification {
    bottom: 80px;
    right: 20px;
    left: 20px;
    width: auto;
  }
  
  /* Ensure header is not draggable on mobile */
  .chat-header {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 1.25rem 1rem; /* 20px 16px - Increased padding for better touch targets */
    border-radius: 0; /* Remove border radius for full screen */
    position: relative;
  }
  
  /* Pull-down-to-close visual feedback for mobile */
  .chat-container.touch-started {
    transition: none; /* Disable transitions during touch */
  }
  
  .chat-container.pulling-down {
    transition: opacity 0.1s ease, transform 0.1s ease;
  }
  
  /* Add a subtle pull indicator on mobile */
  .chat-header::after {
    content: '';
    position: absolute;
    top: 0.5rem; /* 8px */
    left: 50%;
    transform: translateX(-50%);
    width: 2rem; /* 32px */
    height: 0.25rem; /* 4px */
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.125rem; /* 2px */
    transition: all 0.3s ease;
  }
  
  .chat-container.pulling-down .chat-header::after {
    background: rgba(255, 255, 255, 0.7);
    width: 3rem; /* 48px */
  }
  
  /* Better spacing and touch targets for mobile header */
  .header-content {
    min-height: 28px;
  }
  
  .assistant-name {
    font-size: 18px; /* Slightly larger on mobile */
  }
  
  .beta-tag {
    font-size: 11px;
    padding: 2px 8px;
    height: 18px;
    margin-left: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.3);
  }
  
  /* Mobile close button styling */
  .close-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 10px;
  }
  
  .close-btn:hover {
    /* Disable hover effects on mobile */
    transform: none;
    background: rgba(255, 255, 255, 0.1);
  }
  
  .close-btn:active {
    /* Add active state for better feedback */
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
  }
  
  /* Hide share button on mobile or make it smaller */
  .share-btn {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
  
  /* Mobile grid layout for action buttons */
  .action-buttons-grid {
    width: 56px;
    height: 56px;
    gap: 3px;
  }

  /* Mobile dynamic layout for single button */
  .action-buttons-grid.layout-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 30px;
    height: 30px;
  }

  /* Mobile dynamic layout for two buttons */
  .action-buttons-grid.layout-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    width: 56px;
    height: 28px;
    justify-items: center;
    align-items: center;
  }

  /* Mobile dynamic layout for three or more buttons */
  .action-buttons-grid.layout-3 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 56px;
    height: 56px;
  }
  
  .action-buttons-grid .new-conversation-btn,
  .action-buttons-grid .share-btn,
  .action-buttons-grid .summarize-btn {
    width: 26px;
    height: 26px;
    font-size: 9px;
  }
  
  .action-buttons-grid .new-conversation-btn i,
  .action-buttons-grid .share-btn i,
  .action-buttons-grid .summarize-btn i {
    font-size: 9px;
  }
  
  /* Larger input area on mobile */
  .input-wrapper textarea {
    padding: 16px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Larger touch targets for header buttons */
  .action-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 16px;
  }
  
  .action-btn:hover {
    /* Disable hover effects on mobile */
    transform: none;
    background: rgba(255, 255, 255, 0.1);
  }
  
  .action-btn:active {
    /* Add active state for better feedback */
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
  }
  
  .send-btn {
    width: 40px;
    height: 40px;
  }
  
  /* Mobile styling for assistant messages with icons */
  .message.assistant {
    grid-template-columns: 36px 1fr;
    gap: 8px 10px;
    grid-template-areas:
      "icon text"
      ". refs-rating";
  }
  
  /* On mobile, stack refs and rating buttons vertically if needed */
  .message.assistant .refs-rating-container {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  
  .message.assistant .rating-buttons {
    align-self: flex-end;
  }
  
  .message.assistant::before {
    width: 28px;
    height: 28px;
    margin-top: 0;
  }
  
  /* Mobile rating buttons styling */
  .rating-buttons {
    margin-top: 12px;
    gap: 16px;
  }
  
  .rating-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
    min-width: 36px;
  }
  
  .rating-btn:hover {
    transform: none; /* Remove hover transform on mobile */
  }
}

/* Active states */
.send-btn.active {
  background: #0056b3;
}

/* Enhanced message styling */
.message .text p {
  margin: 0 0 12px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.message .text p:last-child {
  margin-bottom: 0;
}

/* Assistant message specific text styling */
.message.assistant .text {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.message.assistant .text * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Enhanced code block styling */
.message.assistant .text pre {
  position: relative;
  background: #282c34;
  border: none;
  border-radius: 12px;
  padding: 0;
  margin: 12px 0;
  overflow: hidden;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Code block copy button */
.code-copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transform: translateY(-5px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message.assistant .text pre:hover .code-copy-btn {
  opacity: 1;
  transform: translateY(0);
}

.code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.code-copy-btn:active {
  transform: scale(0.95);
}

.code-copy-btn i {
  font-size: 13px;
}

/* Copy notification */
.copy-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.copy-notification.show {
  opacity: 1;
  transform: translateX(0);
}

.copy-notification.hide {
  opacity: 0;
  transform: translateX(100px);
}

/* Inline code styling - improved wrapping */
.message.assistant .text code {
  background: #f1f3f4;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Inline code within paragraphs - better wrapping */
.message.assistant > div.text > p > code {
  background: #f1f3f4;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  display: inline;
}

/* List styling */
.message.assistant .text ul,
.message.assistant .text ol {
  padding-left: 20px;
  margin: 8px 0;
}

.message.assistant .text li {
  margin: 4px 0;
  line-height: 1.4;
}

/* Link styling */
.message.assistant .text a {
  color: #007bff;
  text-decoration: none;
}

.message.assistant .text a:hover {
  text-decoration: underline;
}

/* Table styling */
.message.assistant .text table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.message.assistant .text th,
.message.assistant .text td {
  border: 1px solid #e9ecef;
  padding: 8px;
  text-align: left;
}

.message.assistant .text th {
  background: #f8f9fa;
  font-weight: 600;
}

/* Define fade-out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

/* Tooltip text */
.tooltiptext {
  visibility: visible;
  background-color: white;
  color: #000;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;
  border: 2px solid rgb(54, 146, 199);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 5.5rem;
  right: 10px;
  z-index: 1;
  opacity: 0;
  /* Ensure the tooltip is initially visible */
  transition: opacity 3s ease-in-out;
  /* Smooth transition */
}

.tooltip-text::before {
  content: "";
  position: fixed;
  transform: rotate(45deg);
  background-color: #000;
  padding: 5px;
  z-index: 1;
}

.tooltiptext.fade-out {
  animation: fadeOut 3s forwards;
  /* Apply fade-out animation */
}

.tooltiptext.fade-in {
  animation: fadeIn 2s forwards;
  /* Fade in over 1 second */
}

#resizable {
  background-color: lightgray;
  position: relative;
  display: inline-block;
}

/* .chat-container {
  width: clamp(15rem, var(--chat-width), calc(100vw - var(--chat-pos-x) * 2));
  height: clamp(20rem, var(--chat-height), calc(100vh - var(--chat-btn-size) - var(--chat-pos-y) * 4));
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: calc(var(--chat-btn-size) + var(--chat-pos-y) * 2);
  right: var(--chat-pos-x);
  display: none;
  z-index: 999;
} */

.chat-header > p {
  float: left;
  margin: 0;
  font-size: 18px;
}

.chat-header {
  background: #006098;
  padding: 15px;
  color: white;
  text-align: center;
  cursor: grab;
  position: relative;
  border-image: linear-gradient(90.3deg, rgb(52, 20, 120) 0%, rgb(118, 56, 250) 33.33%, rgb(62, 141, 255) 66.67%, rgb(187, 248, 255) 100%) 1 / 1 / 0 stretch;
  border-bottom: 4px solid transparent;
}

.beta-button {
  font-size: 0.7rem;
  color: #222222;
  border-radius: 0.3rem;
  box-sizing: border-box;
  padding: 0.2rem;
  background-color: #ffcc33;
  -webkit-align-items: center;
  vertical-align: middle;
  line-height: 1;
  letter-spacing: .2px;
  height: 18px;
  max-height: 18px;
  align-items: center;
  display: inline-flex;
  margin-left: .1rem
}

.chat-header button {
  background: none;
  border: none;
  color: white;
}

.btn-relative {
  position: relative;
  line-height: 1.25rem;
  align-items: center;
  border-radius: 1000px;
  justify-content: center;
}

.icon-sm {
  height: 1rem;
  width: 1rem;
}

/* .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: .155rem;
} */

.chat-body {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.chat-footer {
  display: block;
  align-items: center;
  padding: 0.7rem;
  background-color: #f9f9f9;
  /* Light background color */
  border-top: 1px solid #ddd;
  /* Light border color */
}

.input-characters-message {
  padding-block-start: 0px;
  padding-block-end: 0px;
  margin: 0 0 0 0 !important;
  font-size: 14px !important;
  font-weight: 400;
}

#notice {
  padding-block-start: 4px;
  padding-block-end: 8px;
  margin: 0 0 0 0 !important;
  font-size: 12px !important;
  font-weight: 400;
  text-align: center;
  line-height: 14px;
}

.input-group {
  display: flex;
  flex-grow: 1;
  align-items: center;
  background-color: #fff;
  /* White background for input group */
  border: 1px solid #687078;
  /* Light border color for input group */
  border-radius: 8px;
}

.input-group:focus-within {
  border-color: rgb(0, 115, 187)
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #888;
  /* Grey color for icons */
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
  /* Add transition for smooth color change */
}

.input-group-text.active > i {
  color: #007bff;
  /* White icon color when active */
}

.input-group textarea::-webkit-scrollbar {
  display: none;
}

.input-group textarea {
  flex-grow: 1;
  border: none;
  background: none;
  color: #333;
  /* Dark text color */
  padding: 10px;
  border-radius: 25px;
  outline: none;
  box-shadow: none !important;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  resize: none;
}

.input-group-text i.fa-paper-plane {
  color: #888;
  /* Grey color for icons */
}

.input-group-text .loader {
  border: 2px solid #f3f3f3;
  /* Light grey */
  border-top: 2px solid #555;
  /* Dark grey */
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: spin 1s linear infinite;
}

.fas.fa-paper-plane:hover {
  color: #007bff;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.chat-body {
  position: relative;
  flex-grow: 1;
  overflow-y: auto;
  padding-bottom: 40px;
  padding-left:0;
  /* Add some padding to avoid overlap with the button */
}

#new-conversation-button {
  position: relative;
  display: none;
  text-align: center;
  color: #007bff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: underline;
}

#new-conversation-button:hover {
  color: #003670;
}

/* Style the code header */
.code-header {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.6);
  /* Semi-transparent background */
  border-bottom-left-radius: 0.375rem;
  border-top-right-radius: 1em;
}

/* Style the language label */
.language-label {
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  color: white;
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}

/* Style the copy button */
.copy-button {
  background-color: transparent;
  border: none;
  margin-left: 0.5em;
  cursor: pointer;
}

/* Style the copy image */
.copy-img {
  width: 20px;
  opacity: 0.7;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.copy-img:hover {
  opacity: 1;
}

.chat-button img {
  max-width: 110%;
}

.disclosureMessage a {
  color: #007bff;
  text-decoration: none;
}

/* Container for the iframe */
.iframe-container {
  margin-top: 1em;
  width: 100%;
  max-width: 100%;
  height: 400px;
  /* Adjust height as needed */
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* Styling for the iframe */
.chat-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.disclosureMessage a:hover {
  text-decoration: underline;
}

/* Code block container styling - clean and modern */
.message.assistant > div.text > pre,
.message.assistant > div.text > ul > li > pre,
.message.assistant > div.text > ol > li > pre {
  position: relative !important;
  white-space: pre-wrap !important;
  margin: 1em 0 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
  border: none !important;
  background: #282c34 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Code content styling */
.message.assistant > div.text > ol > li > pre > code,
.message.assistant > div.text > ul > li > pre > code,
.message.assistant > div.text > pre > code,
.message.assistant > div.text > * > pre > code {
  background: #282c34 !important;
  color: #abb2bf !important;
  padding: 1em !important;
  border-radius: 12px !important;
  border: none !important;
  white-space: pre-wrap !important;
  display: block !important;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Highlight.js styling override */
pre code.hljs {
  background: #282c34 !important;
  color: #abb2bf !important;
  padding: 1em !important;
  border-radius: 12px !important;
  border: none !important;
  white-space: pre-wrap !important;
  display: block !important;
  box-shadow: none !important;
}

.message.assistant > div.text > ul > li > * > li {
  padding: 5px !important;
  list-style: circle !important;
}

.message.assistant > div.text > ul > li > ul,
.message.assistant > div.text > ul > li > ol {
  padding-left: 10px !important;
  display: grid;
}

.message.assistant > div.text > ul > li {
  padding: 5px !important;
  list-style: disc !important;
  line-height: 22px;
}

.message.assistant > div.text > ul > li > p {
  margin: 0 0 0 !important;
}

p.noticeMessage {
  margin: 0 0 0 !important;
  border: 1px solid #16191f;
  border-radius: 5px;
  width: fit-content;
  padding: 5px;
}



.message.assistant > div.text > ul > li,
.message.assistant > div.text > ol > li {
  font-size: 14px;
  line-height: 22px;
}

/* Disabled state styling for SPINNY */
.summarize-btn:disabled,
.share-btn:disabled,
.new-conversation-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.question-item:not([onclick]) {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.message.assistant > div.text > ul > li > p,
.message.assistant > div.text > ol > li > p {
  font-size: 14px;
  margin: 0 0 5px;
}

.message.assistant > div.text > ul,
.message.assistant > div.text > ol {
  padding: 5px;
  display: grid;
}

.message.assistant > div.text > h3,
.message.assistant > div.text > h2 {
  margin-bottom: 0px;
}

.message.assistant > div.text > h2 {
  font-size: 20px;
}

.message.assistant th {
  border: 1px solid;
  padding: 5px;
  font-size: 0.8rem;
}

.message.assistant .text table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  hyphens: auto;
}

.message.assistant td {
  border: 1px solid;
  padding: 5px;
  font-size: 0.9rem;
}

/* Remove this conflicting header grid layout - use the flexbox layout defined above instead */
/* 
.chat-header {
  display: grid;
  grid-template-columns: max-content auto min-content;
  padding: 10px;
  color: white;
}
*/

.chat-header p {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  align-content: center;
  line-height: 1;
}

/* Share button styling */
#share-conversation-button {
  color: white;
  font-size: 0.875rem;
  cursor: pointer;
  justify-self: end;
  border: 1px solid hsla(0, 0%, 100%, .15);
  padding: .25rem .4rem;
}

#share-conversation-button:hover {
  background: #0972d3;
}

/* Chevron button styling */
.chat-header button:last-child {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  margin-left: 10px;
  /* Space between the buttons */
  justify-self: end;
}

/* Icon styling */
.chat-header button i {
  font-size: 20px;
}

.message.assistant > div.text > h1 {
  font-size: 18px;
}

.message.assistant > div.text > h3 {
  font-size: 16px;
}

.message.assistant > div.text > h4 {
  font-size: 14px;
  margin-top: 10px;
}

.message.user {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.message.user .text {
  background: #0972d3;
  color: white;
  order: 1;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.square {
  height: 40px;
  width: 40px;
}

.welcome {
  display: block;
}

.welcomeMessage {
  display: flex;
  gap: 12px;
  align-items: center;
}

.welcomeText {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #16191f;
}

.suggestionWrapper,
.disclosureMessage,
.noticeMessage {
  font-size: 14px;
  line-height: 22px;
  color: #16191f;
  font-weight: 400;
  margin: 0 0 5px
}

.questionWrapper {
  padding: 4px 0;
}

.questionWrapperButton {
  border: 1px solid;
  padding: 12px;
  background: #f1faff;
  text-align: left;
  border-radius: 8px;
  color: #0073bb;
  border-color: #99cbe4;
}

.questionWrapperButton:hover {
  cursor: pointer;
  background-color: #ffffff;
}

.questionWrapperButton > p {
  font-weight: 400;
  color: #16191f;
  font-size: 14px;
  line-height: 22px;
  margin: 0px !important;
}

.headerText {
  font-weight: 700;
  color: #545b64;
  font-size: 14px;
  line-height: 22px;
  margin: 0px !important;
}

.introductionMessage {
  font-weight: 400;
  color: #16191f;
  font-size: 14px;
  line-height: 22px;
  margin: 0px !important;
}

.first-time-convo {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

.message .text {
  padding: 10px 15px;
  border-radius: 10px;
  max-width: fit-content;
  word-wrap: break-word;
}

.message .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.message.user > div.text > p {
  word-break: break-word;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
  padding-bottom: 0rem;
  padding-top: 0rem;
}

.message > div.text > p {
  word-break: break-word;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.message.user .avatar {
  order: 2;
  margin-left: 10px;
  margin-right: 0;
}

i.fa-stop:hover {
  color: black;
}

div.loading-indicators {
  margin-left: 0.75rem;
}

div.text & > ul & > li & > strong {
  font-size: 14px
}

/* Rotation Animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Parallax Animation */
@keyframes parallax {
  0% {
    transform: translateY(6rem) rotate(0deg);
  }

  50% {
    transform: translateY(-1rem) rotate(180deg);
  }

  100% {
    transform: translateY(0em) rotate(360deg);
  }
}

/* Define AOS Animations */
[data-aos="rotate"] {
  animation: rotate 360s linear forwards;
}

[data-aos="parallax"] {
  @media screen and (min-width: 768px) {
    animation: parallax 1s linear forwards;
  }
}

/**
 * ==============================================
 * Dot Elastic
 * ==============================================
 */
.dot-elastic {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #80a2ff;
  color: #80a2ff;
  animation: dot-elastic 1s infinite linear;
}

.dot-elastic::before,
.dot-elastic::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-elastic::before {
  left: -15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #80a2ff;
  color: #80a2ff;
  animation: dot-elastic-before 1s infinite linear;
}

.dot-elastic::after {
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
   background-color: #80a2ff;
  color: #80a2ff;
  animation: dot-elastic-after 1s infinite linear;
}

@keyframes dot-elastic-before {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1, 1.5);
  }

  50% {
    transform: scale(1, 0.67);
  }

  75% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes dot-elastic {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1, 1.5);
  }

  75% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes dot-elastic-after {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1, 0.67);
  }

  75% {
    transform: scale(1, 1.5);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* Desktop optimizations for refs-rating layout */
@media (min-width: 769px) {
  .message.assistant .refs-rating-container {
    flex-direction: row;
    /* Pin the chips row and the rating buttons to the TOP of the row, so the
       rating buttons stay top-right and do NOT drift to the vertical center as
       the chips wrap onto more and more lines. */
    align-items: flex-start;
  }

  .message.assistant .rating-buttons {
    align-self: flex-start;
  }
}
/* Mobile chat window styles */
@media (orientation: landscape) and (min-width: 45rem) and (max-height: 45rem) {
  .chat-container {
    width: clamp(calc(100vw - var(--chat-btn-size) - var(--chat-pos-x) * 3), calc(100vw - var(--chat-btn-size) - var(--chat-pos-x) * 3), 40rem);
    height: clamp(calc(100vh - var(--chat-pos-y) * 2), calc(100vh - var(--chat-pos-y) * 2), 30rem);
    right: calc(var(--chat-btn-size) + var(--chat-pos-x) * 2);
    bottom: var(--chat-pos-y);
  }
}

@media (min-width: 45rem) {
  .chat-container {
    max-width: calc(100vw - var(--chat-btn-size) - var(--chat-pos-x) * 4);
    max-height: calc(100vh - var(--chat-pos-y) * 2);
    right: calc(var(--chat-btn-size) + var(--chat-pos-x) * 2);
    bottom: var(--chat-pos-y);
  }
}

/* FOURDY / Tetra4D orange theme overrides */
.fourdy-theme .chat-header {
  background: #f47b20;
  border-image: linear-gradient(90deg, #c0392b, #e74c3c, #f47b20, #fdb97e) 1 / 1 / 0 stretch;
}

.fourdy-theme .send-btn,
.fourdy-theme .chat-input .send-btn,
.fourdy-theme #send-button,
.fourdy-theme button#send-button,
.fourdy-theme button#send-button:not(.stop-active) {
  background: #f47b20 !important;
}

.fourdy-theme .send-btn:hover:not(.stop-active),
.fourdy-theme .chat-input .send-btn:hover:not(.stop-active),
.fourdy-theme button#send-button:not(.stop-active):hover {
  background: #d96a1b !important;
}

.fourdy-theme .send-btn.active,
.fourdy-theme .chat-input .send-btn.active {
  background: #d96a1b !important;
}

.fourdy-theme .question-item:hover {
  border-color: #f47b20;
}

.fourdy-theme .new-conversation-btn {
  background: #f47b20;
}

.fourdy-theme .new-conversation-btn:hover {
  background: #d96a1b;
}

.fourdy-theme .share-btn {
  background: #f47b20;
}

.fourdy-theme .share-btn:hover {
  background: #d96a1b;
}

.fourdy-theme .action-buttons-grid .new-conversation-btn:hover,
.fourdy-theme .action-buttons-grid .share-btn:hover {
  background: #d96a1b;
}

.fourdy-theme .question-icon {
  background: linear-gradient(135deg, #f47b20, #d96a1b);
}

.fourdy-theme .message.user .text {
  background: #f47b20;
}

.fourdy-theme .message.assistant::before,
.fourdy-theme .message.assistant.loading-message::before,
.fourdy-theme .message.assistant.error::before {
  background-image: url('../../_static/images/fourdy.png');
}