/* ===============================================
   VARELAS AI - CHATGPT STYLE (COMPLETE)
   =============================================== */

/* Override body background based on theme */
body {
  background-color: #212121 !important;
  color: #ececec !important;
}

[data-theme="light"] body {
  background-color: #ffffff !important;
  color: #202020 !important;
}

/* ===============================================
   LOGIN PAGE STYLING - PRETTIER DESIGN
   =============================================== */

/* Main login page wrapper */
html, body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Grid layout for login page */
.grid.min-h-svh {
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%) !important;
}

[data-theme="light"] .grid.min-h-svh {
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%) !important;
}

/* Left column - form area */
.grid.min-h-svh > div:first-child {
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(15, 15, 15, 0.95) 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

[data-theme="light"] .grid.min-h-svh > div:first-child {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 245, 0.98) 100%) !important;
}

/* Hide the top header area with logo */
.grid.min-h-svh > div:first-child > div:first-child {
  display: none !important;
}

/* Logo styling - hide the top left logo */
.logo {
  display: none !important;
}

/* Form container - minimal styling */
form {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* Hide all form elements except button */
form > * {
  display: none !important;
}

/* Show only the button grid */
form .grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* Hide all form children except grid with button */
form > div:not(.grid) {
  display: none !important;
}

/* Form heading - hide it */
form h1 {
  display: none !important;
}

/* Form description/helper text - hide it */
form p, form .text-center {
  display: none !important;
}

/* Right column - image area */
.grid.min-h-svh > div:last-child {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
  position: relative !important;
}

[data-theme="light"] .grid.min-h-svh > div:last-child {
  background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%) !important;
}

/* Image in right column */
.grid.min-h-svh > div:last-child img {
  filter: brightness(0.15) grayscale(100%) !important;
  transition: filter 0.3s ease !important;
}

.grid.min-h-svh > div:last-child:hover img {
  filter: brightness(0.25) grayscale(80%) !important;
}

