/* styles.css - Main application styles */

/* Global Variables */
:root {
  --primary: #35aeb1;
  --primary-light: #b5e8ea;
  --secondary: #9120ab;
  --text-primary: #212529;
  --text-secondary: #495057;
  --surface-1: #f8f9fa;
  --surface-2: #e9ecef;
  --border-light: #dee2e6;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --header-height: 82px;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Animation system variables */
  --anim-duration-xs: 0.15s;  /* Extra fast for micro-interactions */
  --anim-duration-sm: 0.25s;  /* Fast for small elements */
  --anim-duration-md: 0.3s;   /* Standard for most transitions */
  --anim-duration-lg: 0.4s;   /* Slow for larger elements */
  --anim-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard curve */
  --anim-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /* For elements entering the screen */
  --anim-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* For elements leaving the screen */
  --anim-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* For emphasis */
  --anim-easing-bounce: cubic-bezier(0.16, 1, 0.3, 1); /* For energetic motions */
}

/* Base Styles */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* Prevent scrolling at document level */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  color: var(--text-primary);
  line-height: 1.6;
  background-color: var(--surface-1);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

p {
  margin-bottom: var(--spacing-md);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  transition:
    background-color var(--anim-duration-xs) var(--anim-easing-standard),
    color var(--anim-duration-xs) var(--anim-easing-standard),
    transform var(--anim-duration-xs) var(--anim-easing-sharp);
}

button:active {
  transform: scale(0.97);
}

/* Layout */
.app {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 350px;
  grid-template-rows: var(--header-height) 1fr;
  height: 100vh;
  margin: 0;
  padding: 0;
  transition: grid-template-columns var(--anim-duration-md) var(--anim-easing-standard);
  overflow: hidden; /* Prevent redundant outer scrollbars */
  position: absolute; /* Position relative to viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.form-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  background-color: var(--surface-1);
  border: 1px solid var(--border-light);
}

@media (max-width: 1200px) {
  .app {
    grid-template-columns: 0 minmax(0, 1fr) 350px;
  }

  .app.sidebar-hidden {
    grid-template-columns: 0 minmax(0, 1fr) 350px;
  }
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }

  .app.sidebar-hidden {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }

  .app.reasoning-hidden {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }
}

.app.sidebar-hidden {
  grid-template-columns: 0 minmax(0, 1fr) 350px;
}

.app.reasoning-hidden {
  grid-template-columns: auto minmax(0, 1fr) 0;
}

.app.all-hidden {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}

.header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  height: var(--header-height);
  background-color: white;
  border-bottom: 1px solid var(--border-light);
  grid-column: 1 / -1;
  z-index: 100;
  width: 100%;
}

/* Prevent accidental text selection in header/menu only */
.header, .header * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-left: auto;
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
  padding: 0;
  border-right: 1px solid var(--border-light);
  background-color: white;
  overflow-y: auto;
  height: 100%;
  position: sticky;
  top: var(--header-height);
  transition:
    transform var(--anim-duration-md) var(--anim-easing-decelerate),
    opacity var(--anim-duration-sm) var(--anim-easing-standard),
    width var(--anim-duration-md) var(--anim-easing-standard);
  width: 300px;
  margin: 0;
  z-index: 90;
}

/* Fix for mobile sidebar peek mode */
.sidebar.peek {
  position: fixed;
  top: var(--header-height);
  left: 0;
  height: calc(100% - var(--header-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
  background-color: var(--surface-1);
  width: 80%;
  max-width: 300px;
  box-shadow: var(--shadow-lg);
  touch-action: auto;
  pointer-events: auto;
}

/* Fix for sidebar backdrop visibility */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity var(--anim-duration-sm) var(--anim-easing-standard);
  pointer-events: none;
}

.sidebar-backdrop.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Reset any left-over backdrop styles */
body:not(.mobile-view) .sidebar-backdrop {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure sidebar elements are clickable */
.sidebar.peek .search-bar,
.sidebar.peek .new-conversation,
.sidebar.peek .history-actions,
.sidebar.peek .search-history,
.sidebar.peek .search-history .history-item,
.sidebar.peek .search-history .history-item-text,
.sidebar.peek .search-history .history-delete-btn {
  pointer-events: auto !important;
  z-index: 1001 !important;
  position: relative;
}

.sidebar-right {
  grid-column: 3;
  grid-row: 2;
  padding: var(--spacing-lg);
  border-left: 1px solid var(--border-light);
  background-color: white;
  overflow-y: auto;
  height: calc(100vh - var(--header-height));
  position: sticky;
  top: var(--header-height);
  margin: 0;
  transition:
    transform var(--anim-duration-md) var(--anim-easing-decelerate),
    opacity var(--anim-duration-sm) var(--anim-easing-standard),
    width var(--anim-duration-md) var(--anim-easing-standard);
}

.main-content {
  grid-column: 2;
  grid-row: 2;
  padding: var(--spacing-lg);
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS */
  justify-self: center !important;  /* Force centering with !important */
  position: relative;
  left: 0;  /* Reset any left positioning */
  transform: translateX(0);  /* Reset any transforms */
  display: flex;
  flex-direction: column;
  transition:
    margin var(--anim-duration-md) var(--anim-easing-standard),
    width var(--anim-duration-md) var(--anim-easing-standard),
    padding var(--anim-duration-md) var(--anim-easing-standard);
}

/* Block pointer events on main content when sidebar is in peek mode */
.sidebar.peek ~ .main-content {
  pointer-events: none;
}

.search-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.logo-img {
  height: 32px;
  margin-right: var(--spacing-xs);
}

/* Make logo container clickable */
.logo-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: background-color var(--anim-duration-xs) var(--anim-easing-standard);
}

.logo-container:hover {
  background-color: var(--surface-2);
}

/* New conversation badge for logo */
.new-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  background-color: var(--primary);
  color: white;
  font-size: 8px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity var(--anim-duration-md) var(--anim-easing-standard);
  pointer-events: none;
}

.new-badge.visible {
  opacity: 1;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--surface-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  margin-bottom: var(--spacing-md);
}

