/*
 * BenAssistant UI Styles
 * 
 * This stylesheet contains all global styles for the chat UI.
 * 
 * Styling Principles:
 * 1. Component-specific styles are grouped together
 * 2. Inline styles are avoided where possible
 * 3. Dynamic positioning uses :style binding only when necessary
 * 4. Consistent naming conventions are used
 * 5. Mobile-friendly design with appropriate breakpoints
 * 6. Dark mode support throughout
 * 7. Consistent spacing and component styling
 */

/* Scrollbars */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 20px;
}
.dark .custom-scrollbar {
    scrollbar-color: rgba(51, 51, 51, 0.5) transparent;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(51, 51, 51, 0.5);
}

/* Glass effects */
.frosty-glass {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .frosty-glass {
    background-color: rgba(18, 18, 18, 0.3);
    border: 1px solid rgba(45, 45, 45, 0.2);
}

/* Mobile sidebar glass effect - only on mobile */
@media (max-width: 767px) {
    .mobile-sidebar-glass {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background-color: rgba(255, 255, 255, 0.85);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .dark .mobile-sidebar-glass {
        background-color: rgba(18, 18, 18, 0.25);
        border-right: 1px solid rgba(45, 45, 45, 0.2);
    }
}

/* Custom width utility */
.w-9\/10 {
    width: 90%;
}

/* Sidebar container - acts as wrapper on mobile, transparent on desktop */
@media (min-width: 768px) {
    .sidebar-container {
        /* On desktop, make this behave like its children are direct children of parent */
        display: contents;
    }
}

/* Global styles */
html, body {
    @apply h-full m-0 p-0 overflow-hidden font-sans text-[15px];
}

/* Utility classes */
.icon-button {
    @apply p-3 rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-darkmode-700;
}

/* Dropdown base structure - minimal and non-intrusive */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Thread menu dropdown positioning */
.thread-menu-dropdown {
    position: fixed;
    z-index: 50; 
}

/* Smart dropdown positioning */
.smart-dropdown {
    position: fixed;
    z-index: 50;
    min-width: max-content;
}

/* New touch-friendly class for sidebar header buttons */
.sidebar-header-button {
    @apply p-3 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-darkmode-700 flex items-center justify-center;
    min-width: 42px;
    min-height: 42px;
    touch-action: manipulation;
}

/* Fix for dark mode icons - apply a light filter to make black icons visible 
   Exclude moon and sun icons which have their own colors 
   Also exclude content images (modals, attachments, etc.) */
.dark img:not([src*="sun"]):not([src*="moon"]):not(.modal-content-image):not(.attachment-image):not(.file-placeholder-icon) {
    filter: brightness(0) invert(1);
}

/* Prevent the above filter from applying to gallery images, modal images, and attachments */
.dark #gallery-view .grid img:not(.file-placeholder-icon),
.dark .modal-content-image,
.dark .modal-content-video,
.dark .image-attachment img,
.dark .video-attachment video,
.dark .attachment-item img {
    filter: none !important;
}

/* Ensure theme toggle icons are properly colored in dark mode - no filters */
.dark img[src*="sun"] {
    filter: none; /* Keep the sun icon yellow in dark mode */
}
.dark img[src*="moon"] {
    filter: brightness(0) invert(1); /* Make moon icon visible in dark mode */
}

/* File type placeholder icons - centered, smaller, respects light/dark mode */
.file-placeholder-icon {
    object-fit: contain !important;
    padding: 20% !important;
    background-color: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.4);
}

.dark .file-placeholder-icon {
    background-color: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.4);
    filter: brightness(0) invert(1) !important;
}

/* Recent files thumbnails - smaller icons */
.attachment-image.file-placeholder-icon {
    padding: 15% !important;
}

/* Ensure message input has consistent height regardless of content */
textarea.resize-none {
    resize: none !important;
    min-height: 44px !important;
    height: 44px !important;
}

/* Reset the height only when the textarea is focused or has content */
textarea.resize-none:focus, 
textarea.resize-none[style*="height"] {
    height: auto !important;
    min-height: 44px !important;
}

