@reference "tailwindcss";

.sidebar {
  @apply w-80 border-r border-[#2c313a]/80 flex flex-col pt-2 bg-gradient-to-b from-[#1a1e24] to-[#1c2026];
}

/* Mobile Sidebar */
@media (max-width: 640px) {
  .sidebar {
    @apply fixed top-0 left-0 bottom-0 z-50 w-[280px] transform -translate-x-full transition-transform duration-300 ease-in-out;
  }

  .sidebar.open {
    @apply translate-x-0;
  }

  /* Overlay when sidebar is open */
  .sidebar-overlay {
    @apply fixed inset-0 bg-black/50 z-40 opacity-0 pointer-events-none transition-opacity duration-300;
  }

  .sidebar-overlay.active {
    @apply opacity-100 pointer-events-auto;
  }
}

.sidebar-header {
  @apply px-4 sm:px-6 py-4 sm:py-5 flex items-center justify-between border-b border-[#2c313a]/80 bg-gradient-to-r from-[#1e232a] to-[#20252d];
}

.sidebar-title {
  @apply text-lg sm:text-xl font-semibold tracking-tight text-gray-100 flex items-center gap-2;
}

.new-chat-button {
  @apply w-8 h-8 sm:w-9 sm:h-9 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center shadow-sm hover:from-blue-500 hover:to-blue-600 transition-colors cursor-pointer;
}

.new-chat-icon {
  @apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-white;
}

/* Mobile Menu Button */
.mobile-menu-button {
  @apply fixed top-4 left-4 z-50 w-10 h-10 rounded-lg bg-gradient-to-br from-[#2c313a] to-[#2e333d] border border-[#3a404b]/30 flex items-center justify-center sm:hidden;
}

.mobile-menu-icon {
  @apply w-5 h-5 text-gray-300;
}

/* Search Section */
.search-section {
  @apply px-3 py-3 border-b border-[#2c313a]/60;
}

.search-input-wrapper {
  @apply relative flex items-center;
}

.search-icon {
  @apply absolute left-3 text-gray-400 pointer-events-none;
}

.search-input {
  @apply w-full bg-[#1e232a] border border-[#3a404b]/40 rounded-lg pl-9 pr-8 py-2.5 text-sm text-gray-300 placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20 transition-all;
}

.search-input:focus {
  @apply bg-[#1a1e24];
}

.clear-search-button {
  @apply absolute right-2 w-5 h-5 rounded-md bg-[#3a404b]/60 hover:bg-[#3a404b]/80 flex items-center justify-center text-gray-400 hover:text-gray-300 transition-all duration-200 cursor-pointer;
}

.clear-search-button:hover {
  @apply scale-105;
}

.search-results-count {
  @apply text-xs text-gray-500 mt-2 px-1;
}

/* Empty Search Results */
.empty-search-results {
  @apply px-4 py-6 text-center;
}

.empty-search-text {
  @apply text-gray-400 text-sm mb-3;
}

.clear-search-action {
  @apply text-blue-400 hover:text-blue-300 text-sm underline underline-offset-2 transition-colors cursor-pointer;
}

.chat-list {
  @apply flex-1 overflow-y-auto px-2 pt-4;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

.chat-list::-webkit-scrollbar {
  display: none; /* For Chrome, Safari and Opera */
}

.chat-list:hover::-webkit-scrollbar {
  display: block; /* Show scrollbar on hover */
  width: 6px;
}

.chat-list:hover {
  scrollbar-width: thin; /* For Firefox */
}

.chat-item {
  @apply flex items-center px-4 sm:px-6 py-3 sm:py-4 w-full text-left hover:bg-gradient-to-r hover:from-[#2c313a]/90 hover:to-[#2c313a]/70 transition-all rounded-lg my-1 border border-transparent hover:border-[#3a404b]/20;
}

.chat-item-content {
  @apply flex items-center gap-2 w-full;
}

.branch-icon {
  @apply text-amber-400 flex-shrink-0;
}

.chat-item-active {
  @apply bg-gradient-to-r from-[#2c313a] to-[#2e333d] border-[#3a404b]/30;
}

.chat-item-creating {
  @apply opacity-70;
}

.chat-creating-indicator {
  @apply text-blue-400 text-xs;
  animation: pulse 1.5s ease-in-out infinite;
}

.chat-item-text {
  @apply truncate text-sm sm:text-base tracking-wide;
}

.chat-item-text-active {
  @apply text-white font-medium;
}

.chat-item-text-inactive {
  @apply text-gray-300;
}

.chat-item:hover .chat-item-text-inactive {
  color: white;
}

.empty-chats {
  @apply px-4 sm:px-6 py-3 text-gray-400 text-sm italic;
}

.sidebar-footer {
  @apply py-3 sm:py-4 px-4 sm:px-6 border-t border-[#2c313a]/80 bg-gradient-to-r from-[#1e232a] to-[#20252d];
}

.ai-status {
  @apply opacity-80;
}

.ai-status-indicator {
  @apply flex items-center;
}

.ai-status-dot {
  @apply w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-gradient-to-r from-green-500 to-green-400 mr-2 shadow-sm shadow-green-500/20;
}

.ai-status-text {
  @apply text-sm sm:text-base text-gray-300;
}

.ai-status-subtext {
  @apply text-xs text-gray-500 mt-1 ml-4;
}

/* Chat Options Modal Styles */
.chat-options-modal {
  @apply bg-[#2c313a] border border-[#3a404b]/40 rounded-lg shadow-lg shadow-black/20 py-1 min-w-[140px];
}

.options-menu {
  @apply flex flex-col;
}

.option-item {
  @apply flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-[#3a404b]/30 transition-colors cursor-pointer w-full text-left;
}

.option-item:first-child {
  @apply rounded-t-md;
}

.option-item:last-child {
  @apply rounded-b-md;
}

.option-item.delete {
  @apply text-red-400 hover:text-red-300 hover:bg-red-500/10;
}

.rename-form {
  @apply p-3;
}

.rename-input {
  @apply w-full bg-[#1a1e24] border border-[#3a404b]/40 rounded px-2 py-1.5 text-sm text-gray-300 placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20;
}

.rename-actions {
  @apply flex gap-2 mt-2;
}

.rename-save {
  @apply bg-blue-600 hover:bg-blue-700 text-white text-xs px-2 py-1 rounded transition-colors;
}

.rename-cancel {
  @apply bg-gray-600 hover:bg-gray-700 text-white text-xs px-2 py-1 rounded transition-colors;
}

/* Chat Item Options Button */
.chat-item-wrapper {
  @apply relative;
}

.chat-options-button {
  @apply absolute right-2 top-1/2 transform -translate-y-1/2 w-6 h-6 rounded-md bg-[#3a404b]/60 hover:bg-[#3a404b]/80 flex items-center justify-center opacity-0 transition-all duration-200 cursor-pointer;
}

.chat-item-wrapper:hover .chat-options-button {
  @apply opacity-100;
}

.chat-options-button:hover {
  @apply scale-105;
}

.options-dots {
  @apply w-3 h-3 text-gray-400;
}

/* Confirmation Modal Styles */
.confirmation-modal-overlay {
  @apply fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4;
}

.confirmation-modal {
  @apply bg-[#2c313a] border border-[#3a404b]/40 rounded-lg shadow-xl shadow-black/30 max-w-md w-full mx-auto;
}

.confirmation-header {
  @apply flex items-center gap-3 p-6 pb-4;
}

.confirmation-icon {
  @apply w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0;
}

.confirmation-icon.danger {
  @apply bg-red-500/20 text-red-400;
}

.confirmation-icon.warning {
  @apply bg-amber-500/20 text-amber-400;
}

.confirmation-title {
  @apply text-lg font-semibold text-gray-100 m-0;
}

.confirmation-body {
  @apply px-6 pb-2;
}

.confirmation-message {
  @apply text-gray-300 text-sm leading-relaxed m-0;
}

.confirmation-actions {
  @apply flex gap-3 p-6 pt-6 justify-end;
}

.confirmation-button {
  @apply px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#2c313a];
}

.confirmation-button.cancel {
  @apply bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500;
}

.confirmation-button.confirm.danger {
  @apply bg-red-600 hover:bg-red-700 text-white focus:ring-red-500;
}

.confirmation-button.confirm.warning {
  @apply bg-amber-600 hover:bg-amber-700 text-white focus:ring-amber-500;
}