.search-bar input {
  flex-grow: 1;
  border: none;
  background: transparent;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

.search-history {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 var(--spacing-lg);
  border-radius: var(--radius-md);
  cursor: pointer !important;
  position: relative;
  transition: background-color 0.2s ease;
  user-select: none; /* Prevent text selection to improve click experience */
  width: 100%;
}

.history-item:hover {
  background-color: var(--surface-2);
}

.history-item:active {
  background-color: var(--primary-light);
  transform: scale(0.98);
}

.history-item.active {
  background-color: var(--primary-light);
}

/* Ensure the text within history items is properly clickable */
.history-item-text {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 0;
  pointer-events: auto !important; /* Force pointer events */
  cursor: pointer !important; /* Ensure cursor shows as clickable */
  display: block !important; /* Make it block to ensure it fills the space */
  width: calc(100% - 30px) !important; /* Account for delete button width */
  position: relative;
  z-index: 5 !important; /* Ensure text is above other elements */
}

/* Ensure the entire history item is clickable including text */
.sidebar .search-history .history-item,
.sidebar .search-history .history-item-text {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.history-delete-btn {
  opacity: 0;
  transition: opacity var(--anim-duration-sm) var(--anim-easing-standard);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--surface-2);
  margin-left: var(--spacing-xs);
  cursor: pointer;
}

.history-delete-btn:hover {
  background-color: var(--border-light);
}

.history-item:hover .history-delete-btn {
  opacity: 1;
}

.history-item:hover {
  background-color: var(--surface-2);
}

.history-item.active {
  background-color: var(--primary-light);
}

/* Make the new conversation button hidden by default */
.new-conversation-mobile {
  display: none; /* Hidden by default, will be shown only on mobile */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin-right: 8px;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

/* Only show the new conversation button in mobile view */
@media (max-width: 920px) {
  .new-conversation-mobile {
    display: flex; /* Show in mobile mode */
  }

  .search-header h3 {
    visibility: hidden;
  }
}

.history-actions {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
}

.new-conversation {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--primary);
  border-radius: var(--radius-md);
  font-weight: 500;
  margin-bottom: var(--spacing-md);
}

.conversation {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  flex-grow: 1;
  transition: padding-bottom var(--anim-duration-md) var(--anim-easing-standard);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS */
  will-change: scroll-position; /* Optimize for scrolling */
  padding-bottom: 140px;
}

.message {
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  background-color: white;
  animation: fadeInUp var(--anim-duration-md) var(--anim-easing-decelerate);
  position: relative;
}

.message-user {
  background-color: var(--surface-2);
  align-self: flex-end;
  box-shadow: var(--shadow-sm);
  max-width: 85%;
  min-width: 200px;;
}

.message-assistant {
  background-color: var(--background-color);
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

.message-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
  font-weight: 500;
  padding-right: var(--spacing-lg);
}

.message-copy-btn {
  position: absolute !important;
  top: 16px;
  right: 16px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  z-index: 5;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.message-copy-btn:hover {
  opacity: 1;
}

.message-assistant .message-copy-btn {
  opacity: 0;
}

.message-assistant:hover .message-copy-btn {
  opacity: 1.0;
}

/* Message editing styles */
.message-edit-btn {
  position: absolute !important;
  top: 16px;
  right: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background-color: transparent;
  z-index: 10; /* Ensure it's above copy button */
}

/* Show edit button on hover */
.message-user:hover .message-edit-btn {
  opacity: 1;
}

/* Message regenerate button styles */
.message-regenerate-btn {
  position: absolute !important;
  top: 16px;
  right: 52px;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 50%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background-color: transparent;
  z-index: 10; /* Ensure it's above copy button */
}


/* Show regenerate button on hover */
.message-user:hover .message-regenerate-btn {
  opacity: 1;
}

.message-edit-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  min-width: 300px;
  margin-top: var(--spacing-xs);
}

.message-edit-textarea {
  width: 100%;
  min-height: 100px;
  min-width: 650px;
  padding: var(--spacing-md);
  font-family: inherit;
  font-size: inherit;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  resize: vertical;
  outline: none;
  transition: border-color var(--anim-duration-xs) var(--anim-easing-standard);
}

.message-edit-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(53, 174, 177, 0.2);
}

.message-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

/* Improved visual feedback for edit mode */
.message.editing {
  background-color: var(--surface-1);
  border: 1px solid var(--primary-light);
}

/* Ensure iframe content doesn't inherit main page styles */
iframe {
  isolation: isolate;
}

.code-block {
  margin-bottom: 20px;
  overflow: hidden;
}

.code-block .code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--surface-2);
  padding: 8px 12px;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  border-bottom: none;
}

.code-block .code-content {
  border: 1px solid var(--border-light);
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  background-color: white;
}

.code-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.code-content pre {
  margin: 0 !important;
  padding: var(--spacing-md) !important;
  border-radius: 0 !important;
  background: white !important;
}

.code-actions .btn {
  font-family: var(--font-family) !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  margin-left: 4px !important;
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  transition:
    background-color var(--anim-duration-xs) var(--anim-easing-standard),
    color var(--anim-duration-xs) var(--anim-easing-standard),
    transform var(--anim-duration-xs) var(--anim-easing-sharp);
}

.code-actions .btn:hover {
  background-color: var(--border-light) !important;
}

.code-block .code-actions .btn {
  /* Reset button styles to prevent inheritance issues */
  font: inherit;
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border: none !important;
  margin: 0 2px !important;
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
  transition:
    background-color var(--anim-duration-xs) var(--anim-easing-standard),
    color var(--anim-duration-xs) var(--anim-easing-standard),
    transform var(--anim-duration-xs) var(--anim-easing-sharp);
}


/* .icon-copy:hover,
.icon-download:hover {
  background-color: var(--primary-light);
  color: var(--primary);
} */

.icon-copy:active,
.icon-download:active {
  transform: scale(0.95);
}

.code-actions .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
}

.code-tabs {
  display: flex;
  background-color: var(--surface-2);
  border: 1px solid var(--border-light);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  overflow: hidden;
  align-items: center;
}

.code-tab {
  padding: 8px 16px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: center;
}

.code-tab.active {
  background-color: white;
  border-bottom: 2px solid var(--primary);
}

/* Ensure proper spacing and alignment for code actions in tabs */
.code-tabs .code-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding-right: var(--spacing-sm);
}

.code-preview {
  border: 1px solid var(--border-light);
  border-top: none;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  overflow: hidden;
  background-color: white;
  min-height: 100px;
  display: none;
}

.code-preview iframe {
  width: 100%;
  height: 400px;
  border: none;
  display: block;
}

.code-block.preview-mode .code-content {
  display: none;
}

.code-block.preview-mode .code-preview {
  display: block;
}

.code-block.code-mode .code-preview {
  display: none;
}

.code-block.code-mode .code-content {
  display: block;
}

.reasoning-block {
  margin: var(--spacing-md) 0;
}