/* Better button styling for chat input buttons */
.attach-menu button, 
button[class*="absolute right-2"] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px; /* Match textarea height */
    padding: 0 0.75rem;
    z-index: 20; /* Ensure buttons stay above other elements */
}

/* Position only the send button absolutely */
button[class*="absolute right-2"] {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 10;
    height: auto;
    min-height: 32px;
}

/* Attach button hover - no transform to prevent floating */

/* Special handling for send button hover */
button[class*="absolute right-2"]:hover {
    transform: translateY(-50%) scale(1.05);
}

/* Attachment menu styling - simplified since menu is now positioned outside container */
.attach-menu button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px; /* Match textarea height */
    padding: 0 0.75rem;
}

/* Attachment menu transition */
.fade-enter-active {
    transition: opacity 0.15s ease;
}

.fade-leave-active {
    transition: opacity 0.15s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* Animation keyframes */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

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

/* Message bubble animations */

.message-move {
    transition: transform 0.3s ease-out;
}

/* Remove jerky animation for message item transitions */
.message-enter-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.message-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    z-index: 0;
    /* Prevent horizontal expansion during transition */
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    overflow: hidden;
}

.message-enter-from,
.message-leave-to {
    opacity: 0;
    transform: translateY(10px);
}

/* Ensure message container maintains width during transitions */
.message-move {
    transition: transform 0.3s ease-out;
    /* Lock width to prevent expansion - more specific constraints */
    box-sizing: border-box;
}

/* Loading dots animation */
@keyframes pulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Shimmer animation for image generation placeholder */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

/* Fade in animation for loaded images */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.6s ease-out;
}