/* OAuth buttons - Cognito button styling on login page only */
form button {
  background: linear-gradient(135deg, #ab7aff 0%, #9d5cff 100%) !important;
  color: white !important;
  border: none !important;
  padding: 24px 48px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  box-shadow: 0 12px 30px rgba(171, 122, 255, 0.35) !important;
  letter-spacing: 0.8px !important;
  animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

form button:hover {
  background: linear-gradient(135deg, #9d5cff 0%, #8b4dff 100%) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(171, 122, 255, 0.5) !important;
}

form button:active {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 24px rgba(171, 122, 255, 0.4) !important;
}

/* Button icon on login page */
form button svg {
  width: 28px !important;
  height: 28px !important;
  transition: transform 0.3s ease !important;
}

form button:hover svg {
  transform: scale(1.15) !important;
}

/* Hide system messages with skeleton loaders */
[data-step-type="system"] {
  display: none !important;
}

/* Login page heading */
[class*="login"] h1, [class*="login"] h2, [class*="auth"] h1, [class*="auth"] h2 {
  color: #ececec !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

[data-theme="light"] [class*="login"] h1,
[data-theme="light"] [class*="login"] h2,
[data-theme="light"] [class*="auth"] h1,
[data-theme="light"] [class*="auth"] h2 {
  color: #202020 !important;
}

/* Login page description */
[class*="login"] p, [class*="auth"] p {
  color: #a0a0a0 !important;
  font-size: 14px !important;
  text-align: center !important;
  margin-bottom: 30px !important;
}

[data-theme="light"] [class*="login"] p,
[data-theme="light"] [class*="auth"] p {
  color: #666666 !important;
}

/* Cognito OAuth button - specific styling */
button[type="button"] {
  background: linear-gradient(135deg, #ab7aff 0%, #9d5cff 100%) !important;
  color: white !important;
  border: none !important;
  padding: 14px 24px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(171, 122, 255, 0.25) !important;
  letter-spacing: 0.5px !important;
}

button[type="button"]:hover {
  background: linear-gradient(135deg, #9d5cff 0%, #8b4dff 100%) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(171, 122, 255, 0.4) !important;
}

button[type="button"]:active {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(171, 122, 255, 0.3) !important;
}

/* Button text */
button span {
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  transition: transform 0.3s ease !important;
}

button:hover span {
  transform: scale(1.05) !important;
}

/* Button icon */
button svg {
  width: 22px !important;
  height: 22px !important;
  transition: transform 0.3s ease !important;
}

button:hover svg {
  transform: scale(1.1) !important;
}

/* Login page container - center everything */
main, [role="main"], .main-content, [class*="container"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  flex-direction: column !important;
}

/* Ensure login form is properly centered */
form {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 420px !important;
}

/* ===============================================
   LOGIN PAGE ANIMATIONS
   =============================================== */

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

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

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

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(171, 122, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(171, 122, 255, 0.5);
  }
}

/* ===============================
   UNIVERSAL TEXT COLOR OVERRIDES
   =============================== */

/* All text elements - dark theme */
p, span, div, a, li, h1, h2, h3, h4, h5, h6, label, button, input, textarea {
  color: #ececec !important;
}

/* All text elements - light theme */
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] div,
[data-theme="light"] a,
[data-theme="light"] li,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] label,
[data-theme="light"] button,
[data-theme="light"] input,
[data-theme="light"] textarea {
  color: #202020 !important;
}

/* Placeholder text - dark theme */
::placeholder {
  color: #666666 !important;
}

/* Placeholder text - light theme */
[data-theme="light"] ::placeholder {
  color: #999999 !important;
}

/* Muted text - dark theme */
.text-muted-foreground,
.muted-foreground {
  color: #8e8e8e !important;
}

/* Muted text - light theme */
[data-theme="light"] .text-muted-foreground,
[data-theme="light"] .muted-foreground {
  color: #666666 !important;
}

/* Links - dark theme */
a {
  color: #19c37d !important;
}

/* Links - light theme */
[data-theme="light"] a {
  color: #10a37f !important;
}

/* ===============================
   HIDE ALL UNWANTED ELEMENTS
   =============================== */
   header,
   [role="banner"],
   .MuiAppBar-root,
   [class*="AppBar"],
   [data-testid*="header"],
   body > div > div > header,
   #root > div > header,
   main > header,
   #sidebar-trigger-button,
   [data-sidebar="rail"],
   button[aria-label*="Toggle Sidebar"],
   button[aria-label*="toggle" i],
   [data-sidebar="header"],
   #theme-toggle,
   #user-button,
   #user-nav-button,
   #readme-button,
   #search-chats-button,
   header button[aria-label*="settings"],
   a[href*="chainlit.io"],
   [class*="PoweredBy"],
   [class*="chainlit-logo"] {
     display: none !important;
     visibility: hidden !important;
     height: 0 !important;
     opacity: 0 !important;
   }
   
   /* ===============================
      SIDEBAR - CHATGPT STYLE
      =============================== */
   [data-sidebar="sidebar"] {
     background: #171717 !important;
     border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
     font-family: -apple-system, BlinkMacSystemFont, "Söhne", "Segoe UI", Helvetica, Arial, sans-serif !important;
     padding-top: 12px !important;
     position: relative !important;
   }
   
   [data-theme="light"] [data-sidebar="sidebar"] {
     background: #ffffff !important;
     border-right: 1px solid #e5e5e5 !important;
   }

   /* Sidebar content area with scroll */
   [data-sidebar="content"] {
     flex: 1 !important;
     overflow-y: auto !important;
     overflow-x: hidden !important;
     padding-right: 8px !important;
   }

   /* Scrollbar styling */
   [data-sidebar="content"]::-webkit-scrollbar {
     width: 8px !important;
   }

   [data-sidebar="content"]::-webkit-scrollbar-track {
     background: transparent !important;
   }

   [data-sidebar="content"]::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.2) !important;
     border-radius: 4px !important;
   }

   [data-sidebar="content"]::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.3) !important;
   }

   [data-theme="light"] [data-sidebar="content"]::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.1) !important;
   }

   [data-theme="light"] [data-sidebar="content"]::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 0, 0, 0.2) !important;
   }

   /* REMOVE LOGO */
   [data-sidebar="sidebar"]::before,
   [data-sidebar="sidebar"]::after {
     display: none !important;
   }
   
   /* ===============================
      NEW CHAT BUTTON - TOP
      =============================== */
   #varelas-new-chat-btn {
     position: absolute !important;
     top: 16px !important;
     left: 12px !important;
     right: 12px !important;
     width: calc(100% - 24px) !important;
     height: 44px !important;
     border-radius: 8px !important;
     background: transparent !important;
     border: none !important;
     color: #ececec !important;
     font-size: 14px !important;
     font-weight: 400 !important;
     transition: background 0.2s !important;
     padding: 0 12px !important;
     cursor: pointer !important;
     display: flex !important;
     align-items: center !important;
     justify-content: flex-start !important;
     gap: 12px !important;
     z-index: 5 !important;
   }
   
   [data-theme="light"] #varelas-new-chat-btn {
     color: #202020 !important;
   }
   
   #varelas-new-chat-btn:hover {
     background: rgba(255, 255, 255, 0.1) !important;
   }
   
   [data-theme="light"] #varelas-new-chat-btn:hover {
     background: rgba(0, 0, 0, 0.05) !important;
   }
   
   /* Pencil icon */
   #varelas-new-chat-btn::before {
     content: "";
     width: 20px;
     height: 20px;
     background: currentColor;
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E") center/contain no-repeat;
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E") center/contain no-repeat;
     flex-shrink: 0;
   }
   
   /* ===============================
      SIDEBAR CONTENT
      =============================== */
   [data-sidebar="content"] {
     background: transparent !important;
     padding: 0 !important;
     padding-top: 68px !important;
     padding-bottom: 90px !important;
     overflow-y: auto !important;
   }
   
   /* Conversation history label */
   [data-sidebar="group"],
   #thread-history [data-sidebar="group"] {
     color: #8e8e8e !important;
     font-size: 11px !important;
     font-weight: 600 !important;
     padding: 8px 16px 4px !important;
     margin: 0 !important;
     margin-bottom: 8px !important;
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
     line-height: 1.2 !important;
   }
   
   /* Hide loading skeleton */
   [data-sidebar="group"] > div.animate-pulse {
     display: none !important;
   }

   /* Thread history group label - style to match conversation history */
   #thread-history [data-sidebar="group-label"] {
     color: #8e8e8e !important;
     font-size: 11px !important;
     font-weight: 600 !important;
     padding: 0 16px !important;
     margin: 0 !important;
     margin-bottom: 8px !important;
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
     line-height: 1.2 !important;
     height: auto !important;
     border-radius: 0 !important;
     outline: none !important;
     background: transparent !important;
   }

   [data-theme="light"] #thread-history [data-sidebar="group-label"] {
     color: #6b6b6b !important;
   }

   /* Disable hover on group labels */
   [data-sidebar="group-label"]:hover {
     background: transparent !important;
     cursor: default !important;
   }

   #thread-history [data-sidebar="group-label"]:hover {
     background: transparent !important;
     cursor: default !important;
   }

   /* Thread history group content */
   #thread-history [data-sidebar="group-content"] {
     width: 100% !important;
     padding: 0 !important;
     margin: 0 !important;
   }

   /* Thread history menu */
   #thread-history [data-sidebar="menu"] {
     display: flex !important;
     width: 100% !important;
     min-width: 0 !important;
     flex-direction: column !important;
     gap: 4px !important;
     padding: 0 !important;
     margin: 0 !important;
   }

   /* Thread history menu items */
   #thread-history [data-sidebar="menu-item"] {
     position: relative !important;
     display: block !important;
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
   }

   /* Thread history menu item hover - no effect */
   #thread-history [data-sidebar="menu-item"]:hover {
     background: transparent !important;
   }

   /* Thread history menu item - disable hover on container */
   #thread-history li[data-sidebar="menu-item"]:hover {
     background: transparent !important;
   }

   [data-theme="light"] [data-sidebar="group"],
   [data-theme="light"] #thread-history [data-sidebar="group"] {
     color: #6b6b6b !important;
   }
   
   /* Thread group */
   [data-sidebar="group"] {
     display: block !important;
     width: 100% !important;
     margin-top: 0 !important;
   }

   /* Thread history group - no padding */
   #thread-history [data-sidebar="group"] {
     display: block !important;
     width: 100% !important;
     margin-top: 0 !important;
     padding: 0 !important;
     margin: 0 !important;
   }
   
   /* Thread items - styled like "Νέα Συνομιλία" button */
   button[data-sidebar="menu-button"],
   #thread-history button[data-sidebar="menu-button"] {
     border-radius: 8px !important;
     padding: 0 12px !important;
     margin: 0 8px 4px 8px !important;
     background: transparent !important;
     color: #ececec !important;
     font-size: 14px !important;
     font-weight: 400 !important;
     transition: background 0.2s !important;
     border: none !important;
     text-align: left !important;
     width: calc(100% - 16px) !important;
     height: 44px !important;
     display: flex !important;
     align-items: center !important;
     gap: 8px !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
     min-width: 0 !important;
     cursor: pointer !important;
   }

   button[data-sidebar="menu-button"]:hover {
     background: rgba(255, 255, 255, 0.1) !important;
   }

   /* Thread history buttons - no hover effect */
   #thread-history button[data-sidebar="menu-button"]:hover {
     background: transparent !important;
   }

   /* Override Tailwind hover classes on thread history buttons */
   #thread-history button[data-sidebar="menu-button"]:hover,
   #thread-history button[data-sidebar="menu-button"]:hover.hover\:bg-sidebar-accent {
     background: transparent !important;
     color: #ececec !important;
   }

   [data-theme="light"] button[data-sidebar="menu-button"],
   [data-theme="light"] #thread-history button[data-sidebar="menu-button"] {
     color: #202020 !important;
   }

   [data-theme="light"] button[data-sidebar="menu-button"]:hover {
     background: rgba(0, 0, 0, 0.05) !important;
   }

   /* Thread history buttons - no hover effect (light theme) */
   [data-theme="light"] #thread-history button[data-sidebar="menu-button"]:hover,
   [data-theme="light"] #thread-history button[data-sidebar="menu-button"]:hover.hover\:bg-sidebar-accent {
     background: transparent !important;
     color: #202020 !important;
   }

   /* Thread history button text truncation */
   #thread-history button[data-sidebar="menu-button"] span {
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
     min-width: 0 !important;
     flex: 1 !important;
   }

   /* Force remove all hover effects on thread history buttons */
   #thread-history button[data-sidebar="menu-button"] {
     --tw-bg-opacity: 1 !important;
     background-color: transparent !important;
   }

   #thread-history button[data-sidebar="menu-button"]:hover {
     --tw-bg-opacity: 1 !important;
     background-color: transparent !important;
   }

   #thread-history button[data-sidebar="menu-button"]:focus {
     background-color: transparent !important;
   }

   #thread-history button[data-sidebar="menu-button"]:active {
     background-color: transparent !important;
   }

   /* Active thread */
   button[data-sidebar="menu-button"][data-active="true"],
   #thread-history button[data-sidebar="menu-button"][data-active="true"] {
     background: rgba(255, 255, 255, 0.1) !important;
     font-weight: 500 !important;
   }

   [data-theme="light"] button[data-sidebar="menu-button"][data-active="true"],
   [data-theme="light"] #thread-history button[data-sidebar="menu-button"][data-active="true"] {
     background: rgba(0, 0, 0, 0.08) !important;
   }
   
   /* Thread options */
   #thread-options {
     opacity: 0 !important;
     transition: opacity 0.2s !important;
   }
   
   li[data-sidebar="menu-item"]:hover #thread-options {
     opacity: 1 !important;
   }
   
   /* Scrollbar */
   [data-sidebar="content"]::-webkit-scrollbar {
     width: 8px;
   }
   
   [data-sidebar="content"]::-webkit-scrollbar-track {
     background: transparent;
   }
   
   [data-sidebar="content"]::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.2);
     border-radius: 4px;
   }
   
   [data-theme="light"] [data-sidebar="content"]::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.2);
   }
   
   [data-sidebar="content"]::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.3);
   }
   
   [data-theme="light"] [data-sidebar="content"]::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 0, 0, 0.3);
   }
   
   /* ===============================
      USER FOOTER
      =============================== */
   #varelas-native-footer {
     position: absolute !important;
     bottom: 0 !important;
     left: 0 !important;
     right: 0 !important;
     width: 100% !important;
     background: #171717 !important;
     border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
     padding: 12px !important;
     z-index: 1000 !important;
   }
   
   [data-theme="light"] #varelas-native-footer {
     background: #ffffff !important;
     border-top-color: rgba(0, 0, 0, 0.1) !important;
   }
   
   .varelas-user-info {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 8px 10px;
     border-radius: 8px;
     cursor: pointer;
     transition: background 0.2s;
     background: transparent;
   }
   
   .varelas-user-info:hover {
     background: rgba(255, 255, 255, 0.1);
   }
   
   [data-theme="light"] .varelas-user-info:hover {
     background: rgba(0, 0, 0, 0.05);
   }
   
   .varelas-user-avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: linear-gradient(135deg, #19c37d 0%, #0e8c5c 100%);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     font-size: 12px;
     flex-shrink: 0;
   }
   
   .varelas-user-details {
     flex: 1;
     min-width: 0;
   }
   
   .varelas-user-name {
     font-size: 14px;
     font-weight: 500;
     color: #ececec;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     line-height: 1.3;
   }
   
   [data-theme="light"] .varelas-user-name {
     color: #202020;
   }
   
   .varelas-user-email {
     font-size: 12px;
     color: #8e8e8e;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     line-height: 1.3;
     margin-top: 1px;
   }

   [data-theme="light"] .varelas-user-email {
     color: #999999;
   }

   .varelas-chevron {
     transition: transform 0.3s;
     color: #8e8e8e;
     opacity: 0.6;
     flex-shrink: 0;
     width: 16px;
     height: 16px;
   }

   [data-theme="light"] .varelas-chevron {
     color: #999999;
   }
   
   .varelas-user-info:hover .varelas-chevron {
     opacity: 1;
   }
   
   .varelas-user-info.menu-open .varelas-chevron {
     transform: rotate(180deg);
   }
   
   /* ===============================
      DROPDOWN MENU
      =============================== */
   .varelas-user-menu {
     position: absolute;
     bottom: calc(100% + 8px);
     left: 8px;
     right: 8px;
     background: #2a2a2a;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
     overflow: hidden;
     z-index: 100;
     display: none;
     opacity: 0;
     transform: translateY(10px) scale(0.95);
     transition: opacity 0.2s, transform 0.2s;
   }
   
   [data-theme="light"] .varelas-user-menu {
     background: white;
     border-color: rgba(0, 0, 0, 0.1);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   }
   
   .varelas-user-menu.show {
     display: block !important;
     opacity: 1;
     transform: translateY(0) scale(1);
   }
   
   .varelas-menu-item {
     width: 100%;
     padding: 12px 14px;
     border: none;
     background: none;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     font-weight: 400;
     color: #ececec;
     cursor: pointer;
     transition: background 0.15s;
     text-align: left;
   }
   
   [data-theme="light"] .varelas-menu-item {
     color: #202020;
   }
   
   .varelas-menu-item:hover {
     background: rgba(255, 255, 255, 0.1);
   }
   
   [data-theme="light"] .varelas-menu-item:hover {
     background: rgba(0, 0, 0, 0.05);
   }
   
   .varelas-menu-item > span:first-child {
     font-size: 16px;
     width: 18px;
     height: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .varelas-menu-divider {
     height: 1px;
     background: rgba(255, 255, 255, 0.1);
     margin: 4px 0;
   }
   
   [data-theme="light"] .varelas-menu-divider {
     background: rgba(0, 0, 0, 0.1);
   }
   
   .varelas-menu-item.varelas-danger {
     color: #ef4444;
   }
   
   .varelas-menu-item.varelas-danger:hover {
     background: rgba(239, 68, 68, 0.1);
   }
   
   #theme-icon {
     transition: transform 0.3s;
   }
   
   .varelas-menu-item:hover #theme-icon {
     transform: rotate(20deg) scale(1.1);
   }
   
   /* ===============================
      MAIN CONTENT
      =============================== */
   main,
   [role="main"] {
     padding-top: 0 !important;
     margin-top: 0 !important;
     margin-left: 0 !important;
     min-height: 100vh !important;
     background: #212121 !important;
     font-family: -apple-system, BlinkMacSystemFont, "Söhne", "Segoe UI", Helvetica, Arial, sans-serif !important;
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
     justify-content: center !important; /* Center content vertically */
     width: calc(100% - 260px) !important;
     overflow-y: auto !important; /* Allow scrolling if content is too tall */
   }

   [data-theme="light"] main,
   [data-theme="light"] [role="main"] {
     background: #ffffff !important;
   }
   
   /* ===============================
      MESSAGES - CHATGPT STYLE
      =============================== */
   
   /* Step container */
   .step {
     padding: 24px 0 !important;
   }
   
   [data-theme="light"] .step {
     border-bottom-color: rgba(0, 0, 0, 0.05) !important;
   }
   
   .step:last-child {
     border-bottom: none !important;
   }
   
      
   /* Assistant messages - Darker background */
   .step[data-step-type="assistant_message"],
   .step[data-step-type="run"] {
     background: #212121 !important;
   }
   
   [data-theme="light"] .step[data-step-type="assistant_message"],
   [data-theme="light"] .step[data-step-type="run"] {
     background: #ffffff !important;
   }
   
   /* User message bubble - ChatGPT style */
   .step[data-step-type="user_message"] .bg-accent {
     background: #343541 !important;
     color: #ececec !important;
     border-radius: 18px !important;
     padding: 12px 16px !important;
   }
   
   [data-theme="light"] .step[data-step-type="user_message"] .bg-accent {
     background: #f4f4f4 !important;
     color: #202020 !important;
     border: 1px solid #e5e5e5 !important;
   }
   
   /* Assistant message text */
   .step[data-step-type="assistant_message"] .message-content,
   .step[data-step-type="run"] .message-content {
     color: #ececec !important;
   }
   
   [data-theme="light"] .step[data-step-type="assistant_message"] .message-content,
   [data-theme="light"] .step[data-step-type="run"] .message-content {
     color: #202020 !important;
   }
   
   /* Prose (formatted text) colors */
   .step[data-step-type="assistant_message"] .prose,
   .step[data-step-type="assistant_message"] .prose * {
     color: #ececec !important;
   }
   
   [data-theme="light"] .step[data-step-type="assistant_message"] .prose,
   [data-theme="light"] .step[data-step-type="assistant_message"] .prose * {
     color: #202020 !important;
   }
   
   /* Headings */
   .step[data-step-type="assistant_message"] h1,
   .step[data-step-type="assistant_message"] h2,
   .step[data-step-type="assistant_message"] h3 {
     color: #ffffff !important;
     border-color: rgba(255, 255, 255, 0.1) !important;
   }
   
   [data-theme="light"] .step[data-step-type="assistant_message"] h1,
   [data-theme="light"] .step[data-step-type="assistant_message"] h2,
   [data-theme="light"] .step[data-step-type="assistant_message"] h3 {
     color: #202020 !important;
     border-color: rgba(0, 0, 0, 0.1) !important;
   }
   
   /* Links */
   .step[data-step-type="assistant_message"] a {
     color: #19c37d !important;
   }
   
   [data-theme="light"] .step[data-step-type="assistant_message"] a {
     color: #10a37f !important;
   }
   
   /* Code blocks */
   .step[data-step-type="assistant_message"] code {
     background: #1a1a1a !important;
     color: #ececec !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
   }
   
   [data-theme="light"] .step[data-step-type="assistant_message"] code {
     background: #f4f4f4 !important;
     color: #202020 !important;
     border: 1px solid rgba(0, 0, 0, 0.1) !important;
   }
   
   /* Avatars - smaller like ChatGPT */
   .step .rounded-full {
     width: 28px !important;
     height: 28px !important;
   }
   
   /* Edit button on user message */
   .step[data-step-type="user_message"] .edit-message {
     color: #8e8e8e !important;
   }
   
   .step[data-step-type="user_message"] .edit-message:hover {
     background: rgba(255, 255, 255, 0.1) !important;
     color: #ececec !important;
   }
   
   [data-theme="light"] .step[data-step-type="user_message"] .edit-message:hover {
     background: rgba(0, 0, 0, 0.05) !important;
     color: #202020 !important;
   }
   
   /* Message actions (copy button, etc) */
   .step[data-step-type="assistant_message"] button {
     color: #8e8e8e !important;
   }
   
   .step[data-step-type="assistant_message"] button:hover {
     background: rgba(255, 255, 255, 0.1) !important;
     color: #ececec !important;
   }
   
   [data-theme="light"] .step[data-step-type="assistant_message"] button:hover {
     background: rgba(0, 0, 0, 0.05) !important;
     color: #202020 !important;
   }
   
   /* Muted text color */
   .text-muted-foreground {
     color: #8e8e8e !important;
   }
   
   /* ===============================
      HIDE FEEDBACK BUTTONS
      =============================== */
   .positive-feedback-off,
   .negative-feedback-off,
   button[class*="feedback"],
   button.positive-feedback-on,
   button.negative-feedback-on,
   .-ml-1\.5.flex.items-center.flex-wrap {
     display: none !important;
   }
   
   /* ===============================
      INPUT AREA
      =============================== */
   form > div {
     background: #2a2a2a !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
   }
   
   [data-theme="light"] form > div {
     background: #f4f4f4 !important;
     border-color: rgba(0, 0, 0, 0.1) !important;
   }
   
   /* ===============================
      MOBILE RESPONSIVE
      =============================== */
   @media (max-width: 768px) {
     main,
     [role="main"] {
       margin-left: 0 !important;
     }
     
     [data-sidebar="sidebar"] {
       transform: translateX(-100%);
       transition: transform 0.3s;
     }
     
     [data-sidebar="sidebar"].open {
       transform: translateX(0);
     }
   }

   /* Composer container - EVEN LESS TALL */
  #message-composer {
    border-radius: 12px !important;
    padding: 20px 16px !important; /* Even less padding */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 2px !important; /* Minimal gap */
    background: #2a2a2a !important;
    position: static !important; /* Remove relative positioning */
    max-width: 900px !important; /* Match welcome message width */
    width: 100% !important;
    flex-shrink: 0 !important; /* Don't shrink */
    margin: 0 auto !important; /* Center horizontally */
  }

  /* Remove relative positioning from composer inner div
  #message-composer > div {
    position: relative !important;
    width: 100% !important;
  } */

  [data-theme="light"] #message-composer {
    background: #f5f5f5 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08) !important;
  }

  /* Composer input styling */
  #message-composer input,
  #message-composer textarea,
  #message-composer [contenteditable] {
    background: #2a2a2a !important;
    color: #ececec !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  [data-theme="light"] #message-composer input,
  [data-theme="light"] #message-composer textarea,
  [data-theme="light"] #message-composer [contenteditable] {
    background: #f5f5f5 !important;
    color: #202020 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
  }

  /* Composer text styling - exclude buttons */
  #message-composer > :not(button),
  #message-composer input,
  #message-composer textarea,
  #message-composer [contenteditable] {
    color: inherit !important;
  }

  [data-theme="light"] #message-composer > :not(button),
  [data-theme="light"] #message-composer input,
  [data-theme="light"] #message-composer textarea,
  [data-theme="light"] #message-composer [contenteditable] {
    color: #202020 !important;
  }

  #message-composer input::placeholder,
  #message-composer textarea::placeholder {
    color: #666666 !important;
  }

  [data-theme="light"] #message-composer input::placeholder,
  [data-theme="light"] #message-composer textarea::placeholder {
    color: #999999 !important;
  }

  /* Composer buttons */
  #message-composer button {
    background: #7c3aed !important;
    color: white !important;
  }

  #message-composer button:hover {
    background: #6d28d9 !important;
  }

  #message-composer button svg {
    fill: white !important;
    stroke: white !important;
    color: white !important;
  }

  #message-composer button svg path {
    fill: white !important;
    stroke: white !important;
  }

  [data-theme="light"] #message-composer button {
    background: #7c3aed !important;
    color: white !important;
  }

  /* Fix negative margin on composer flex container */
  #message-composer .-ml-1\.5,
  #message-composer [class*="-ml-"] {
    margin-left: 0 !important;
  }
  
  /* ===============================
   THREAD OPTIONS - CONTEXT MENU
   =============================== */

  /* Thread options dropdown */
  [role="menu"] {
    background: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 8px 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    min-width: 200px !important;
  }

  [data-theme="light"] [role="menu"] {
    background: white !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* Hide Share and Archive - keep only Rename and Delete */
  [role="menuitem"]:has(svg.lucide-share),
  [role="menuitem"]:has(svg.lucide-share2),
  [role="menuitem"]:has(svg.lucide-archive),
  #share-thread {
    display: none !important;
  }

  /* All visible menu items */
  [role="menuitem"] {
    color: #ececec !important;
    padding: 10px 14px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    background: transparent !important;
    width: 100% !important;
    border: none !important;
    text-align: left !important;
  }

  [data-theme="light"] [role="menuitem"] {
    color: #202020 !important;
  }

  [role="menuitem"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }

  [data-theme="light"] [role="menuitem"]:hover {
    background: rgba(0, 0, 0, 0.05) !important;
  }

  /* Rename button - normal */
  [role="menuitem"]:has(svg.lucide-pencil),
  #rename-thread {
    color: #ececec !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  [role="menuitem"]:has(svg.lucide-pencil):hover,
  #rename-thread:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }

  /* Hide skeleton loader in rename button */
  [role="menuitem"]:has(svg.lucide-pencil) .animate-pulse,
  #rename-thread .animate-pulse {
    display: none !important;
  }

  /* Rename icon alignment and color - make pencil black */
  [role="menuitem"]:has(svg.lucide-pencil) svg,
  #rename-thread svg {
    margin-left: auto !important;
    margin-right: 0 !important;
    color: #000000 !important;
  }

  /* Delete button - RED */
  [role="menuitem"]:has(svg.lucide-trash),
  #delete-thread {
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  [role="menuitem"]:has(svg.lucide-trash):hover,
  #delete-thread:hover {
    background: rgba(239, 68, 68, 0.1) !important;
  }

  [role="menuitem"]:has(svg.lucide-trash) span,
  #delete-thread span {
    color: #ef4444 !important;
  }

  /* Hide skeleton loader in delete button */
  #delete-thread .animate-pulse {
    display: none !important;
  }

  /* Delete icon alignment */
  #delete-thread svg {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* Icons */
  [role="menuitem"] svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  /* Menu divider */
  [role="menu"] > div[class*="divider"],
  [role="menu"] > hr {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    margin: 4px 0 !important;
    border: none !important;
  }

  [data-theme="light"] [role="menu"] > div[class*="divider"],
  [data-theme="light"] [role="menu"] > hr {
    background: rgba(0, 0, 0, 0.1) !important;
  }

  /* ===============================
   WELCOME MESSAGE - CLIENT-SIDE INJECTED
   =============================== */

  #welcome-message-injected {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 900px !important; /* Limit width for better readability */
    padding: 40px 20px !important;
    text-align: center !important;
    animation: fadeIn 0.5s ease-in !important;
    background: transparent !important; /* Transparent to match main background */
    z-index: 1 !important;
    flex-shrink: 0 !important;
    margin: 0 auto 24px auto !important; /* Center horizontally and add space below */
  }

  [data-theme="light"] #welcome-message-injected {
    background: transparent !important;
  }

  .welcome-content {
    max-width: 800px !important;
    margin: 0 auto !important;
    color: #ececec !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }

  [data-theme="light"] .welcome-content {
    color: #202020 !important;
  }

  .welcome-content h1 {
    font-size: 48px !important;
    font-weight: 700 !important;
    margin: 0 0 40px 0 !important;
    color: #ececec !important;
    display: block !important;
    letter-spacing: -0.8px !important;
    line-height: 1.2 !important;
  }

  [data-theme="light"] .welcome-content h1 {
    color: #202020 !important;
  }

  .welcome-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  [data-theme="light"] .welcome-card {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  .welcome-card-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ececec !important;
    margin-bottom: 6px !important;
  }

  [data-theme="light"] .welcome-card-title {
    color: #202020 !important;
  }

  .welcome-card-desc {
    font-size: 13px !important;
    color: #b0b0b0 !important;
    line-height: 1.4 !important;
  }

  [data-theme="light"] .welcome-card-desc {
    color: #666666 !important;
  }

  [data-theme="light"] .welcome-content h1 {
    color: #202020 !important;
  }

  .welcome-content p {
    font-size: 17px !important;
    line-height: 1.7 !important;
    margin: 0 0 32px 0 !important;
    color: #b0b0b0 !important;
    display: block !important;
    font-weight: 400 !important;
  }

  [data-theme="light"] .welcome-content p {
    color: #555555 !important;
  }

  .welcome-content h2 {
    font-size: 19px !important;
    font-weight: 600 !important;
    margin: 0 0 24px 0 !important;
    color: #ececec !important;
    display: block !important;
    letter-spacing: -0.3px !important;
  }

  [data-theme="light"] .welcome-content h2 {
    color: #202020 !important;
  }

  .welcome-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 32px 0 !important;
    display: inline-block !important;
    text-align: left !important;
  }

  .welcome-content li {
    font-size: 16px !important;
    line-height: 2 !important;
    margin: 0 0 8px 0 !important;
    color: #b0b0b0 !important;
    display: block !important;
    text-align: left !important;
    font-weight: 400 !important;
  }

  .welcome-content li:last-child {
    margin-bottom: 0 !important;
  }

  [data-theme="light"] .welcome-content li {
    color: #555555 !important;
  }

  .welcome-question {
    font-size: 17px !important;
    margin: 32px 0 0 0 !important;
    color: #ececec !important;
    display: block !important;
    font-weight: 500 !important;
  }

  [data-theme="light"] .welcome-question {
    color: #202020 !important;
  }

  /* Grid cards for welcome options */
  .welcome-content > div[style*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 700px !important;
  }

  .welcome-content > div[style*="grid"] > div {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .welcome-content > div[style*="grid"] > div:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
  }

  [data-theme="light"] .welcome-content > div[style*="grid"] > div {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
  }

  [data-theme="light"] .welcome-content > div[style*="grid"] > div:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
  }

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

  /* CSS Variables for consistent styling */
  :root {
    --text-sm: 12px;
    --text-sm--line-height: 1.4;
    --spacing: 8px;
    --menu-item-height: 28px;
    --menu-item-border-radius: 8px;
  }

  /* Thread items - ChatGPT style */
  button[data-sidebar="menu-button"] {
    /* Reset all Tailwind classes */
    all: revert !important;

    /* Apply our clean styling */
    display: flex !important;
    align-items: center !important;
    border-radius: var(--menu-item-border-radius) !important;
    padding: 6px 8px !important;
    margin: 0 8px 2px 8px !important;
    background: transparent !important;
    color: #ececec !important;
    font-size: var(--text-sm) !important;
    line-height: var(--text-sm--line-height) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    transition: background 0.2s !important;
    border: none !important;
    text-align: left !important;
    width: calc(100% - 16px) !important;
    position: relative !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    gap: 8px !important;
    min-height: var(--menu-item-height) !important;
    cursor: pointer !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  button[data-sidebar="menu-button"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }

  /* Thread text content - truncate properly */
  button[data-sidebar="menu-button"] > div:first-child {
    display: flex !important;
    min-width: 0 !important;
    flex: 1 !important;
    align-items: center !important;
    gap: 8px !important;
  }

  button[data-sidebar="menu-button"] span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

/* Remove gradient overlay - hide it completely */
button[data-sidebar="menu-button"] > div.absolute {
  display: none !important;
}

button[data-sidebar="menu-button"]:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] button[data-sidebar="menu-button"] {
  color: #202020 !important;
}

