@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* First, reset Prism's default theme */
code[class*='language-'],
pre[class*='language-'] {
  color: #d4d4d4;
  background: none;
  text-shadow: none;
  font-family: 'Fira Code', Monaco, 'Courier New', Courier, monospace;
  font-size: 14px;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 2;
}

/* Custom syntax colors */
.token.comment {
  color: #6a9955;
}

.token.keyword {
  color: #ff79c6;
}

.token.string {
  color: #6ace90;
}

.token.function {
  color: #61afef;
}

.token.number {
  color: #b5cea8;
}

.token.operator {
  color: #ff79c6;
}

.token.class-name {
  color: #4ec9b0;
}

.token.constant {
  color: #ff79c6;
}

.token.punctuation {
  color: #d4d4d4;
}

.token.property {
  color: #9cdcfe;
}

.token.parameter {
  color: #9cdcfe;
}

.token.boolean {
  color: #569cd6;
}

.token.tag {
  color: #ff79c6;
}

.token.attr-name {
  color: #9cdcfe;
}

.token.attr-value {
  color: #2cce71;
}

/* Keep your existing line number styles */
.editor {
  counter-reset: line;
}

.editor textarea,
.editor pre {
  line-height: 1.5;
  min-height: 100vh;
}

.editor pre {
  position: relative;
}

.editor pre > code {
  display: block;
}

.editor pre > code > span {
  display: block;
  line-height: 1.5;
  position: relative;
}

.editor pre > code > span:before {
  counter-increment: line;
  content: counter(line);
  position: absolute;
  left: -45px;
  width: 35px;
  text-align: right;
  color: #666;
  opacity: 0.5;
  font-size: 14px;
  user-select: none;
}

/* Ensure line numbers are visible at the bottom */
.editor pre > code > span:last-child {
  min-height: 1.5em; /* Match line-height */
  padding-bottom: 1px; /* Force the last line to have height */
}

/* Remove outline on editor focus */
.editor textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.editor textarea {
  border: none !important;
  outline: none !important;
}

.terminal-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.terminal-scrollbar::-webkit-scrollbar {
  width: 7px;
}

.terminal-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.terminal-scrollbar::-webkit-scrollbar-thumb {
  background-color: #424242;
  border-radius: 0px;
  cursor: pointer;
  transition: all;
  transition-duration: 600ms;
}

.terminal-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #42424288;
}

.terminal-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* scrollbar for ai chat */

.ai-chat-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.ai-chat-scrollbar::-webkit-scrollbar {
  width: 9px;
  margin-right: 2px;
}

.ai-chat-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-scrollbar::-webkit-scrollbar-thumb {
  background-color: #383838c0;
  border-radius: 0px;
  margin-right: 2px;
  cursor: pointer;
  transition: all;
  transition-duration: 600ms;
}

.ai-chat-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(66, 66, 66, 0.842);
}

.ai-chat-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* Fixed terminal styles for better scrolling */
.terminal-main-container {
  display: flex;
  flex-direction: column;
  height: 95vh;
  width: 100%;
}

.terminal-content-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

* {
  letter-spacing: 0.3px;
}

/* custom scrollbar */

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 9px;
  margin-right: 2px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #383838c0;
  border-radius: 0px;
  margin-right: 2px;
  cursor: pointer;
  transition: all;
  transition-duration: 600ms;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(66, 66, 66, 0.842);
}

.custom-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}