.reasoning-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--spacing-xs) 0;
  user-select: none;
  color: var(--text-secondary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reasoning-header svg {
  transition: transform var(--anim-duration-sm) var(--anim-easing-standard);
}

.reasoning-content {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height var(--anim-duration-lg) var(--anim-easing-decelerate),
    padding var(--anim-duration-xs) var(--anim-easing-standard);
  background-color: var(--primary-light);
  border-radius: var(--radius-sm);
}

.reasoning-content.visible {
  max-height: fit-content;
  padding: 10px;
}

/* Enhanced styling for streaming reasoning */
.reasoning-container {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--primary-light);
  border-radius: var(--radius-sm);
  animation: fadeIn var(--anim-duration-sm) var(--anim-easing-standard);
  overflow-x: auto;
}

.reasoning-header {
  display: flex;
  align-items: center;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 0;
  font-size: 14px;
}

.input-container {
  position: sticky;
  bottom: 0;
  background-color: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 100%;
  z-index: 10;
}

.input-container.center-screen {
  --input-container-height: 200px;
  position: absolute;
  bottom: calc(50% - var(--input-container-height) / 2);
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* Fixed-bottom mode for stable position after first message */
/* Removed fixed-bottom mode to preserve width and alignment within main content */
/* Precise fixed-bottom mode aligned to main content column */
.input-container.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: var(--input-fixed-left, 0px);
  width: var(--input-fixed-width, 100%);
  right: auto;
  z-index: 20;
}

.input-main {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Inline input row with textarea and mobile new-conversation button */
.input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: #ffffff; /* Match input background in light mode */
}

/* Make textarea use container background and reserve space for button */
.input-row .input-textarea {
  width: 100%;
  background: transparent;
  color: var(--text-primary);
  padding-right: 56px; /* Space for the new conversation button */
}

/* Position the mobile new conversation button inside the input */
.input-row .new-conversation-mobile {
  right: var(--spacing-md);
  top: 50%;
  margin: 0; /* Override default margin */
}

/* Neutralize adjusted-position when used inside input row */
.input-row .new-conversation-mobile.adjusted-position {
  bottom: auto;
  top: 50%;
}

.input-textarea {
  width: 100%;
  min-height: 70px;
  max-height: 230px;
  border: none;
  padding: var(--spacing-md);
  font-family: inherit;
  font-size: inherit;
  resize: none;
  outline: none;
}

/* Input actions layout with prompt profile */
.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--surface-1);
}

/* New send area container for better alignment */
.send-area {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Prompt profile dropdown styling */
#prompt-profile-dropdown {
  position: relative;
}

#prompt-profile-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  white-space: nowrap;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 14px;
  height: 32px;
  border-radius: var(--radius-md);
}

#prompt-profile-button .icon {
  width: 14px;
  height: 14px;
  transition: transform var(--anim-duration-sm) var(--anim-easing-standard);
}

/* Rotate icon to indicate upward opening */
#prompt-profile-button:hover .icon {
  transform: rotate(180deg);
}

/* Position dropdown menu to open upwards */
.dropdown-menu-up {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 5px;
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  min-width: 180px;
  z-index: 120;
  overflow: hidden;
  display: none;
}

.dropdown-menu-up.visible {
  display: block;
  animation: fadeIn var(--anim-duration-sm) var(--anim-easing-standard);
  position: fixed; /* Changed from absolute to fixed to escape parent context */
  z-index: 9999; /* Increased z-index to ensure it's above all other elements */
  min-height: fit-content;
  /* Removed the transform that was forcing position */
}

/* Style dropdown items */
.dropdown-menu-up .dropdown-item {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition:
    background-color var(--anim-duration-xs) var(--anim-easing-standard),
    color var(--anim-duration-xs) var(--anim-easing-standard);
}

.dropdown-menu-up .dropdown-item:hover {
  background-color: var(--primary-light);
  color: var(--primary);
}

/* Responsive adjustments for mobile */
@media (max-width: 920px) {
  #prompt-profile-button {
    padding: 4px 8px;
    font-size: 12px;
    height: 28px;
  }

  /* Keep the dropdown options visible on small screens */
  .dropdown-menu-up {
    min-width: 140px;
    right: 0;
  }
}

/* Make history list scrollable in mobile view */
.sidebar .search-history {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

/* Ensure the sidebar's flex-column properly distributes space */
.sidebar .flex-column {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Allow search history to grow and take available space */
.sidebar .search-history {
  flex-grow: 1;
  padding: 5px;
}

/* Add this to handle wider mobile devices as well */
@media (max-width: 768px) {
  .sidebar.peek .search-history {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.input-buttons {
  display: flex;
  gap: var(--spacing-xs);
}

.btn {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition:
    background-color var(--anim-duration-xs) var(--anim-easing-standard),
    color var(--anim-duration-xs) var(--anim-easing-standard),
    transform var(--anim-duration-xs) var(--anim-easing-sharp);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

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

.btn-primary:hover {
  background-color: #055456;
}

.btn-primary:disabled {
  background-color: #35aeb1;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: var(--surface-2);
  color: var(--text-primary);
}

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

/* Destructive/confirm actions */
.btn-danger {
  background-color: #dc2626; /* red-600 */
  color: #fff;
}
.btn-danger:hover {
  background-color: #b91c1c; /* red-700 */
}

.btn-icon {
  padding: var(--spacing-sm);
  border-radius: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-preview {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--surface-1);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-right: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  position: relative;
  max-width: 250px;
  transition:
    background-color var(--anim-duration-xs) var(--anim-easing-standard),
    color var(--anim-duration-xs) var(--anim-easing-standard);
}

.file-preview button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--text-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.file-preview:hover {
  background-color: var(--surface-2);
}

/* Make file preview icons larger */
.file-preview .icon {
  width: 24px;
  height: 24px;
  min-width: 24px; /* Prevent shrinking */
  margin-right: var(--spacing-xs);
}

/* Icon buttons for copy and download actions */
.icon-copy,
.icon-download {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--anim-duration-xs) var(--anim-easing-standard),
    color var(--anim-duration-xs) var(--anim-easing-standard);
}

.message-regenerate-btn:hover,
.message-edit-btn:hover,
.icon-copy:hover,
.icon-download:hover {
  color: var(--primary);
}

.icon-copy:active,
.icon-download:active {
  transform: scale(0.95);
}

/* Animation for copy confirmation */
.copy-animation {
  animation: pulse var(--anim-duration-md) var(--anim-easing-standard);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* Container for action icons */
.action-icons {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: auto;
}

.attachments-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-sm);
  width: 100%;
  order: -1; /* Ensure attachments always appear before other content */
}

.attachments-container:empty {
  display: none;
  margin: 0;
}

.image-preview {
  max-width: 300px;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  margin-right: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

/* File Preview Modal Styles */
.file-preview-content {
  font-family: monospace;
  max-height: 550px;
  overflow: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background-color: var(--surface-1);
}

.file-preview-header {
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-light);
  padding: 8px 12px;
}

.file-preview-content pre {
  margin: 0;
  padding: var(--spacing-md);
}

.file-preview-content code {
  font-family: monospace;
  white-space: pre-wrap;
}

/* Add styles for extracted content container */
.extracted-content-container {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--primary-light);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  font-size: 14px;
}

.extracted-content-preview {
  white-space: pre-wrap;
  font-family: monospace;
  max-height: 120px; /* Reduced from 150px to be more compact */
  overflow-y: auto;
  padding: var(--spacing-xs);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xs);
  margin-top: var(--spacing-xs);
  font-size: 12px;
  line-height: 1.4;
}

.extractable-file {
  border-left: 3px solid var(--primary);
  background-color: rgba(53, 174, 177, 0.1);
}

.extracted-content-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-sm);
}