[data-theme="light"] button[data-sidebar="menu-button"]:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Light theme CSS variables */
[data-theme="light"] {
  --text-sm: 13px;
  --text-sm--line-height: 1.5;
}

/* Active thread */
button[data-sidebar="menu-button"][data-active="true"] {
  background: rgba(255, 255, 255, 0.1) !important;
  font-weight: 500 !important;
}

[data-theme="light"] button[data-sidebar="menu-button"][data-active="true"] {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #202020 !important;
}

[data-theme="light"] button[data-sidebar="menu-button"][data-active="true"] {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Thread options button - positioned absolutely so it doesn't hide text */
#thread-options.varelas-thread-options-link {
  all: revert !important;

  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  background: transparent !important;
  transition: background 0.2s !important;
  z-index: 100 !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  padding: 0 !important;
  border: none !important;
  cursor: pointer !important;
}

#thread-options.varelas-thread-options-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] #thread-options.varelas-thread-options-link:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Three dots icon color - always visible */
#thread-options.varelas-thread-options-link svg {
  color: #a0a0a0 !important;
  width: 20px !important;
  height: 20px !important;
}

#thread-options.varelas-thread-options-link:hover svg {
  color: #ececec !important;
}

[data-theme="light"] #thread-options.varelas-thread-options-link svg {
  color: #999999 !important;
}

