/* C:/Users/DanDavis/AppData/Local/Temp/tmp-105072-DGQdiavY7PDI/SATORISLABS.AI/wwwroot/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  * {
    @apply transition-colors duration-200;
  }
  html {
    @apply antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    @apply bg-light-bg text-light-text;
  }
  body.dark {
    @apply bg-dark-bg text-dark-text;
  }
  ::-webkit-scrollbar {
    @apply w-1.5 h-1.5;
  }
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-700 rounded-full;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-600;
  }
}
@layer components {
  .panel {
    @apply bg-light-surface dark:bg-dark-surface border-light-border dark:border-dark-border relative overflow-hidden;
  }
  .panel::before {
    content: "";
    @apply absolute inset-0 bg-gradient-to-b from-white/5 to-transparent pointer-events-none;
  }
  .folder-item {
    @apply flex items-center gap-3 px-4 py-3 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-800/50 cursor-pointer rounded-lg mx-3 my-1 transition-all duration-150 ease-out relative overflow-hidden;
  }
  .folder-item::before {
    content: "";
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent translate-x-[-200%] hover:translate-x-[200%] transition-transform duration-700 ease-out;
  }
  .folder-item.active {
    @apply bg-accent-blue/10 dark:bg-accent-blue/20 text-accent-blue dark:text-accent-blue shadow-sm;
  }
  .folder-item .icon {
    @apply w-4 h-4 flex-shrink-0 opacity-60 transition-opacity;
  }
  .folder-item:hover .icon {
    @apply opacity-100;
  }
  .folder-item .count {
    @apply ml-auto text-xs text-light-muted dark:text-dark-muted bg-gray-100 dark:bg-gray-800 px-2.5 py-1 rounded-full font-medium transition-all duration-150;
  }
  .folder-item:hover .count {
    @apply bg-gray-200 dark:bg-gray-700;
  }
  .folder-item.nested-1 {
    @apply ml-6;
  }
  .folder-item.nested-2 {
    @apply ml-10;
  }
  .folder-item.nested-3 {
    @apply ml-14;
  }
  .folder-section {
    @apply px-4 py-2 mt-3 first:mt-0;
  }
  .folder-section-title {
    @apply text-xs font-semibold text-light-muted dark:text-dark-muted uppercase tracking-wider mb-2 px-1;
  }
  .resource-item {
    @apply flex items-start gap-3 p-4 hover:bg-gray-50 dark:hover:bg-gray-800/30 border-b border-light-border dark:border-dark-border cursor-pointer transition-all duration-150 relative group;
  }
  .resource-item::after {
    content: "";
    @apply absolute left-0 top-0 bottom-0 w-0.5 bg-accent-blue opacity-0 group-hover:opacity-100 transition-opacity duration-200;
  }
  .resource-item.selected {
    @apply bg-accent-blue/5 dark:bg-accent-blue/10 border-l-2 border-accent-blue;
  }
  .resource-item .title {
    @apply font-medium text-sm text-light-text dark:text-dark-text group-hover:text-accent-blue transition-colors;
  }
  .resource-item .meta {
    @apply text-xs text-light-muted dark:text-dark-muted mt-1;
  }
  .input-premium {
    @apply w-full px-4 py-2.5 bg-white dark:bg-dark-input border border-light-border dark:border-dark-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent-blue/30 focus:border-accent-blue placeholder:text-light-muted dark:placeholder:text-dark-muted transition-all duration-200;
  }
  .search-bar {
    @apply relative;
  }
  .search-bar input {
    @apply input-premium pl-10 backdrop-blur-sm bg-white/90 dark:bg-dark-input/90;
  }
  .search-bar .icon {
    @apply absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-light-muted dark:text-dark-muted;
  }
  .btn-primary {
    @apply px-4 py-2 bg-accent-blue text-white rounded-lg font-medium text-sm hover:bg-accent-blue/90 active:scale-[0.98] transition-all duration-150 shadow-sm hover:shadow-md;
  }
  .btn-secondary {
    @apply px-4 py-2 bg-gray-100 dark:bg-gray-800 text-light-text dark:text-dark-text rounded-lg font-medium text-sm hover:bg-gray-200 dark:hover:bg-gray-700 active:scale-[0.98] transition-all duration-150;
  }
  .btn-ghost {
    @apply px-3 py-1.5 text-light-text dark:text-dark-text rounded-lg text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-150;
  }
  .tab-item {
    @apply px-4 py-2 text-sm font-medium text-light-muted dark:text-dark-muted border-b-2 border-transparent hover:text-light-text dark:hover:text-dark-text transition-all duration-200 cursor-pointer;
  }
  .tab-item.active {
    @apply text-accent-blue border-accent-blue;
  }
  .content-area {
    @apply prose prose-sm dark:prose-invert max-w-none prose-headings:font-semibold prose-p:text-light-text dark:prose-p:text-dark-text prose-a:text-accent-blue prose-a:no-underline hover:prose-a:underline prose-pre:bg-gray-100 dark:prose-pre:bg-gray-900 prose-code:text-accent-blue prose-code:bg-gray-100 dark:prose-code:bg-gray-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:font-normal;
  }
  .attachment-card {
    @apply flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800/50 border border-light-border dark:border-dark-border rounded-lg hover:shadow-sm transition-all duration-200 group cursor-pointer;
  }
  .attachment-card:hover {
    @apply bg-gray-100 dark:bg-gray-800 border-accent-blue/30;
  }
  .attachment-icon {
    @apply w-10 h-10 rounded-lg bg-accent-blue/10 dark:bg-accent-blue/20 flex items-center justify-center text-accent-blue;
  }
  .badge {
    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium;
  }
  .badge-success {
    @apply bg-accent-green/10 text-accent-green dark:bg-accent-green/20;
  }
  .badge-warning {
    @apply bg-accent-amber/10 text-accent-amber dark:bg-accent-amber/20;
  }
  .badge-error {
    @apply bg-accent-red/10 text-accent-red dark:bg-accent-red/20;
  }
  .divider {
    @apply border-t border-light-border dark:border-dark-border my-4;
  }
  .loading-spinner {
    @apply animate-spin h-5 w-5 text-accent-blue;
  }
  .tooltip {
    @apply absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 dark:bg-gray-700 rounded-md shadow-lg pointer-events-none opacity-0 transition-opacity duration-200;
  }
  .tooltip.show {
    @apply opacity-100;
  }
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-blue focus-visible:ring-offset-2 dark:focus-visible:ring-offset-dark-bg;
  }
  .glass {
    @apply backdrop-blur-md bg-white/80 dark:bg-dark-surface/80 border border-white/20 dark:border-gray-700/30 shadow-xl;
  }
}
@layer utilities {
  .selection-blue::selection {
    @apply bg-accent-blue/20 text-accent-blue;
  }
  .shadow-smooth {
    @apply shadow-sm hover:shadow-md transition-shadow duration-200;
  }
  .hover-lift {
    @apply hover:-translate-y-0.5 transition-transform duration-200;
  }
  .animate-gentle {
    animation: gentle 3s ease-in-out infinite;
  }
  @keyframes gentle {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2px);
    }
  }
  .folder-list .folder-header {
    @apply py-2.5 px-3 my-1 transition-all duration-150;
  }
  .folder-list .folder {
    @apply mb-1.5;
  }
  .folder-list .subfolders {
    @apply ml-6 mt-1 mb-1;
  }
  .folder-list .subfolders .folder-header {
    @apply py-2 px-3;
  }
  .folder-list .subfolders {
    @apply relative;
  }
  .folder-list .subfolders::before {
    content: "";
    @apply absolute left-2 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700;
  }
  #Content-view-container {
    @apply overflow-x-hidden overflow-y-auto;
  }
  #Content-view-container > * {
    @apply max-w-full;
  }
  .Content-accordion,
  .content-accordion {
    @apply overflow-hidden;
  }
  .Content-accordion-content,
  .accordion-content {
    @apply overflow-x-auto overflow-y-hidden max-w-full p-4;
  }
  .Content-accordion-content *,
  .accordion-content *,
  #Content-view-container * {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .Content-accordion-content table,
  .accordion-content table,
  #Content-view-container table {
    @apply block overflow-x-auto whitespace-nowrap;
  }
  .Content-accordion-content img,
  .accordion-content img,
  #Content-view-container img {
    @apply max-w-full h-auto;
  }
  .Content-accordion-content .badge,
  .accordion-content .badge,
  #Content-view-container .badge {
    @apply inline-flex max-w-full;
  }
  #chatMessages {
    @apply px-6 py-8 max-w-6xl mx-auto;
  }
  .ai-response-content {
    @apply text-gray-100 leading-relaxed;
  }
  .ai-response-content h1 {
    @apply text-2xl font-bold mb-4 text-white;
  }
  .ai-response-content h2 {
    @apply text-xl font-semibold mb-3 text-white border-b border-gray-700 pb-2;
  }
  .ai-response-content h3 {
    @apply text-lg font-semibold mb-3 text-gray-100;
  }
  .ai-response-content p {
    @apply mb-4 text-gray-200 leading-7;
  }
  .ai-response-content strong {
    @apply font-semibold text-white;
  }
  .ai-response-content em {
    @apply italic text-gray-300;
  }
  .ai-response-content ul {
    @apply mb-4 ml-6 space-y-2 list-none;
  }
  .ai-response-content ul li {
    @apply relative pl-6 text-gray-200;
  }
  .ai-response-content ul li::before {
    content: "\2022";
    @apply absolute left-0 text-purple-400 text-lg;
  }
  .ai-response-content ol {
    @apply mb-4 ml-6 space-y-2 list-none;
  }
  .ai-response-content ol {
    counter-reset: list-counter;
  }
  .ai-response-content ol li {
    @apply relative pl-6 text-gray-200;
    counter-increment: list-counter;
  }
  .ai-response-content ol li::before {
    content: counter(list-counter) ".";
    @apply absolute left-0 text-purple-400 font-semibold;
  }
  .ai-response-content hr {
    @apply my-6 border-0 h-px bg-gradient-to-r from-transparent via-gray-600 to-transparent;
  }
  .ai-response-content code {
    @apply px-2 py-0.5 bg-gray-800 text-cyan-400 rounded text-sm font-mono;
  }
  .ai-response-content pre {
    @apply mb-4 p-4 bg-gray-900 rounded-lg overflow-x-auto border border-gray-700;
  }
  .ai-response-content pre code {
    @apply p-0 bg-transparent text-gray-300;
  }
  .ai-response-content a {
    @apply text-blue-400 hover:text-blue-300 underline underline-offset-2 transition-colors;
  }
  .ai-response-content blockquote {
    @apply pl-4 border-l-4 border-purple-500 italic text-gray-300 my-4;
  }
  .ai-response-content table {
    @apply w-full mb-4 border-collapse;
  }
  .ai-response-content th {
    @apply bg-gray-800 text-gray-100 font-semibold text-left p-3 border-b-2 border-gray-700;
  }
  .ai-response-content td {
    @apply p-3 border-b border-gray-700 text-gray-200;
  }
  .ai-response-content tr:hover {
    @apply bg-gray-800/50;
  }
  .typing-indicator {
    @apply flex gap-1.5 px-4 py-2;
  }
  .typing-indicator span {
    @apply w-2 h-2 bg-purple-400 rounded-full;
    animation: pulse 1.4s ease-in-out infinite;
  }
  .typing-indicator span:nth-child(1) {
    animation-delay: 0s;
  }
  .typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
  }
  .typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
  }
  @keyframes pulse {
    0%, 60%, 100% {
      opacity: 0.3;
      transform: scale(1);
    }
    30% {
      opacity: 1;
      transform: scale(1.2);
    }
  }
}