.btn-sm {
  padding: 2px 8px;
  font-size: 12px;
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

/* Style for truncated content indicator */
.truncated-indicator {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: italic;
  margin-top: 4px;
}

/* Clipboard Preview styles */
.clipboard-preview {
  border-left: 3px solid var(--primary);
}

.clipboard-preview:hover {
  background-color: rgba(53, 174, 177, 0.2);
}

.clipboard-preview .icon {
  color: var(--primary);
}

/* File Preview Modal Styles */
.file-preview-content {
  font-family: monospace;
  max-height: 550px;
  overflow: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background-color: var(--surface-1);
}

.file-preview-content pre {
  margin: 0;
  padding: var(--spacing-md);
}

.file-preview-content code {
  font-family: monospace;
  white-space: pre-wrap;
}

/* Code Snippets Panel */
#code-preview {
  position: fixed;
  right: 0;
  top: 0;
  width: 0;
  height: 100vh;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: width var(--anim-duration-lg) var(--anim-easing-standard);
  overflow: hidden;
  z-index: 1000;
}

#code-preview.visible {
  width: 500px;
}

.code-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.code-preview-content {
  padding: var(--spacing-md);
  overflow-y: auto;
  height: calc(100vh - 60px);
}

.code-snippet {
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.code-snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-secondary);
}

.code-playground {
  margin-top: var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.code-playground-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-light);
}

.code-playground-editor {
  height: 300px;
  overflow: auto;
}

.code-playground-editor textarea {
  width: 100%;
  height: 100%;
  border: none;
  padding: var(--spacing-md);
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  outline: none;
}

.code-playground-actions {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--surface-1);
}

.code-execution-result {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--surface-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  max-height: 200px;
  overflow: auto;
  font-family: monospace;
  white-space: pre-wrap;
  font-size: 14px;
}

/* LaTeX Styling */
.latex-container {
  overflow-x: auto;
  padding: var(--spacing-sm) 0;
}

/* Icons */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Make reasoning step icons larger and more prominent */
#reasoning-steps .icon {
  width: 20px;
  height: 20px;
  min-width: 20px; /* Prevent shrinking */
}

/* Improve readability of reasoning text */
#reasoning-steps p {
  line-height: 1.5;
  margin-bottom: 4px;
}

#reasoning-steps .p-sm {
  padding: 12px;  /* Slightly more padding for breathing room */
}

#reasoning-steps strong {
  display: block;  /* Make titles stand out more */
  margin-bottom: 4px;
}

/* Make thinking header icon larger */
.reasoning-header .icon {
  width: 18px;
  height: 18px;
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--anim-duration-md) var(--anim-easing-standard);
}

.modal.visible {
  opacity: 1;
  visibility: visible;
}

/* Optional blurred overlay variant for better readability */
.modal.blur {
  background-color: rgba(17, 24, 39, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-content {
  background-color: white;
  border-radius: var(--radius-md);
  max-width: 90%;
  max-height: 90%;
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(-20px);
  opacity: 0;
  overflow-y: auto;
  transition:
    transform var(--anim-duration-md) var(--anim-easing-decelerate),
    opacity var(--anim-duration-sm) var(--anim-easing-standard);
}

.modal.visible .modal-content {
  transform: translateY(0);
  opacity: 1;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.modal-body {
  margin-bottom: var(--spacing-lg);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
}

/* Read-only banner for shared view */
.readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 0 12px 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 13px;
}
.readonly-banner .icon {
  width: 16px;
  height: 16px;
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: inherit;
}
/* Loading indicator */
.loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 10px; /* Fixed height to prevent layout shift */
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  display: inline-block;
  animation: loadingDot 1.8s ease-in-out infinite; /* Simpler timing function and longer duration */
  opacity: 0.6;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loadingDot {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

@keyframes loadingDot {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Dropdown menu */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 150px;
  z-index: 100;
  display: none;
}

.dropdown-menu.visible {
  display: block;
}

.dropdown-item {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition:
    background-color var(--anim-duration-xs) var(--anim-easing-standard),
    color var(--anim-duration-xs) var(--anim-easing-standard);
  border-radius: var(--radius-md);
}

.dropdown-item:hover {
  background-color: var(--surface-1);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--border-light);
  margin: var(--spacing-xs) 0;
}

/* Toast notifications */
.toast {
  position: fixed;
  bottom: var(--spacing-lg); /* Changed from 'top' to 'bottom' */
  right: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1100;
  max-width: 300px;
  transform: translateY(20px);
  opacity: 0;
  transition:
    transform var(--anim-duration-md) var(--anim-easing-decelerate),
    opacity var(--anim-duration-sm) var(--anim-easing-standard);
  display: none; /* Completely remove from document flow when not visible */
  pointer-events: none; /* Prevent capturing interactions when invisible */
  visibility: hidden; /* Extra insurance against interaction */
}

.toast.visible {
  transform: translateY(0);
  opacity: 1;
  display: block; /* Make visible in document flow */
  pointer-events: auto; /* Allow interactions with toast when visible */
  visibility: visible; /* Ensure visibility */
}

.toast.success {
  border-left: 2px solid #2b8a3e;
}

.toast.error {
  border-left: 2px solid #c92a2a;
}

.toast.info {
  border-left: 2px solid #1864ab;
}

.toast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.toast-body {
  font-size: 14px;
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: all var(--anim-duration-md) var(--anim-easing-standard);
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: all var(--anim-duration-md) var(--anim-easing-standard);
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary); /* A nice green color for the toggle */
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* Add styles for the profile toggle */
.prompt-toggle-container {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

/* Add a specific class for the toggle label text to control visibility */
.prompt-toggle-label {
  font-size: 14px;
  margin-right: 8px;
}

/* Hide toggle label on mobile screens */
@media (max-width: 920px) {
  .prompt-toggle-label {
    display: none;
  }
}

/* Make button look disabled when profiles are turned off */
#prompt-profile-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Make sure prompt profiles dropdown is properly positioned with toggle */
#prompt-profile-dropdown {
  display: flex;
  align-items: center;
}

/* Send button icon styling */
#send-message {
  width: 45px;  /* Fixed width for a circular button */
  height: 38px; /* Fixed height for a circular button */
  border-radius: 25%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#send-message .icon {
  width: 18px;
  height: 18px;
}

/* Style for disabled send button */
#send-message:disabled .icon {
  opacity: 0.5;
}