[data-theme="light"] #thread-options.varelas-thread-options-link:hover svg {
  color: #202020 !important;
}

/* Fix pencil/rename button opacity - should not appear disabled */
li[data-sidebar="menu-item"] button[class*="opacity-0"] {
  opacity: 1 !important;
}

li[data-sidebar="menu-item"] button[class*="opacity-50"] {
  opacity: 1 !important;
}

/* ===============================
   MESSAGE ACTIONS STYLING
   =============================== */

/* Hide edit message button */
button.edit-message {
  display: none !important;
}

/* User message container - align to right with space for hidden button */
.step[data-step-type="user_message"] {
  display: flex !important;
  justify-content: flex-end !important;
}

.step[data-step-type="user_message"] > div {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  gap: 8px !important;
  align-items: flex-end !important;
}

/* User message bubble - right aligned */
.step[data-step-type="user_message"] .bg-accent {
  margin-left: auto !important;
  margin-right: 0 !important;
  max-width: 70% !important;
}

/* Add space for hidden button */
.step[data-step-type="user_message"] .bg-accent {
  margin-right: 44px !important;
}

/* ===============================
   RENAME DIALOG STYLING (ChatGPT Style)
   =============================== */

/* Dialog container - ChatGPT style */
[role="dialog"],
[role="dialog"].shadow-lg {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  max-width: 400px !important;
  box-shadow: none !important;
}