.loading-dots .animate-pulse {
    animation: pulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Mobile thread list animations */
.slide-up-enter-active {
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-up-leave-active {
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tool Request Component Styles */
.tool-request {
    @apply my-4 rounded-xl border border-gray-200 dark:border-darkmode-700 overflow-hidden;
    @apply bg-white dark:bg-darkmode-800 shadow-sm;
    animation: slideIn 0.3s ease-out;
}

.tool-request-header {
    @apply flex items-center px-4 py-3 bg-gray-50 dark:bg-darkmode-700 border-b border-gray-200 dark:border-darkmode-600;
}

.tool-request-icon {
    @apply w-5 h-5 mr-3 text-primary-600 dark:text-primary-400;
}

.tool-request-title {
    @apply text-sm font-medium text-gray-700 dark:text-gray-200;
}

.tool-request-body {
    @apply p-4;
}

.tool-request-status {
    @apply mt-3 text-sm text-gray-500 dark:text-gray-400;
}

/* Tool-specific styles */
.tool-request.file-search {
    @apply border-blue-200 dark:border-blue-900;
}

.tool-request.code-edit {
    @apply border-green-200 dark:border-green-900;
}

.tool-request.terminal {
    @apply border-purple-200 dark:border-purple-900;
}

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

/* Tool Progress Component Styles */
.tool-progress {
    @apply h-1.5 bg-gray-100 dark:bg-darkmode-700 rounded-full overflow-hidden mt-4;
}

.tool-progress-bar {
    @apply h-full bg-primary-500 dark:bg-primary-600;
    transition: width 0.3s ease-out;
}

/* Add styles for markdown content */
.markdown-content {
    font-size: 0.9rem;
    line-height: 1.625;
}

/* Message bubble specific styles */
.dark .bg-darkmode-700 .markdown-content {
    color: rgb(229, 231, 235);
}

.bg-primary-500 .markdown-content,
.bg-usermessage-dark .markdown-content {
    color: rgb(243, 244, 246);
}

/* Basic elements */
.markdown-content h1, 
.markdown-content h2, 
.markdown-content h3 {
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.markdown-content h1 {
    font-size: 1.5rem;
}

.markdown-content h2 {
    font-size: 1.25rem;
}

.markdown-content h3 {
    font-size: 1.125rem;
}

/* Dark mode headings */
.dark .markdown-content h1,
.dark .markdown-content h2,
.dark .markdown-content h3 {
    color: rgb(255, 255, 255);
}

/* Lists with better dark mode contrast */
.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1rem;
    margin-left: 1.25rem;
    list-style-position: outside;
}

.markdown-content ul {
    list-style-type: disc;
}

.markdown-content ol {
    list-style-type: decimal;
}

.dark .markdown-content ul,
.dark .markdown-content ol {
    color: rgb(229, 231, 235);
}

.markdown-content ul ul,
.markdown-content ol ul {
    margin-top: 0.5rem;
    margin-left: 1.25rem;
    list-style-type: circle;
}

.markdown-content ul ol,
.markdown-content ol ol {
    margin-top: 0.5rem;
    margin-left: 1.25rem;
}

.markdown-content li {
    margin-bottom: 0.25rem;
}

.markdown-content li > p {
    margin-bottom: 0.5rem;
}

/* Code blocks with better contrast */
.markdown-content code:not(pre code) {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background-color: rgb(45, 45, 45);
    font-size: 0.875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: rgb(229, 231, 235);
}

.dark .markdown-content code:not(pre code) {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgb(255, 255, 255);
}

.markdown-content pre {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    background-color: rgb(30, 30, 30);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.markdown-content pre code {
    display: block;
    padding: 1rem;
    font-size: 0.875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: rgb(255, 255, 255);
    background: transparent;
}

/* Override highlight.js theme */
.hljs {
    background-color: rgb(30, 30, 30) !important;
    color: rgb(255, 255, 255) !important;
}

/* Blockquotes with consistent sizing */
.markdown-content blockquote {
    padding: 0.75rem 1rem;
    border-left-width: 4px;
    border-left-color: rgba(209, 213, 219, 0.5);
    margin: 1rem 0;
    font-style: italic;
    border-radius: 0 0.5rem 0.5rem 0;
}

.dark .markdown-content blockquote {
    border-left-color: rgb(96, 165, 250);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Links with better visibility */
.markdown-content a {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.dark .markdown-content a {
    color: rgb(96, 165, 250);
    text-decoration-color: rgba(96, 165, 250, 0.5);
}

.dark .markdown-content a:hover {
    color: rgb(147, 197, 253);
    text-decoration-color: rgba(147, 197, 253, 0.7);
}

/* Tables with better dark mode contrast */
.dark .markdown-content table {
    border-color: rgba(156, 163, 175, 0.2);
}

.dark .markdown-content th {
    background-color: rgba(55, 65, 81, 0.8);
    color: rgb(255, 255, 255);
    border-color: rgba(156, 163, 175, 0.2);
}

.dark .markdown-content td {
    color: rgb(229, 231, 235);
    border-color: rgba(156, 163, 175, 0.2);
    background-color: rgba(55, 65, 81, 0.3);
}

/* Bold and italic text in dark mode */
.dark .markdown-content strong {
    color: rgb(255, 255, 255);
}

.dark .markdown-content em {
    color: rgb(229, 231, 235);
}

/* Tables */
.markdown-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid rgba(209, 213, 219, 0.5);
    padding: 0.5rem 1rem;
}

.dark .markdown-content th,
.dark .markdown-content td {
    border-color: rgba(75, 85, 99, 0.4);
}

.markdown-content th {
    background-color: rgba(243, 244, 246, 0.5);
    font-weight: 600;
}

.dark .markdown-content th {
    background-color: rgba(55, 65, 81, 0.5);
}

/* Code highlighting in dark mode */
.dark .hljs {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Code action buttons container */
.code-actions {
    position: absolute;
    bottom: 0.375rem;
    right: 0.375rem;
    display: flex;
    gap: 0.25rem;
    z-index: 10;
}

/* Code preview and copy buttons */
.code-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 0;
}

.code-action-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 1);
}

.code-action-button svg {
    width: 0.875rem;
    height: 0.875rem;
}

.code-action-button.copied {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    color: rgb(34, 197, 94);
}

/* Sidebar header auto-hide for vertically-constrained screens */
@media (max-height: 600px) {
    .sidebar-header-hidden {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        height: 0;
        min-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
}

/* Message Item Component Styles */
.message-content {
  overflow-wrap: break-word;
}

.message-user-text {
  white-space: pre-wrap;
}

.loading-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
}

.loading-dot-1 {
  animation-delay: 0.2s;
}

.loading-dot-2 {
  animation-delay: 0.4s;
}

/* Chat Area Component Styles */
.chat-container {
  max-width: 92%;
  /* Prevent horizontal expansion during transitions */
  overflow-x: hidden;
  width: 100%;
}

/* Fix text input container to not clip focus borders */
.text-input-container {
  /* Remove overflow hidden to prevent focus border clipping */
  margin: 2px; /* Add margin to provide space for focus border */
  min-height: 44px;
  max-height: 200px;
  position: relative; /* Ensure proper positioning context for absolute children */
}

@media (min-width: 864px) {
  .chat-container {
    max-width: 90%;
  }
}

/* Ghost textarea for sizing */
.ghost-textarea {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
  border: 1px solid transparent;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 44px;
  max-height: 200px;
  overflow: hidden;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Message textarea style */
.message-textarea {
  width: 100%;
  padding: 0.75rem;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
  border-width: 1px;
  border-radius: 24px;
  resize: none;
  overflow: hidden;
  display: block;
  height: 44px;
  margin: 0;
  line-height: 1.5;
  transition: height 0.2s ease-out, border-radius 0.2s ease-out;
  /* Fix vertical centering for single-line text */
  box-sizing: border-box;
  /* Ensure proper line height for vertical centering */
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  /* Ensure focus ring isn't clipped */
  position: relative;
  z-index: 1;
}

/* Focus ring with proper spacing */
.message-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(99 102 241); /* primary-500 */
  border-color: transparent;
}

/* Reset padding for multiline */
.message-textarea--multiline {
  border-radius: 18px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Override forbidden inline styles */
.markdown-content a, 
.markdown-content button, 
.markdown-content input {
  /* Override any potential inline styles that might get through */
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  background: inherit !important;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .chat-container {
    max-width: 100%;
    padding: 0 0.5rem;
  }
  
  .message-textarea {
    font-size: 16px; /* Prevent iOS zoom on input focus */
  }
}

/* Mobile virtual keyboard handling */
@media (max-width: 768px) {
  /* When keyboard is open, adjust the chat messages area */
  .keyboard-open .flex-1.overflow-y-auto {
    padding-bottom: calc(env(keyboard-inset-height, 0px) + 8rem) !important;
  }
  
  /* Ensure smooth transitions when keyboard appears/disappears */
  .absolute.bottom-0 {
    transition: bottom 0.3s ease-out;
  }
  
  /* When keyboard is open, ensure the input area stays above it */
  .keyboard-open .absolute.bottom-0 {
    position: fixed !important;
    z-index: 1000;
  }
  
  /* Adjust viewport height calculation for mobile browsers */
  .keyboard-open {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for better mobile support */
  }
  
  /* Fallback positioning for when visual viewport isn't available */
  .mobile-keyboard-fallback .absolute.bottom-0 {
    position: fixed !important;
    z-index: 1000;
  }
}

/* Enhanced mobile virtual keyboard support using env() variables */
@supports (bottom: env(keyboard-inset-height)) {
  @media (max-width: 768px) {
    .absolute.bottom-0 {
      bottom: env(keyboard-inset-height, 0px) !important;
    }
  }
}

/* Alternative approach using CSS logical properties for better mobile support */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  /* This targets touch devices specifically */
  
  /* Ensure input area has proper touch targets */
  .message-textarea {
    min-height: 44px; /* iOS recommended minimum touch target */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 24px;
  }
  
  /* Better spacing for mobile interactions */
  .text-input-container {
    padding: 2px 4px;
  }
  
  /* Improve scroll behavior when keyboard is present */
  .keyboard-open .custom-scrollbar {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }
}

/* Fix for mobile touch delay on all interactive elements */
button, 
a, 
input[type="submit"],
input[type="button"],
label[for],
.thread-item {
    touch-action: manipulation;
}

/* Add better tappable feedback on mobile */
@media (hover: none) and (pointer: coarse) {
    button:active, 
    a:active, 
    input[type="submit"]:active,
    input[type="button"]:active,
    label[for]:active {
        transform: scale(0.97);
        transition: transform 0.1s ease-in-out;
    }
}

/* Add new styles for vertical centering and transition */
/* Apply centering using padding */
.custom-scrollbar.single-ai-message-center {
    /* Push content down - adjust value as needed */
    padding-top: 35vh; 
    transition: padding 0.3s ease;
}

/* Override centering when more messages arrive */
.custom-scrollbar:not(.single-ai-message-center) {
    /* Reset padding smoothly via transition */
    padding-top: 0;
    transition: padding 0.3s ease;
}

/* Remove jerky animation for message item transitions */
.message-enter-active,
.message-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.message-enter-from,
.message-leave-to {
    opacity: 0;
    transform: translateY(10px);
}

/* Ensure the ghost textarea doesn't affect layout */
.ghost-textarea {
    visibility: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    position: absolute;
    padding: 10px 40px 10px 40px;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none;
}

/* Just keep these specific fixes for message loading states */
.message-item-loading {
    transition: none; /* Disable transitions while loading to prevent jerky animations */
}

/* Make sure loading indicators don't affect layout */
.loading-indicator {
    height: 24px;
    overflow: hidden;
}

/* Vue Transitions */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

/* Add smooth transitions to common elements */
button, a, input, select, textarea, [role="button"] {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

/* Smooth scrollbar styling (reapplied here for clarity) */
.simple-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.simple-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.simple-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4); /* gray-400 with opacity */
    border-radius: 20px;
    border: 3px solid transparent; /* Ensure padding */
}

.dark .simple-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.5); /* gray-500 with opacity */
}