/* Add transition for smoother hover and disabled states */
#send-message .icon {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#send-message:hover:not(:disabled) .icon {
  transform: scale(1.1);
}

/* Drag and drop styles */
.drop-zone::after {
  content: '';
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(53, 174, 177, 0.1);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-md);
  z-index: 10;
  pointer-events: none;
}

.drop-zone.drag-over::after {
  display: block;
}

.drop-zone.drag-over .input-main {
  border-color: var(--primary);
}

.file-drop-message {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-weight: 500;
  color: var(--primary);
  z-index: 20;
  pointer-events: none;
  text-align: center;
}

.drop-zone.drag-over .file-drop-message {
  display: block;
}

.menu-toggle svg {
  transition: transform var(--anim-duration-md) var(--anim-easing-standard);
}

/* Default icon visibility: show open icon when sidebar is hidden */
.menu-toggle .icon-open { display: inline; }
.menu-toggle .icon-close { display: none; }

/* Desktop: when sidebar is visible, show close icon */
.app:not(.sidebar-hidden) .menu-toggle .icon-open { display: none; }
.app:not(.sidebar-hidden) .menu-toggle .icon-close { display: inline; width: 40px; height: 40px; stroke-width: 0; margin-top: 9px; color: var(--primary); }

/* Desktop: when sidebar is hidden, show open icon */
.app.sidebar-hidden .menu-toggle .icon-open { display: inline; width: 40px; height: 40px; stroke-width: 0; margin-top: 9px; color: var(--primary); }
.app.sidebar-hidden .menu-toggle .icon-close { display: none; }

/* Add styles for menu-toggle button */
.menu-toggle {
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--anim-duration-xs) var(--anim-easing-standard),
    color var(--anim-duration-xs) var(--anim-easing-standard);
}

.menu-toggle:hover {
  background-color: var(--surface-2);
}

.menu-toggle:active {
  background-color: var(--border-light);
}

.menu-toggle path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Make sure the sidebar is completely hidden when not visible */
.sidebar:not(.visible) {
  transform: translateX(-100%);
  opacity: 0;
  width: 0;
  padding: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none; /* Prevent interaction with hidden sidebar */
}

.sidebar.visible {
  transform: translateX(0);
  opacity: 1;
}

.sidebar-right.hidden {
  transform: translateX(100%);
  opacity: 0;
}

/* Add smooth transition for mobile sidebar peek mode */
.sidebar.peek {
  transition:
    transform var(--anim-duration-md) var(--anim-easing-decelerate),
    opacity var(--anim-duration-sm) var(--anim-easing-standard);
}

/* Thinking indicator */
.thinking-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  margin-left: var(--spacing-md);
}

.streaming-content {
  position: relative;
}

.streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background-color: var(--text-primary);
  animation: cursorBlink var(--anim-duration-md) var(--anim-easing-standard) infinite;
  margin-left: 2px;
  vertical-align: middle;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.loading-spinner {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-style: italic;
  padding: var(--spacing-xs) 0;
}

.loading-spinner:before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spinner var(--anim-duration-lg) var(--anim-easing-standard) infinite;
}

/* Searching message styles */
.searching-message {
  background-color: white;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}

.searching-content {
  padding: var(--spacing-sm) 0;
}

.success-message, .error-message {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
}

.success-message {
  color: var(--primary);
}

.error-message {
  color: #c92a2a;
}

.searching-message.error {
  border-left: 4px solid #c92a2a;
}

.searching-message.error .message-header {
  color: #c92a2a;
}

/* Utility classes */
.hidden {
  display: none;
}