[data-theme="light"] [role="dialog"],
[data-theme="light"] [role="dialog"].shadow-lg {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: none !important;
}

/* Dialog title - ChatGPT style */
[role="dialog"] h2 {
  color: #ececec !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  min-height: 24px !important;
  font-size: 0 !important;
}

[role="dialog"] h2::before {
  content: 'Μετονομασία' !important;
  display: inline-block !important;
  font-size: 15px !important;
}

[role="dialog"] h2 > * {
  display: none !important;
}

[data-theme="light"] [role="dialog"] h2 {
  color: #202020 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Dialog description */
[role="dialog"] p {
  color: #a0a0a0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 16px 20px !important;
}

[data-theme="light"] [role="dialog"] p {
  color: #666666 !important;
}

/* Hide skeleton loaders in dialog */
[role="dialog"] .animate-pulse {
  display: none !important;
}

/* Show dialog heading text */
[role="dialog"] h2 {
  min-height: auto !important;
}

/* Dialog label */
[role="dialog"] label {
  color: #ececec !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

[data-theme="light"] [role="dialog"] label {
  color: #202020 !important;
}

/* Dialog input - ChatGPT style */
[role="dialog"] input {
  background: #2a2a2a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ececec !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

[role="dialog"] input::placeholder {
  color: #666666 !important;
}

[role="dialog"] input:focus {
  outline: none !important;
  border-color: #7c3aed !important;
}

[data-theme="light"] [role="dialog"] input {
  background: #f5f5f5 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #202020 !important;
}

[data-theme="light"] [role="dialog"] input::placeholder {
  color: #999999 !important;
}

[data-theme="light"] [role="dialog"] input:focus {
  border-color: #7c3aed !important;
}

/* Dialog buttons container */
[role="dialog"] > div:last-child,
[role="dialog"] > div:has(> button) {
  display: flex !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  justify-content: flex-end !important;
}

[data-theme="light"] [role="dialog"] > div:last-child,
[data-theme="light"] [role="dialog"] > div:has(> button) {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Dialog buttons - ChatGPT style */
[role="dialog"] button {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

/* Cancel button - ChatGPT style */
[role="dialog"] button[type="button"]:not([class*="bg-primary"]):not([class*="lucide"]) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ececec !important;
}

[role="dialog"] button[type="button"]:not([class*="bg-primary"]):not([class*="lucide"]):hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="light"] [role="dialog"] button[type="button"]:not([class*="bg-primary"]):not([class*="lucide"]) {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: #202020 !important;
}

[data-theme="light"] [role="dialog"] button[type="button"]:not([class*="bg-primary"]):not([class*="lucide"]):hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

/* Save button - ChatGPT style */
[role="dialog"] button[class*="bg-primary"] {
  background: #7c3aed !important;
  color: white !important;
  border: none !important;
}

[role="dialog"] button[class*="bg-primary"]:hover {
  background: #6d28d9 !important;
}

/* Close button */
[role="dialog"] button[type="button"][class*="absolute"] {
  color: #ececec !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
}

[role="dialog"] button[type="button"][class*="absolute"]:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] [role="dialog"] button[type="button"][class*="absolute"] {
  color: #202020 !important;
}

[data-theme="light"] [role="dialog"] button[type="button"][class*="absolute"]:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* ===============================
   ALERT DIALOG STYLING (Delete - ChatGPT Style)
   =============================== */

/* Alert dialog container - ChatGPT style */
[role="alertdialog"],
[role="alertdialog"].shadow-lg {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  max-width: 400px !important;
  box-shadow: none !important;
}

[data-theme="light"] [role="alertdialog"],
[data-theme="light"] [role="alertdialog"].shadow-lg {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: none !important;
}

/* Alert dialog title - ChatGPT style */
[role="alertdialog"] h2 {
  color: #ececec !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] [role="alertdialog"] h2 {
  color: #202020 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Alert dialog description - ChatGPT style */
[role="alertdialog"] p {
  color: #a0a0a0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 16px 20px !important;
}

[data-theme="light"] [role="alertdialog"] p {
  color: #666666 !important;
}

/* Hide skeleton loaders in alert dialog */
[role="alertdialog"] .animate-pulse {
  display: none !important;
}

/* Alert dialog buttons container */
[role="alertdialog"] > div:last-child,
[role="alertdialog"] > div:has(> button) {
  display: flex !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  justify-content: flex-end !important;
}

[data-theme="light"] [role="alertdialog"] > div:last-child,
[data-theme="light"] [role="alertdialog"] > div:has(> button) {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Alert dialog buttons - ChatGPT style */
[role="alertdialog"] button {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

/* Cancel button in alert dialog - ChatGPT style */
[role="alertdialog"] button[type="button"]:not([class*="bg-primary"]) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ececec !important;
}

[role="alertdialog"] button[type="button"]:not([class*="bg-primary"]):hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="light"] [role="alertdialog"] button[type="button"]:not([class*="bg-primary"]) {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: #202020 !important;
}

[data-theme="light"] [role="alertdialog"] button[type="button"]:not([class*="bg-primary"]):hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

/* Delete/Confirm button in alert dialog - RED (ChatGPT style) */
[role="alertdialog"] button[class*="bg-primary"] {
  background: #ef4444 !important;
  color: white !important;
  border: none !important;
}

[role="alertdialog"] button[class*="bg-primary"]:hover {
  background: #dc2626 !important;
}

/* ===============================
   SCROLLBAR STYLING
   =============================== */

/* Webkit scrollbar (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  transition: background 0.2s !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* Light theme scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Firefox scrollbar */
* {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
  scrollbar-width: thin !important;
}

[data-theme="light"] * {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}