app/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "./styles/theme.css";
@import "highlight.js/styles/github.css";

/* Tailwind base layer for compatibility */
@layer base {

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

/* Custom variant for dark mode */
@custom-variant dark (&:is(.dark *));

/* CSS Variables for theming */
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@theme inline {
  /* Custom breakpoints */
  --breakpoint-xs: 480px;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }

    to {
      height: 0;
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-inter, 'Inter'), 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Ubuntu', ui-sans-serif, system-ui, sans-serif;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Glassmorphism utilities */
.glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.glass-dark {
  background: rgba(20, 20, 20, 0.75);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.dock-glass {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* App Icon Styles */
.app-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-icon:hover {
  transform: scale(1.15) translateY(-8px);
}

.app-icon:active {
  transform: scale(0.95);
}

/* Window Animations */
.window-transition {
  transition: opacity 0.2s ease-out;
}

.window-hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* Traffic Lights */
.traffic-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.traffic-close {
  background-color: #ff5f56;
  border: 1px solid #e0443e;
}

.traffic-min {
  background-color: #ffbd2e;
  border: 1px solid #dea123;
}

.traffic-max {
  background-color: #27c93f;
  border: 1px solid #1aab29;
}

.traffic-light:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
}

.traffic-close:hover::after {
  content: '×';
}

.traffic-min:hover::after {
  content: '−';
}

.traffic-max:hover::after {
  content: '+';
}

/* Text Selection Styling */
::selection {
  background: rgba(59, 130, 246, 0.3);
  color: inherit;
}

::-moz-selection {
  background: rgba(59, 130, 246, 0.3);
  color: inherit;
}

/* Enable text selection for specific elements */
.select-text {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  cursor: text;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

/* Desktop Icon Grid */
.desktop-icon {
  @apply flex flex-col items-center gap-1.5 cursor-pointer transition-all;
}

.desktop-icon:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

.desktop-icon-label {
  @apply text-xs text-white font-medium px-2 py-0.5 rounded;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.desktop-icon:hover .desktop-icon-label {
  background: rgba(0, 0, 0, 0.5);
}

/* macOS style window */
.macos-window {
  @apply rounded-xl shadow-2xl overflow-hidden;
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.macos-window-header {
  @apply h-10 flex items-center px-4 justify-between;
  background: linear-gradient(to bottom, #f6f6f6, #e8e8e8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Dock styles */
.dock-container {
  @apply fixed bottom-4 left-0 right-0 flex justify-center z-50;
}

.dock-item {
  @apply relative flex flex-col items-center gap-1;
}

.dock-dot {
  @apply w-1 h-1 rounded-full mt-1 opacity-0 transition-opacity;
  background: rgba(0, 0, 0, 0.6);
}

.dock-item:hover .dock-dot {
  @apply opacity-100;
}

/* Mobile & Tablet Responsive Styles */
@media (max-width: 1024px) {
  body {
    touch-action: pan-x pan-y;
    user-select: auto;
  }

  /* Don't force windows to be full screen - keep them contained */
  .macos-window {
    @apply rounded-lg shadow-xl;
    max-height: calc(100vh - 140px) !important;
  }

  /* Adjust dock for mobile */
  .dock-container {
    @apply bottom-0 px-2;
  }

  .dock-glass {
    @apply rounded-t-2xl rounded-b-none;
    padding: 0.5rem 0.75rem;
    max-height: 70px;
  }

  /* Dock icons smaller on mobile */
  .dock-item {
    @apply w-10 h-10 sm:w-12 sm:h-12;
  }

  /* Desktop icons visible on mobile now */
  .desktop-icon {
    display: flex !important;
    @apply w-16 h-16 sm:w-20 sm:h-20;
  }

  /* Desktop icon labels smaller on mobile */
  .desktop-icon-label {
    @apply text-[9px] sm:text-[10px];
  }

  /* Adjust traffic lights for touch - make them clickable */
  .traffic-light {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    @apply cursor-pointer;
  }

  /* Ensure traffic lights are always on top and show symbols */
  .traffic-light::after {
    font-size: 14px;
    opacity: 1;
  }
}

/* Landscape mobile optimization */
@media (max-width: 1024px) and (orientation: landscape) {

  /* Top bar more compact */
  .macos-window-header {
    @apply h-10 px-3;
  }

  /* Keep traffic lights larger for touch in landscape */
  .traffic-light {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  /* Dock compact in landscape */
  .dock-container {
    @apply bottom-0;
  }

  .dock-glass {
    padding: 0.25rem 0.75rem;
    max-height: 60px;
  }

  /* Windows should leave space for dock and topbar in landscape */
  .macos-window {
    max-height: calc(100vh - 100px) !important;
  }

  /* Scrollbars thinner on mobile */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}

/* Portrait mobile optimization */
@media (max-width: 768px) and (orientation: portrait) {

  /* Stack dock items more compactly */
  .dock-item {
    @apply gap-0;
  }

  /* Adjust font sizes for mobile */
  .desktop-icon-label {
    @apply text-[10px];
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {

  /* Larger touch targets - 44px is Apple's recommended minimum */
  .traffic-light {
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    touch-action: manipulation;
  }

  /* Always show traffic light symbols on touch devices */
  .traffic-close::after {
    content: '×' !important;
    opacity: 0.7;
  }

  .traffic-min::after {
    content: '−' !important;
    opacity: 0.7;
  }

  .traffic-max::after {
    content: '+' !important;
    opacity: 0.7;
  }

  /* Better tap feedback */
  .app-icon:active {
    transform: scale(0.90);
  }

  .dock-item:active {
    transform: scale(0.95);
  }

  /* Remove hover effects on touch devices */
  .app-icon:hover {
    transform: none;
  }

  .desktop-icon:hover {
    background-color: transparent;
    box-shadow: none;
  }

  /* Ensure windows are touch-scrollable */
  .macos-window {
    -webkit-overflow-scrolling: touch;
  }
}

/* Markdown Content Styles */
.markdown-content {
  @apply text-sm leading-relaxed;
}

.markdown-content>* {
  @apply mb-3;
}

.markdown-content>*:last-child {
  @apply mb-0;
}

/* Headings */
.markdown-content h1 {
  @apply text-xl font-bold mb-3 mt-4;
}

.markdown-content h2 {
  @apply text-lg font-bold mb-2 mt-3;
}

.markdown-content h3 {
  @apply text-base font-bold mb-2 mt-3;
}

.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  @apply text-sm font-bold mb-2 mt-2;
}

/* Paragraphs */
.markdown-content p {
  @apply mb-3 whitespace-pre-wrap;
}

/* Lists */
.markdown-content ul {
  @apply list-disc list-inside mb-3 space-y-1;
}

.markdown-content ol {
  @apply list-decimal list-inside mb-3 space-y-1;
}

.markdown-content li {
  @apply ml-2;
}

.markdown-content li>ul,
.markdown-content li>ol {
  @apply ml-4 mt-1;
}

/* Links */
.markdown-content a {
  @apply text-blue-600 hover:text-blue-800 underline;
}

/* Code */
.markdown-content code {
  @apply px-1.5 py-0.5 rounded text-xs font-mono;
  background: rgba(0, 0, 0, 0.05);
}

.markdown-content pre {
  @apply p-3 rounded-lg overflow-x-auto mb-3 text-xs;
  background: rgba(0, 0, 0, 0.05);
}

.markdown-content pre code {
  @apply p-0 bg-transparent;
}

/* Blockquotes */
.markdown-content blockquote {
  @apply pl-4 border-l-4 border-gray-300 italic mb-3;
  color: rgba(0, 0, 0, 0.7);
}

/* Tables */
.markdown-content table {
  @apply w-full border-collapse mb-3 text-xs;
}

.markdown-content th,
.markdown-content td {
  @apply border border-gray-300 px-2 py-1 text-left;
}

.markdown-content th {
  @apply bg-gray-100 font-bold;
}

/* Horizontal Rule */
.markdown-content hr {
  @apply my-4 border-t border-gray-300;
}

/* Images */
.markdown-content img {
  @apply max-w-full h-auto rounded-lg mb-3;
}

/* Strong and Emphasis */
.markdown-content strong {
  @apply font-bold;
}

.markdown-content em {
  @apply italic;
}

/* Strikethrough */
.markdown-content del {
  @apply line-through;
}

/* User message markdown (white text on blue background) */
.bg-blue-600 .markdown-content code {
  background: rgba(255, 255, 255, 0.2);
}

.bg-blue-600 .markdown-content pre {
  background: rgba(255, 255, 255, 0.1);
}

.bg-blue-600 .markdown-content a {
  @apply text-white underline;
}

.bg-blue-600 .markdown-content blockquote {
  @apply border-white/30;
  color: rgba(255, 255, 255, 0.9);
}

/* Messages app markdown styles (iMessage-style bubbles) */
.message-bubble-sent .markdown-content code {
  background: rgba(255, 255, 255, 0.2);
}

.message-bubble-sent .markdown-content pre {
  background: rgba(255, 255, 255, 0.15);
}

.message-bubble-sent .markdown-content a {
  @apply text-white underline;
}

.message-bubble-sent .markdown-content blockquote {
  @apply border-white/30;
  color: rgba(255, 255, 255, 0.95);
}

.message-bubble-sent .markdown-content th,
.message-bubble-sent .markdown-content td {
  @apply border-white/20;
}

.message-bubble-sent .markdown-content th {
  background: rgba(255, 255, 255, 0.1);
}

/* Dark message bubbles (received messages) */
.message-bubble-received .markdown-content code {
  background: rgba(255, 255, 255, 0.1);
}

.message-bubble-received .markdown-content pre {
  background: rgba(0, 0, 0, 0.3);
}

.message-bubble-received .markdown-content a {
  @apply text-blue-400 underline;
}

.message-bubble-received .markdown-content blockquote {
  @apply border-gray-500;
  color: rgba(255, 255, 255, 0.8);
}

.message-bubble-received .markdown-content th,
.message-bubble-received .markdown-content td {
  @apply border-gray-600;
}

.message-bubble-received .markdown-content th {
  background: rgba(255, 255, 255, 0.05);
}