.separator {
  height: 1px;
  background-color: var(--border-light);
  margin: var(--spacing-md) 0;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.flex-wrap {
  flex-wrap: wrap;
}

.small-text {
  font-size: 14px;
}

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

.font-mono {
  font-family: monospace;
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.overflow-auto {
  overflow: auto;
}

.position-relative {
  position: relative;
  margin-right: var(--spacing-sm);
}

/* Special centering class */
.centered-content {
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  left: 0 !important;
  position: relative !important;
}

/* Code and sandbox styles */
.code-block {
  position: relative;
  margin-bottom: 20px;
}

.sandbox-container {
  margin-top: 10px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: height var(--anim-duration-md) var(--anim-easing-standard);
}

.sandbox-container iframe {
  display: block;
  width: 100%;
  box-shadow: var(--shadow-sm);
}

.sandbox-container iframe {
  opacity: 0;
  animation: fadeIn var(--anim-duration-md) var(--anim-easing-standard) forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.sandbox-container:not(.hidden) {
  margin-top: var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.example-usage {
  padding: 8px;
  background-color: var(--surface-1);
  border: 1px solid var(--border-light);
  border-top: none;
  font-size: 14px;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  overflow-x: auto;
}

.example-usage pre {
  margin: 4px 0;
}

.example-usage code {
  font-family: monospace;
  white-space: pre-wrap;
}

/* Make sure the sidebar is completely hidden when not visible */
.sidebar:not(.visible) {
  transform: translateX(-100%);
  opacity: 0;
  width: 0;
  padding: 0;
  overflow: hidden;
  margin: 0;
}

/* Ensure right sidebar is properly hidden when not visible */
.sidebar-right.hidden {
  display: none;
  width: 0;
  padding: 0;
  margin: 0;
}

/* Add styles for extracted content container */
.extracted-content-container {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--primary-light);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  font-size: 14px;
}

.extracted-content-preview {
  white-space: pre-wrap;
  font-family: monospace;
  max-height: 120px; /* Reduced from 150px to be more compact */
  overflow-y: auto;
  padding: var(--spacing-xs);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xs);
  margin-top: var(--spacing-xs);
  font-size: 12px;
  line-height: 1.4;
}

/* Custom scrollbar styling (light mode) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

::-webkit-scrollbar-corner {
  background: #f1f1f1;
}

/* Make nested scrollbars more subtle */
.code-content pre::-webkit-scrollbar,
.code-preview-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.code-content pre::-webkit-scrollbar-thumb,
.code-preview-container::-webkit-scrollbar-thumb {
  background: #ddd;
}

/* Mobile Responsive Styles */
@media (max-width: 920px) {
  .app {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    height: 100vh;
    overflow: hidden;
    position: absolute; /* Ensure the app container stays fixed to viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Hide file and image upload buttons in mobile view */
  #add-file, #add-image {
    display: none;
  }

  .header {
    padding: var(--spacing-sm) var(--spacing-md);
    height: auto;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    grid-row: 1;
    grid-column: 1 / -1; /* Ensure header spans full width */
    width: 100%;
  }

  .main-content {
    padding: var(--spacing-sm);
    padding-bottom: 100px; /* Add padding to prevent content from being hidden under input */
    max-width: 100%;
    width: 100%;
    overflow-y: auto; /* Allow scrolling in the main content */
    overflow-x: hidden;
    grid-row: 2;
    grid-column: 1 / -1; /* Ensure main content spans full width */
    position: relative;
    margin: 0; /* Remove auto margins that might be forcing centering */
    left: 0;
    transform: none;
    justify-self: stretch; /* Stretch to fill available width */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    height: auto; /* Allow content to determine height */
  }

  .message-edit-textarea {
    width: 100%;
    min-width: 100%;
  }

  /* Hide sidebar and reasoning panel by default on mobile */
  .sidebar, .sidebar-right {
    display: none !important;
  }

  /* Enhanced sidebar peek animation for mobile */
  .sidebar {
    /* Initial state when not visible */
    transform: translateX(-100%);
    opacity: 0;
    position: fixed;
    width: 0 !important;
    height: 100vh;
    overflow-x: hidden;
    z-index: 200;
    box-shadow: none;
    transition:
      transform var(--anim-duration-md) var(--anim-easing-decelerate),
      opacity var(--anim-duration-sm) var(--anim-easing-standard),
      box-shadow var(--anim-duration-md) var(--anim-easing-standard),
      width 0.1s linear 0.1s; /* Delayed width change */
  }

  /* Add peek state for the sidebar */
  .sidebar.peek {
    display: block !important;
    width: 270px !important; /* Slightly wider for better UX */
    transform: translateX(0);
    opacity: 1;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.3), 2px 0 8px rgba(0, 0, 0, 0.3);
    transition:
      transform var(--anim-duration-md) var(--anim-easing-decelerate),
      opacity var(--anim-duration-sm) var(--anim-easing-standard),
      box-shadow var(--anim-duration-md) var(--anim-easing-standard),
      width 0s linear; /* Immediate width change when opening */
  }

  /* Add animation for sidebar content when peeking */
  .sidebar.peek .search-bar,
  .sidebar.peek .new-conversation,
  .sidebar.peek .history-actions,
  .sidebar.peek .search-history > * {
    animation: slideInRight var(--anim-duration-md) var(--anim-easing-decelerate) forwards;
    animation-delay: calc(0.05s * var(--item-index, 0));
    opacity: 0;
    transform: translateX(-20px);
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Mobile menu toggle animation when sidebar is open */
  .menu-toggle svg {
    transition: transform var(--anim-duration-xs) var(--anim-easing-sharp);
  }

  /* Mobile: switch icons when sidebar peeks open */
  .app:has(.sidebar.peek) .menu-toggle .icon-open { display: none; }
  .app:has(.sidebar.peek) .menu-toggle .icon-close { display: inline; width: 40px; height: 40px; stroke-width: 0; margin-top: 9px; color: var(--primary); }
  .app:has(.sidebar:not(.peek)) .menu-toggle .icon-open { display: inline; width: 40px; height: 40px; stroke-width: 0; margin-top: 9px; color: var(--primary); }
  .app:has(.sidebar:not(.peek)) .menu-toggle .icon-close { display: none; }

  .new-conversation-mobile:active {
    transform: scale(0.95);
  }

  .new-conversation-mobile .icon {
    width: 24px;
    height: 24px;
  }

  /* Fix input container for mobile */
  .input-container {
    padding: var(--spacing-sm);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    margin-top: 0;
    border-radius: 0;
    grid-row: 3;
    grid-column: 1 / -1; /* Ensure input container spans full width */
    width: 100%;
  }

  /* Mobile specific buttons and elements */
  .mobile-only {
    display: flex !important;
  }

  .desktop-only {
    display: none !important;
  }

  /* Adjust message styling for mobile */
  .message {
    padding: var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
  }

  .message-user, .message-assistant {
    max-width: 100%;
  }

  /* Ensure conversation container has proper scroll behavior */
  .conversation {
    padding-bottom: 80px; /* Extra padding to ensure visibility of last message */
    margin-bottom: 0;
    height: auto; /* Allow height to be determined by content */
    min-height: calc(100vh - var(--header-height) - 100px); /* Minimum height for scrollability */
  }

  /* Fix weird flex layout issues in mobile header */
  .search-header {
    flex: 1;
    overflow: hidden;
  }

  .search-header h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ensure the input is properly sized and positioned */
  .input-textarea {
    min-height: 70px !important;
    max-height: 150px; /* Smaller max height on mobile */
  }

  /* Reposition toast for mobile to upper right corner */
  .toast {
    bottom: auto;
    top: calc(var(--header-height) + var(--spacing-md));
    right: var(--spacing-md);
    max-width: 80%;
    transform: translateY(-20px);
  }

  .toast.visible {
    transform: translateY(0);
  }
}

/* Mobile input minimization styles */
@media (max-width: 920px) {
  .input-container {
    transition:
      transform var(--anim-duration-sm) var(--anim-easing-standard),
      box-shadow var(--anim-duration-sm) var(--anim-easing-standard),
      padding var(--anim-duration-sm) var(--anim-easing-standard);
    padding: 12px;
    /* Ensure input container is always clickable */
    z-index: 90;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    touch-action: manipulation; /* Improve touch behavior */
  }

  .input-main {
    /* Ensure input-main is properly clickable */
    position: relative;
    z-index: 2;
    cursor: text;
    touch-action: manipulation; /* Improve touch behavior */
  }

  .input-textarea {
    transition: all var(--anim-duration-sm) var(--anim-easing-standard);
    min-height: 70px;
    /* Ensure the textarea itself is always reachable for focus events */
    z-index: 3;
    touch-action: manipulation; /* Improve touch behavior */
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove tap highlight on iOS */
  }

  /* Increase tap target size */
  .input-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 20px; /* Additional tappable area above the input */
    z-index: 1;
  }

  .input-container.minimized-mobile {
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
    padding: 6px 12px;
  }

  .input-container.minimized-mobile .input-main {
    min-height: 40px;
    max-height: 40px;
    cursor: text;
  }

  .input-container.minimized-mobile .input-textarea {
    min-height: 40px !important;
    max-height: 40px !important;
    height: 70px !important;
    transition: all var(--anim-duration-sm) var(--anim-easing-standard);
    overflow: hidden;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .input-textarea {
    transition: all var(--anim-duration-sm) var(--anim-easing-standard);
    min-height: 70px;
    /* Ensure the textarea itself is always reachable for focus events */
    z-index: 3;
  }

  .input-container.minimized-mobile .input-actions {
    opacity: 0.5;
    height: 40px;
    overflow: hidden;
  }

  .new-conversation-mobile {
    transition: all var(--anim-duration-sm) var(--anim-easing-standard);
    z-index: 91;
  }

  .new-conversation-mobile.adjusted-position {
    bottom: 0px;
  }
}

/* Mobile view improvements */
body.mobile-view .input-container.minimized-mobile {
  padding: 6px 12px;
}

body.mobile-view .input-container.minimized-mobile .input-main {
  min-height: 40px;
  max-height: 40px;
}

body.mobile-view .input-container.minimized-mobile .input-textarea {
  min-height: 40px !important;
  max-height: 40px !important;
  overflow: hidden;
}

body.mobile-view .conversation {
  /* Ensure proper padding to prevent overlap with minimized input */
  padding-bottom: 70px;
}

/* Enhanced List Styling */
.message ul, .message ol {
  margin: 8px 0;
  padding-left: 30px;
}

.message ul li, .message ol li {
  margin-bottom: 6px;
}

.message ul {
  list-style-type: disc;
}

.message ol {
  list-style-type: decimal;
}

/* Nested lists */
.message ul ul, .message ol ul {
  list-style-type: circle;
}

.message ul ol, .message ol ol {
  list-style-type: lower-alpha;
}

/* Improved code block formatting */
.code-content pre {
  white-space: pre !important; /* Preserve whitespace */
  overflow-x: auto !important;
  tab-size: 2 !important;
}

/* Improved paragraph spacing */
.message p {
  margin-bottom: 16px;
}

/* Fix spacing issues in lists and code blocks */
.message p:last-child {
  margin-bottom: 0;
}

.message-content {
  white-space: normal;
  word-break: break-word;
}

.message-content br {
  display: block;
  content: "";
}

/* Add markdown table styles */
.table-container {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  /* Prevent tables from being wrapped in paragraphs */
  display: block;
  width: 100%;
}

.markdown-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-light);
  font-size: 14px;
  table-layout: auto;
  margin: 0; /* Remove default margins that might cause spacing issues */
}

