/* Minimal Design System - Essential Only */
:root {
  /* Layout */
  --sidebar-width-collapsed: 4rem;
  --sidebar-width-expanded: 16rem;
  --header-height: 4rem;
  
  /* Colors */
  --bg-primary: #141516;
  --bg-secondary: #1e1f20;
  --bg-chat: #191a1b;
  --bg-feed: #131314;
  
  /* Transitions */
  --transition: 300ms ease-in-out;
}

/* Essential Layout Classes */
.sidebar-collapsed {
  width: var(--sidebar-width-collapsed);
  position: relative;
}

.sidebar-expanded {
  width: var(--sidebar-width-expanded);
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.sidebar {
  background-color: var(--bg-secondary);
  color: #9ca3af;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  transition: all var(--transition);
  flex-shrink: 0;
  height: 100%;
}

.chat-pane {
  background-color: var(--bg-chat);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
}

.feed-pane {
  background-color: var(--bg-feed);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* Hide scrollbars for clean design */
.no-scrollbar {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Subtle resizer edge */
.resizer-edge {
  border-left: 1px solid rgba(55, 65, 81, 0.3);
  cursor: ew-resize;
  transition: all 0.2s ease;
}

.resizer-edge:hover {
  border-left-color: rgba(55, 65, 81, 0.5);
}

/* Prevent modal flashing */
[x-cloak] {
  display: none !important;
}

/* Ensure modals are hidden by default */
.modal-hidden {
  display: none !important;
}

/* Chat input pill styling - remove ALL unwanted colors and borders */
#chat-input-area {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

#chat-input-area:focus {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Remove any browser default styling on the pill container */
.chat-pill-container {
  background-color: #2a2a2a !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.chat-pill-container:focus-within {
  background-color: #2a2a2a !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.chat-pill-container:hover {
  background-color: #2a2a2a !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.chat-pill-container:active {
  background-color: #2a2a2a !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Rich text toolbar styling - integrated into pill */
.rich-text-toolbar {
  background-color: #2a2a2a !important;
  border: none !important;
  box-shadow: none !important;
}

/* Expanding pill container */
.expanding-pill-container {
  transition: all 0.3s ease;
}

/* Immediate border radius changes - no transitions */
.chat-pill-container {
  transition: none;
}

.rich-text-toolbar {
  transition: none;
}

.image-preview-container {
  transition: none;
}

/* Global overrides to eliminate any unwanted borders */
* {
  box-sizing: border-box;
}

/* Only override form elements within the chat input area */
#chat-input-area {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#chat-input-area:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Specific overrides for the chat input area */
textarea#chat-input-area,
textarea#chat-input-area:focus,
textarea#chat-input-area:hover,
textarea#chat-input-area:active {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Image preview container styling */
.image-preview-container {
  background-color: #2a2a2a !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.image-preview-container:hover,
.image-preview-container:focus,
.image-preview-container:active {
  background-color: #2a2a2a !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Only target the pill wrapper specifically */
.pill-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Only target the specific chat input container */
.chat-input-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Global card styling for consistency across all pages */
.card {
  background-color: #1e1f20;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(1.01);
}

.card-borderless {
  background-color: #1e1f20;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-borderless:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(1.01);
}