/* Dark Mode CSS - ChatGPT Style */

:root {
    --dark-bg: #343541;              /* ChatGPT main background */
    --dark-surface: #444654;         /* ChatGPT secondary background */
    --dark-text: #D1D5DB;            /* ChatGPT primary text */
    --dark-text-secondary: #ACACBE;  /* ChatGPT secondary text */
    --dark-border: rgba(255, 255, 255, 0.05);
}

body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* Header */
body.dark-mode header.bg-white {
    background-color: var(--dark-bg) !important;
    border-bottom: 1px solid var(--dark-border);
}

/* Dark mode icon visibility - Moved to base.css */
/* body.dark-mode .theme-toggle-btn styles are now in base.css */

/* Dark mode for icon visibility at the top of the file */
body.dark-mode .dark-icon {
    display: none !important;
}

body.dark-mode .light-icon {
    display: block !important;
}

body:not(.dark-mode) .dark-icon {
    display: block !important;
}

body:not(.dark-mode) .light-icon {
    display: none !important;
}

/* Header styles */
header.bg-white, 
.bg-white {
    transition: background-color 0.3s ease;
}

.dark-mode header.bg-white {
    background-color: var(--dark-bg) !important;
}

.dark-mode header.border-b {
    border-color: var(--dark-border) !important;
}

.dark-mode header a {
    color: var(--dark-text) !important;
}

.dark-mode header a:hover {
    color: #F3175C !important;
}

.dark-mode header .user-menu-btn {
    color: #e0e0e0 !important;
}