.markdown-table th,
.markdown-table td {
  border: 1px solid var(--border-light);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 80px; /* Ensure minimum width for better readability */
}

/* Ensure empty cells have proper height */
.markdown-table td:empty {
  height: 19px; /* Approximately one line height */
}

.markdown-table th {
  background-color: var(--surface-2);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 1px 0 var(--border-light);
}

.markdown-table tr:nth-child(even) {
  background-color: var(--surface-1);
}

.markdown-table tr:hover {
  background-color: rgba(53, 174, 177, 0.05);
}

/* Style for formatted text within tables */
.markdown-table em {
  font-style: italic;
}

.markdown-table strong {
  font-weight: 600;
}

.markdown-table code {
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 13px;
}

.markdown-table a {
  color: var(--primary);
  text-decoration: none;
}

.markdown-table a:hover {
  text-decoration: underline;
}

/* Make sure tables don't break in mobile view */
@media (max-width: 920px) {
  .table-container {
    max-width: 100%;
  }

  .markdown-table {
    min-width: 480px; /* Ensure table has minimum width for scrolling on small screens */
    font-size: 13px; /* Slightly smaller font for mobile */
  }

  .markdown-table th,
  .markdown-table td {
    padding: 6px 8px; /* Smaller padding for mobile */
  }
}

/* Styling for the toggle brain button */
#toggle-brain {
  transition: background-color var(--anim-duration-xs) var(--anim-easing-standard),
              color var(--anim-duration-xs) var(--anim-easing-standard);
}

#toggle-brain.active {
  background-color: var(--primary-light);
}

#toggle-brain:hover {
  background-color: var(--surface-2);
}

#toggle-brain.active:hover {
  background-color: var(--primary-light);
  opacity: 0.9;
}

/* Styling for the toggle web button */
#toggle-web-search {
  transition: background-color var(--anim-duration-xs) var(--anim-easing-standard),
              color var(--anim-duration-xs) var(--anim-easing-standard);
}

#toggle-web-search.active {
  background-color: var(--primary-light);
}

#toggle-web-search:hover {
  background-color: var(--surface-2);
}

#toggle-web-search.active:hover {
  background-color: var(--primary-light);
  opacity: 0.9;
}

/* Regenerate button styling */
.regenerate-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  font-weight: 500;
  padding: var(--spacing-sm) var(--spacing-md);
}

.regenerate-btn .icon {
  width: 16px;
  height: 16px;
}

.regenerate-btn:hover {
  background-color: #2a8c8e;
}

.regenerate-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(53, 174, 177, 0.3);
}

/* Tabs styling */
.content-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--spacing-md);
  user-select: none;

  /* Add sticky positioning */
  position: sticky;
  top: -25px;
  background-color: var(--surface-1);
  z-index: 50;
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  margin-top: 0;
  /* Make sure the sticky tabs stay within the main-content */
  width: 100%;
  /* Ensure proper animation when becoming sticky */
  transition: box-shadow var(--anim-duration-sm) var(--anim-easing-standard);
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  transition: color var(--anim-duration-sm) var(--anim-easing-standard);
}

/* Add disabled tab styles */
.tab-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.tab-button:hover {
  color: var(--primary);
}

.tab-button.active {
  color: var(--primary);
  font-weight: 600;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
  animation: slideIn var(--anim-duration-sm) var(--anim-easing-decelerate);
}

@keyframes slideIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.source-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background-color: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: bold;
  margin-left: 4px;
  transition: transform var(--anim-duration-sm) var(--anim-easing-bounce);
}