.simple-scrollbar::-webkit-scrollbar-thumb:hover {
     background-color: rgba(156, 163, 175, 0.6);
}

.dark .simple-scrollbar::-webkit-scrollbar-thumb:hover {
     background-color: rgba(107, 114, 128, 0.7);
}

/* Specific transitions for components might go here or in component styles */

/* New Thread Indicator */
.new-thread-indicator {
    min-width: 120px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Sidebar slide (mobile only) */
@media (max-width: 767px) { 
    .sidebar-slide-enter-active,
    .sidebar-slide-leave-active {
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .sidebar-slide-enter-from,
    .sidebar-slide-leave-to {
        transform: translateX(-100%);
    }
    
    /* Gesture-based sidebar animations */
    aside.sidebar-gesture-active {
        /* Remove transition during active gesture for immediate feedback */
        transition: none !important;
        will-change: transform;
    }
    
    /* When gesture ends, smoothly animate to final position */
    aside:not(.sidebar-gesture-active) {
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    
    /* Backdrop fade transition */
    .backdrop-fade-enter-active,
    .backdrop-fade-leave-active {
        transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    
    .backdrop-fade-enter-from,
    .backdrop-fade-leave-to {
        opacity: 0;
    }
}

/* Ensure sidebar is visible by default on desktop, no transform needed */
@media (min-width: 768px) {
    .sidebar-slide-enter-from,
    .sidebar-slide-leave-to {
        transform: none; 
    }
}

/* Route Transitions */
.route-fade-enter-active,
.route-fade-leave-active {
  transition: opacity 0.2s ease;
  /* Prevent content from expanding during transition */
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.route-fade-enter-from,
.route-fade-leave-to {
  opacity: 0;
}

/* File Upload Manager Styles */
/* Drag and drop overlay transitions */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* Upload panel slide-up animation */
.slide-up-enter-active,
.slide-up-leave-active {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
    transform: translateY(20px);
    opacity: 0;
}

/* Upload progress bar animations */
.file-upload-manager .bg-primary-500 {
    transition: width 0.3s ease;
}

/* Upload status icon animations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Mobile responsiveness for upload panel */
@media (max-width: 640px) {
    .file-upload-manager > div:nth-child(2) {
        width: calc(100vw - 2rem) !important;
        right: 1rem;
    }
}