.dark-mode header .dropdown-content {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode header .dropdown-content a {
    color: #e0e0e0 !important;
}

.dark-mode header .dropdown-content a:hover {
    background-color: #444654 !important;
}

.dark-mode .bg-white {
    background-color: var(--dark-bg) !important;
}

.dark-mode body {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Login and Build buttons */
.dark-mode header a[href*="login"] {
    background-color: #F3175C !important;
    color: #ffffff !important;
}

.dark-mode header a[href*="login"]:hover {
    background-color: #E3175E !important;
}

.dark-mode header a[href*="build"] {
    border-color: #F3175C !important;
    color: #F3175C !important;
}

.dark-mode header a[href*="build"]:hover {
    background-color: #F3175C !important;
    color: #ffffff !important;
}

/* Chat container */
.dark-mode .chat-container {
    background-color: var(--dark-bg) !important;
}

.dark-mode .message-bubble {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

.dark-mode .user-message .message-bubble {
    background-color: #F3175C !important;
    color: #ffffff !important;
}

.dark-mode .agent-message .message-bubble {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

.dark-mode .message-input-container {
    background-color: var(--dark-surface) !important;
}

.dark-mode #message-input {
    background-color: #40414f !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .action-button {
    color: #e0e0e0 !important;
}

.dark-mode .action-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .send-button {
    background-color: #F3175C !important;
}

.dark-mode .send-button:hover {
    background-color: #E3175E !important;
}

/* SVG icons */
.dark-mode svg path,
.dark-mode svg {
    fill: currentColor;
}

/* Dropdown menu */
.dark-mode .dropdown div[x-show="open"] {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .dropdown div[x-show="open"] p {
    color: #A1A7B5 !important;
}

.dark-mode .dropdown div[x-show="open"] a {
    color: var(--dark-text) !important;
}

.dark-mode .dropdown div[x-show="open"] a:hover {
    background-color: #40414f !important;
}

/* Message text */
.dark-mode .message-text {
    color: #e0e0e0 !important;
}

.dark-mode .message-text a {
    color: #4D8DFF !important;
}

.dark-mode .message-text code {
    background-color: #444654 !important;
    color: #FF4D8D !important;
}

.dark-mode .message-text pre {
    background-color: #444654 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Error messages */
.dark-mode .error-message {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
}

/* SVG filter */
.dark-mode svg {
    filter: brightness(1.2);
}

/* Main container */
.dark-mode .main-container {
    background-color: #343541 !important;
}

/* Timestamps and metadata */
.dark-mode .message-timestamp,
.dark-mode .message-metadata {
    color: #a1a1aa !important;
}

/* Textarea and inputs */
.dark-mode textarea,
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"] {
    background-color: #444654 !important;
    color: #e0e0e0 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Buttons */
.dark-mode button:not(.theme-toggle-btn):not(.action-button):not(.send-button) {
    background-color: #444654 !important;
    color: #e0e0e0 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode button:not(.theme-toggle-btn):not(.action-button):not(.send-button):hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Error icon */
.dark-mode .error-icon {
    color: #f87171 !important;
}

/* Code blocks */
.dark-mode pre code {
    background-color: #444654 !important;
    color: #e0e0e0 !important;
}

/* Exception for the AIKolab logo */
.dark-mode header a[href="/"] svg {
    filter: none !important;
}

/* Make the pink part of the logo brighter in dark mode */
.dark-mode header a[href="/"] svg path[fill="#E9256A"],
.dark-mode header a[href="/"] svg rect[fill="#E9256A"] {
    fill: #FF4D8D !important;
}

/* Make the blue part of the logo lighter in dark mode */
.dark-mode header a[href="/"] svg path[fill="#1C4173"] {
    fill: #4D8DFF !important;
}

/* Dark mode for the message input wrapper */
.dark-mode #message-input-wrapper {
    background-color: #444654 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode for the message input placeholder */
.dark-mode #message-input::placeholder {
    color: #888 !important;
}

/* Dark mode for the quick actions popup */
.dark-mode #quick-actions-popup {
    background-color: #444654 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .quick-actions-header h3 {
    color: #e0e0e0 !important;
}

.dark-mode .quick-actions button {
    background-color: #444654 !important;
    color: #e0e0e0 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .quick-actions button:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode for the file preview area */
.dark-mode #file-preview {
    background-color: #444654 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode for the drag & drop area */
.dark-mode #drag-drop-area {
    background-color: #444654 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode for the notification container */
.dark-mode #notification-container .notification {
    background-color: #444654 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #e0e0e0 !important;
}

/* Dark mode for the server notification container */
.dark-mode #server-notification-container .server-notification {
    background-color: #444654 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #e0e0e0 !important;
}

/* Dark mode for agent cards */
.dark-mode .agent-card {
    background-color: #444654 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .agent-card:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-4px);
}

.dark-mode .agent-title {
    color: #ffffff !important;
}

.dark-mode .agent-description {
    color: #a1a1aa !important;
}

/* Dark mode for agent names - Fix for home page agent titles */
.dark-mode .agent-name,
.dark-mode .agents-grid .agent-name {
    color: #ffffff !important;
}

.dark-mode .agent-info .agent-name {
    color: #ffffff !important;
}

.dark-mode .agent-stats-line {
    color: #a1a1aa !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .agent-category-button {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #a1a1aa !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .agent-gradient-overlay {
    background: linear-gradient(
        to top,
        rgba(45, 45, 45, 0.95) 0%,
        rgba(45, 45, 45, 0.8) 50%,
        rgba(45, 45, 45, 0) 100%
    ) !important;
}

/* Dark mode for search input */
.dark-mode .search-container input {
    background-color: #444654 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e0e0e0 !important;
}

.dark-mode .search-container input::placeholder {
    color: #a1a1aa !important;
}

.dark-mode .search-container button {
    color: #a1a1aa !important;
    background-color: transparent !important;
}

/* Dark mode for category buttons */
.dark-mode .category-btn {
    background-color: #444654 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
}

.dark-mode .category-btn:hover {
    background-color: rgba(255, 77, 141, 0.1) !important;
    border-color: #FF4D8D !important;
    color: #FF4D8D !important;
}

.dark-mode .category-btn.active {
    background-color: #FF4D8D !important;
    border-color: #FF4D8D !important;
    color: #ffffff !important;
}

.dark-mode .scroll-button {
    background-color: #444654 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
}

.dark-mode .scroll-button:hover {
    background-color: #444654 !important;
    color: #ffffff !important;
}

/* Dark mode for CTA section */
.dark-mode .cta-container {
    background-color: #444654 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .cta-title {
    color: #ffffff !important;
}

.dark-mode .cta-description {
    color: #a1a1aa !important;
}

.dark-mode .cta-button {
    background-color: #FF4D8D !important;
    color: #ffffff !important;
}

.dark-mode .cta-button:hover {
    background-color: #E3175E !important;
}

/* Dark mode for edit button */
.dark-mode .edit-button {
    background-color: rgba(243, 23, 92, 0.9) !important;
    border: 2px solid #444654 !important;
}

.dark-mode .edit-button:hover {
    background-color: #F3175C !important;
    transform: scale(1.15);
}

/* Dark mode for agent badges */
.dark-mode .agent-seu-badge {
    background-color: rgba(243, 23, 92, 0.15) !important;
    color: #FF4D8D !important;
    border: 1px solid rgba(243, 23, 92, 0.25) !important;
}

/* Dark mode for own agent cards */
.dark-mode .agent-card.own-agent {
    border-color: rgba(243, 23, 92, 0.3) !important;
    box-shadow: 0 2px 8px rgba(243, 23, 92, 0.1), 0 1px 3px rgba(243, 23, 92, 0.08) !important;
}

/* Dark mode for hero section */
.dark-mode .hero-section {
    background-color: #444654 !important;
}

.dark-mode .hero-section .bg-container {
    background-color: #444654 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .hero-section h1 {
    color: #ffffff !important;
}

.dark-mode .hero-section p {
    color: #a1a1aa !important;
}

/* Dark mode for categories */
.dark-mode .categories-section {
    background-color: #343541 !important;
}

.dark-mode .categories-wrapper {
    background-color: #343541 !important;
}

.dark-mode .categories-scroll {
    background-color: #343541 !important;
}

.dark-mode .categories-scroll .flex {
    background-color: #343541 !important;
}

/* Fix for scroll fade effect */
.dark-mode .categories-wrapper::before,
.dark-mode .categories-wrapper::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 40px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.dark-mode .categories-wrapper::before {
    left: 0 !important;
    background: linear-gradient(to right, #1a1a1a 0%, rgba(26, 26, 26, 0) 100%) !important;
}

.dark-mode .categories-wrapper::after {
    right: 0 !important;
    background: linear-gradient(to left, #1a1a1a 0%, rgba(26, 26, 26, 0) 100%) !important;
}

/* Ensure scroll buttons are above the fade */
.dark-mode .scroll-button {
    background-color: #444654 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
    z-index: 2 !important;
}

.dark-mode .scroll-button:hover {
    background-color: #444654 !important;
    color: #ffffff !important;
}

/* Remove any potential white backgrounds */
.dark-mode .categories-section *,
.dark-mode .categories-wrapper *,
.dark-mode .categories-scroll * {
    background-color: transparent !important;
}

/* Dark mode for the main content area */
.dark-mode .max-w-7xl {
    background-color: #343541 !important;
}

.dark-mode .px-4,
.dark-mode .sm\:px-6,
.dark-mode .lg\:px-8 {
    background-color: #343541 !important;
}

/* Dark mode for the hero section background */
.dark-mode .hero-section {
    background-color: #343541 !important;
}

.dark-mode .hero-section .bg-container {
    background-color: #444654 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .hero-section h1 {
    color: #ffffff !important;
}

.dark-mode .hero-section p {
    color: #a1a1aa !important;
}

/* Ensure no white backgrounds in dark mode */
.dark-mode .bg-white,
.dark-mode .bg-gray-50,
.dark-mode .bg-gray-100,
.dark-mode [class*="bg-white"] {
    background-color: #343541 !important;
}

/* Header container */
body.dark-mode .header-container a {
    color: #e0e0e0;
}

body.dark-mode .header-container a:hover {
    color: #F3175C;
}

/* Main Content */
body.dark-mode .bg-white {
    background-color: #343541 !important;
}

/* Categories Section */
body.dark-mode .categories-wrapper,
body.dark-mode .categories-scroll,
body.dark-mode .categories-flex {
    background-color: #343541 !important;
}

body.dark-mode .category-button {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .category-button:hover {
    background-color: #444654;
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .category-button.active {
    background-color: #F3175C;
    color: #ffffff;
    border-color: #F3175C;
}

/* Scroll Fade */
body.dark-mode .categories-scroll::before,
body.dark-mode .categories-scroll::after {
    background: linear-gradient(90deg, #1a1a1a 0%, rgba(26, 26, 26, 0) 100%);
}

body.dark-mode .categories-scroll::after {
    background: linear-gradient(270deg, #1a1a1a 0%, rgba(26, 26, 26, 0) 100%);
}

/* Scroll Buttons */
body.dark-mode .scroll-button {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .scroll-button:hover {
    background-color: #444654;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Hero Section */
body.dark-mode .hero-section {
    background-color: #343541;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .hero-section h1,
body.dark-mode .hero-section p {
    color: #e0e0e0;
}

/* Search Input */
body.dark-mode .search-input {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .search-input::placeholder {
    color: #888888;
}

body.dark-mode .search-input:focus {
    border-color: #F3175C;
    box-shadow: 0 0 0 2px rgba(243, 23, 92, 0.2);
}

/* Agent Cards */
body.dark-mode .agent-card {
    background-color: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .agent-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.dark-mode .agent-card h3 {
    color: #e0e0e0;
}

body.dark-mode .agent-card p {
    color: #bbbbbb;
}

/* Buttons */
body.dark-mode .login-button,
body.dark-mode .create-assistant-button {
    background-color: #F3175C;
    color: #ffffff;
    border: none;
}

body.dark-mode .login-button:hover,
body.dark-mode .create-assistant-button:hover {
    background-color: #d1164a;
}

/* Dropdown Menu */
body.dark-mode .dropdown-menu {
    background-color: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .dropdown-item {
    color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover {
    background-color: #444654;
}

/* User Menu */
body.dark-mode .user-menu {
    background-color: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .user-menu-item {
    color: #e0e0e0;
}

body.dark-mode .user-menu-item:hover {
    background-color: #444654;
}

/* Text contrast fixes */
.dark-mode .text-gray-500,
.dark-mode .text-gray-600 {
    color: #9ca3af !important;
}

.dark-mode .text-gray-700,
.dark-mode .text-gray-800 {
    color: #d1d5db !important;
}

/* Link contrast */
.dark-mode a {
    color: #60a5fa;
}

.dark-mode a:hover {
    color: #93bbfc;
}

/* Card contrast */
.dark-mode .card,
.dark-mode .agent-card {
    background-color: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

/* Popular assistants text */
.dark-mode .popular-assistants,
.dark-mode .assistants-populares {
    color: #f3f4f6 !important;
}

/* Post count text */
.dark-mode .post-count,
.dark-mode .posts-count {
    color: #9ca3af !important;
}

/* Agent usage counter */
.dark-mode .agent-usage {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
}

.dark-mode .agent-usage::before {
    color: #e5e7eb !important;
    opacity: 0.7 !important;
}

/* Input fields */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: #60a5fa;
    background-color: #111827;
}

/* Buttons */
.dark-mode .btn-secondary {
    border-color: #374151;
    color: #f3f4f6;
}

.dark-mode .btn-secondary:hover {
    background-color: #374151;
    border-color: #4b5563;
}

/* Headers */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: #f9fafb;
}

/* Navigation */
.dark-mode .navbar,
.dark-mode .header {
    background-color: #1f2937;
    border-bottom-color: #374151;
}

/* Dropdown menus */
.dark-mode .dropdown-menu {
    background-color: #1f2937;
    border-color: #374151;
}

.dark-mode .dropdown-item {
    color: #f3f4f6;
}

.dark-mode .dropdown-item:hover {
    background-color: #374151;
    color: #f9fafb;
}

/* Badges and labels */
.dark-mode .badge,
.dark-mode .label {
    background-color: #374151;
    color: #f3f4f6;
}

/* Table contrast */
.dark-mode table {
    color: #f3f4f6;
}

.dark-mode th {
    background-color: #1f2937;
    color: #f9fafb;
}

.dark-mode td {
    border-color: #374151;
}

.dark-mode tr:hover {
    background-color: #1f2937;
}

/* Code blocks */
.dark-mode code,
.dark-mode pre {
    background-color: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}

/* Tooltips */
.dark-mode .tooltip {
    background-color: #111827;
    color: #f3f4f6;
}

/* Modals */
.dark-mode .modal-content {
    background-color: #1f2937;
    color: #f3f4f6;
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
    border-color: #374151;
}

/* Alerts */
.dark-mode .alert {
    background-color: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

/* Remove text shadows in dark mode */
.dark-mode * {
    text-shadow: none !important;
}