.source-count.updated {
  animation: pulseCount 0.5s var(--anim-easing-bounce);
}

@keyframes pulseCount {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn var(--anim-duration-sm) var(--anim-easing-standard);
  padding-top: var(--spacing-xs); /* Add a little padding at the top */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile responsiveness for sticky tabs */
@media (max-width: 920px) {
  .content-tabs {
    /* Ensure tabs stay below the header on mobile */
    top: -10px;
  }
}

/* Sources styling */
.sources-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.sources-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.source-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--anim-duration-sm) var(--anim-easing-standard);
  animation: slideUp var(--anim-duration-md) var(--anim-easing-decelerate);
}

.source-item:hover {
  box-shadow: var(--shadow-md);
}

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

.source-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-light);
}

.source-title-container {
  overflow: hidden;
  flex-grow: 1;
}

.source-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.source-url {
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.source-preview {
  padding: var(--spacing-md);
  background-color: white;
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.source-preview p {
  margin-bottom: var(--spacing-xs);
}

.source-preview-text {
  line-height: 1.5;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .source-preview-text {
    font-size: 13px;
    line-height: 1.4;
    -webkit-line-clamp: 2; /* Show fewer lines on mobile */
  }

  .source-preview .source-content {
    max-width: calc(100% - 90px); /* Ensure there's space for the thumbnail */
  }
}

.source-content {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sources-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--text-secondary);
  text-align: center;
}

.sources-placeholder svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.sources-placeholder h3 {
  margin-bottom: var(--spacing-sm);
}

.sources-placeholder p {
  max-width: 400px;
  margin-bottom: var(--spacing-md);
}

.btn-open-source {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: background-color var(--anim-duration-xs) var(--anim-easing-standard);
}

.btn-open-source:hover {
  background-color: rgba(53, 174, 177, 0.1);
}

.btn-open-source .icon {
  width: 14px;
  height: 14px;
}

/* Fix for centered content */
.centered-content {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height));
  position: relative;
}

/* Ensure conversation fills available space */
#conversation {
  flex-grow: 1;
}

/* Source thumbnail styling */
.source-preview {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  max-height: none;
  background-color: white;
  align-items: flex-start;
}

.source-thumbnail-container {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  transition: transform var(--anim-duration-xs) var(--anim-easing-standard),
              box-shadow var(--anim-duration-xs) var(--anim-easing-standard);
}

.source-thumbnail-container:hover {
  box-shadow: var(--shadow-md);
}

.source-favicon {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
}

.source-favicon img {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.source-initial-fallback {
  display: none; /* Hidden by default, shown when favicon fails to load */
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: inherit; /* Inherit the background color from parent */
}

.domain-initial {
  font-size: 32px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.source-thumbnail-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4), transparent);
  color: white;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-thumbnail-url {
  font-size: 10px;
  opacity: 0.9;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-content {
  flex-grow: 1;
  overflow: hidden;
}

.source-content p {
  margin-bottom: var(--spacing-xs);
}

/* Make source items more interactive */
.source-item {
  transition: transform var(--anim-duration-xs) var(--anim-easing-standard),
              box-shadow var(--anim-duration-xs) var(--anim-easing-standard);
}

.source-item:hover {
  border-color: #055456 !important;
  border-width: 1px;
}

/* Media queries for responsive layouts */
@media (max-width: 600px) {
  /* Override the column layout to keep side-by-side arrangement */
  .source-preview {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-sm); /* Smaller gap on mobile */
  }

  .source-thumbnail-container {
    width: 80px; /* Smaller thumbnail on mobile */
    height: 60px;
    margin-bottom: 0;
  }

  /* Make favicon smaller on mobile */
  .source-favicon img {
    max-width: 32px;
    max-height: 32px;
  }

  /* Make the domain initial smaller for the smaller container */
  .domain-initial {
    font-size: 24px;
  }

  /* Make the source content area more compact */
  .source-content {
    font-size: 13px;
    line-height: 1.4;
  }

  /* Specifically target search result messages to ensure they maintain side-by-side layout */
  .source-result-message .source-preview {
    flex-direction: row;
    padding: var(--spacing-sm); /* Less padding to save space */
  }

  .source-result-message .source-thumbnail-container {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
  }

  /* Increase text contrast in source content for better mobile readability */
  .source-result-message .source-content p.text-secondary {
    color: #6c757d; /* Slightly darker than the default secondary for better contrast */
  }
}

/* Media queries for responsive layouts */
@media (max-width: 600px) {
  .source-preview {
    display: flex;
  }

  .source-thumbnail-container {
    width: 30%;
    height: 120px;
    margin-bottom: var(--spacing-sm);
  }
}

/* Search Result Message Styling */
.source-result-message {
  margin: 0 0 16px 0;
  width: 100%;
  padding: 0 !important; /* Remove default message padding */
  box-shadow: none !important; /* Remove default message shadow */
  background-color: transparent !important;
}

.source-result-message .source-item {
  box-shadow: var(--shadow-sm);
  background-color: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  animation: slideUp var(--anim-duration-md) var(--anim-easing-decelerate);
}

.source-result-message .source-preview {
  padding: var(--spacing-md);
  background-color: white;
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.source-result-message .source-thumbnail-container {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  transition: transform var(--anim-duration-xs) var(--anim-easing-standard),
              box-shadow var(--anim-duration-xs) var(--anim-easing-standard);
}

.source-result-message .btn-open-source {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: background-color var(--anim-duration-xs) var(--anim-easing-standard);
  background-color: var(--surface-1);
  border: none;
  cursor: pointer;
}

.source-result-message .btn-open-source:hover {
  background-color: var(--primary-light);
}

/* Authentication Modal Styles */
.auth-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(5px);
}

.auth-modal.visible {
  display: flex;
  opacity: 1;
}

.auth-modal-content {
  background-color: var(--background);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 450px;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  border: 1px solid var(--border);
}

.auth-modal.visible .auth-modal-content {
  transform: translateY(0);
}

.auth-modal-header {
  background-color: var(--primary);
  color: var(--primary);
  padding: 24px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.auth-logo {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.auth-badge {
  position: absolute;
  top: -5px;
  right: -18px;
  background-color: #35aeb1;
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.auth-modal-header h2 {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

.auth-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--surface-1);
}

.auth-message {
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 24px;
  font-size: 16px;
}

.auth-buttons {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  width: 100%;
}

.auth-buttons button {
  flex: 1;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-buttons button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.auth-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background-color: var(--surface-1);
}

.auth-footer-text {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  margin: 0;
}