@import "tailwindcss";
@import "./styles/grid-layout.css";

/* xterm.js 全宽度样式 */
.xterm-full-width {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.xterm-full-width .xterm {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.xterm-full-width .xterm-viewport {
  width: 100% !important;
  background-color: transparent !important;
}

.xterm-full-width .xterm-screen {
  width: 100% !important;
  height: 100% !important;
}

.xterm-full-width .xterm-helper-textarea {
  width: 100% !important;
}

.xterm-full-width canvas {
  width: 100% !important;
  display: block !important;
}

/* xterm.js 修复右侧边框 - 确保所有子元素完全填充 */
.xterm-full-width .xterm-rows {
  width: 100% !important;
}

/* 确保 xterm 容器内部元素正确对齐 */
.xterm-full-width .xterm-scroll-area {
  width: 100% !important;
}

/* 强制覆盖 xterm 内联样式 */
.xterm-full-width > div {
  width: 100% !important;
  height: 100% !important;
}

/* 移除任何可能的内边距或边距 */
.xterm-full-width .terminal {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Custom scrollbar hiding */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Custom thin scrollbar */
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.3);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: rgba(155, 155, 155, 0.5);
}

/* Scrollbar colors */
.scrollbar-thumb-muted::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.3);
}

.hover\:scrollbar-thumb-muted-foreground:hover::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.6);
}

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

/* Custom animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Animation utilities */
.animate-spin-slow {
  animation: spin 3s linear infinite;
}

/* Dark theme configuration */
@theme {
  /* Colors */
  --color-background: oklch(0.12 0.01 240);
  --color-foreground: oklch(0.98 0.01 240);
  --color-card: oklch(0.14 0.01 240);
  --color-card-foreground: oklch(0.98 0.01 240);
  --color-popover: oklch(0.12 0.01 240);
  --color-popover-foreground: oklch(0.98 0.01 240);
  --color-primary: oklch(0.98 0.01 240);
  --color-primary-foreground: oklch(0.17 0.01 240);
  --color-secondary: oklch(0.16 0.01 240);
  --color-secondary-foreground: oklch(0.98 0.01 240);
  --color-muted: oklch(0.16 0.01 240);
  --color-muted-foreground: oklch(0.68 0.01 240);
  --color-accent: oklch(0.16 0.01 240);
  --color-accent-foreground: oklch(0.98 0.01 240);
  --color-destructive: oklch(0.6 0.2 25);
  --color-destructive-foreground: oklch(0.98 0.01 240);
  --color-border: oklch(0.16 0.01 240);
  --color-input: oklch(0.16 0.01 240);
  --color-ring: oklch(0.52 0.015 240);
  
  /* Additional colors for status messages */
  --color-green-500: oklch(0.72 0.20 142);
  --color-green-600: oklch(0.64 0.22 142);

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-base: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Fonts */
  --font-sans: "Maple Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-mono: "Maple Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Theme Variations */
/* Default is dark theme - already defined above */

/* Light Theme - Enhanced Contrast */
.theme-light {
  --color-background: oklch(0.99 0.005 240);
  --color-foreground: oklch(0.08 0.01 240);
  --color-card: oklch(0.97 0.005 240);
  --color-card-foreground: oklch(0.08 0.01 240);
  --color-popover: oklch(0.99 0.005 240);
  --color-popover-foreground: oklch(0.08 0.01 240);
  --color-primary: oklch(0.08 0.01 240);
  --color-primary-foreground: oklch(0.99 0.005 240);
  --color-secondary: oklch(0.95 0.005 240);
  --color-secondary-foreground: oklch(0.08 0.01 240);
  --color-muted: oklch(0.95 0.005 240);
  --color-muted-foreground: oklch(0.45 0.01 240);
  --color-accent: oklch(0.95 0.005 240);
  --color-accent-foreground: oklch(0.08 0.01 240);
  --color-destructive: oklch(0.6 0.2 25);
  --color-destructive-foreground: oklch(0.99 0.005 240);
  --color-border: oklch(0.85 0.005 240);
  --color-input: oklch(0.85 0.005 240);
  --color-ring: oklch(0.52 0.015 240);
  
  /* Additional colors for status messages */
  --color-green-500: oklch(0.62 0.20 142);
  --color-green-600: oklch(0.54 0.22 142);
}

/* Gray Theme */
.theme-gray {
  --color-background: oklch(0.22 0.01 240);
  --color-foreground: oklch(0.98 0.01 240);
  --color-card: oklch(0.26 0.01 240);
  --color-card-foreground: oklch(0.98 0.01 240);
  --color-popover: oklch(0.22 0.01 240);
  --color-popover-foreground: oklch(0.98 0.01 240);
  --color-primary: oklch(0.98 0.01 240);
  --color-primary-foreground: oklch(0.22 0.01 240);
  --color-secondary: oklch(0.30 0.01 240);
  --color-secondary-foreground: oklch(0.98 0.01 240);
  --color-muted: oklch(0.30 0.01 240);
  --color-muted-foreground: oklch(0.70 0.01 240);
  --color-accent: oklch(0.30 0.01 240);
  --color-accent-foreground: oklch(0.98 0.01 240);
  --color-destructive: oklch(0.6 0.2 25);
  --color-destructive-foreground: oklch(0.98 0.01 240);
  --color-border: oklch(0.30 0.01 240);
  --color-input: oklch(0.30 0.01 240);
  --color-ring: oklch(0.60 0.015 240);
  
  /* Additional colors for status messages */
  --color-green-500: oklch(0.72 0.20 142);
  --color-green-600: oklch(0.64 0.22 142);
}

/* White Theme (High Contrast Light) */
.theme-white {
  --color-background: oklch(1.0 0 240);
  --color-foreground: oklch(0.0 0 240);
  --color-card: oklch(0.98 0.01 240);
  --color-card-foreground: oklch(0.0 0 240);
  --color-popover: oklch(1.0 0 240);
  --color-popover-foreground: oklch(0.0 0 240);
  --color-primary: oklch(0.0 0 240);
  --color-primary-foreground: oklch(1.0 0 240);
  --color-secondary: oklch(0.96 0.01 240);
  --color-secondary-foreground: oklch(0.0 0 240);
  --color-muted: oklch(0.96 0.01 240);
  --color-muted-foreground: oklch(0.35 0.01 240);
  --color-accent: oklch(0.96 0.01 240);
  --color-accent-foreground: oklch(0.0 0 240);
  --color-destructive: oklch(0.55 0.25 25);
  --color-destructive-foreground: oklch(1.0 0 240);
  --color-border: oklch(0.85 0.01 240);
  --color-input: oklch(0.85 0.01 240);
  --color-ring: oklch(0.40 0.015 240);
  
  /* Additional colors for status messages */
  --color-green-500: oklch(0.55 0.25 142);
  --color-green-600: oklch(0.47 0.27 142);
}

/* Custom Theme - CSS variables will be set dynamically by ThemeContext */
.theme-custom {
  /* Custom theme variables are applied dynamically via JavaScript */
}

/* Reset and base styles */
* {
  border-color: var(--color-border);
}

html {
  color-scheme: dark;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  /* Optimize Maple Mono rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga" 1, "calt" 1;
  letter-spacing: -0.01em;
}

/* Placeholder text styling */
input::placeholder,
textarea::placeholder {
  color: var(--color-muted-foreground);
  opacity: 0.6;
}

/* Cursor pointer for all interactive elements */
button,
a,
[role="button"],
[role="link"],
[role="menuitem"],
[role="tab"],
[tabindex]:not([tabindex="-1"]),
.cursor-pointer {
  cursor: pointer;
}

/* Ensure disabled elements don't have pointer cursor */
button:disabled,
[disabled],
.disabled {
  cursor: not-allowed !important;
}

/* Remove all focus styles globally */
* {
  outline: none !important;
  outline-offset: 0 !important;
}

*:focus,
*:focus-visible,
*:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* Specifically remove focus styles from form elements */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
[role="combobox"]:focus,
[role="combobox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--color-input) !important;
}

/* Remove ring styles */
.ring-0,
.ring-1,
.ring-2,
.ring,
.ring-offset-0,
.ring-offset-1,
.ring-offset-2,
.ring-offset {
  box-shadow: none !important;
}

/* Custom utilities */
@utility animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  animation-fill-mode: both;
}

@utility animate-out {
  animation-name: exit;
  animation-duration: 150ms;
  animation-fill-mode: both;
}

@utility line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

/* Markdown Editor Theme-aware Styles */
[data-color-mode="dark"],
.theme-dark [data-color-mode="dark"],
.theme-gray [data-color-mode="dark"] {
  --color-border-default: rgb(48, 54, 61);
  --color-canvas-default: rgb(13, 17, 23);
  --color-canvas-subtle: rgb(22, 27, 34);
  --color-fg-default: rgb(201, 209, 217);
  --color-fg-muted: rgb(139, 148, 158);
  --color-fg-subtle: rgb(110, 118, 129);
  --color-accent-fg: rgb(88, 166, 255);
  --color-danger-fg: rgb(248, 81, 73);
}

[data-color-mode="light"],
.theme-light [data-color-mode="light"],
.theme-white [data-color-mode="light"] {
  --color-border-default: rgb(216, 222, 228);
  --color-canvas-default: rgb(255, 255, 255);
  --color-canvas-subtle: rgb(246, 248, 250);
  --color-fg-default: rgb(31, 35, 40);
  --color-fg-muted: rgb(101, 109, 118);
  --color-fg-subtle: rgb(149, 157, 165);
  --color-accent-fg: rgb(9, 105, 218);
  --color-danger-fg: rgb(207, 34, 46);
}

.w-md-editor {
  background-color: transparent !important;
  color: var(--color-foreground) !important;
}

.w-md-editor.w-md-editor-focus {
  box-shadow: none !important;
  border-color: var(--color-border) !important;
  outline: none !important;
}

.w-md-editor-toolbar {
  background-color: var(--color-card) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.w-md-editor-toolbar-divider {
  background-color: var(--color-border) !important;
}

.w-md-editor-toolbar button {
  color: var(--color-foreground) !important;
}

.w-md-editor-toolbar button:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-accent-foreground) !important;
}

.w-md-editor-content {
  background-color: var(--color-background) !important;
}

.w-md-editor-text-pre,
.w-md-editor-text-input,
.w-md-editor-text {
  color: var(--color-foreground) !important;
  background-color: transparent !important;
}

.w-md-editor-preview {
  background-color: var(--color-background) !important;
}

.wmde-markdown {
  background-color: transparent !important;
  color: var(--color-foreground) !important;
}

/* Prose styles for markdown rendering */
.prose {
  color: var(--color-foreground);
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.75;
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.714;
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose-sm p {
  margin-top: 1.143em;
  margin-bottom: 1.143em;
}

.prose [class~="lead"] {
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin-top: 0;
  margin-bottom: 0.8888889em;
  font-weight: 600;
  line-height: 1.1111111;
}

.prose h1 {
  font-size: 2.25em;
}

.prose h2 {
  font-size: 1.5em;
}

.prose h3 {
  font-size: 1.25em;
}

.prose h4 {
  font-size: 1em;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 500;
}

.prose strong {
  font-weight: 600;
}

.prose ol, .prose ul {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose > ul > li p {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose > ol > li > *:first-child {
  margin-top: 1.25em;
}

.prose code {
  font-weight: 600;
  font-size: 0.875em;
  background-color: var(--color-muted);
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
}

.prose pre {
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.714;
  margin-top: 1.714em;
  margin-bottom: 1.714em;
  border-radius: 0.375rem;
  padding: 0.857em 1.143em;
  background-color: var(--color-card);
}

.prose pre code {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: 400;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose blockquote {
  font-weight: 500;
  font-style: italic;
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
  border-left: 0.25rem solid var(--color-border);
}

.prose hr {
  margin-top: 3em;
  margin-bottom: 3em;
  border-color: var(--color-border);
}

.prose table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.714;
}

.prose thead {
  border-bottom-width: 1px;
  border-bottom-color: var(--color-border);
}

.prose thead th {
  vertical-align: bottom;
  padding-right: 0.571em;
  padding-bottom: 0.571em;
  padding-left: 0.571em;
  font-weight: 600;
}

.prose tbody tr {
  border-bottom-width: 1px;
  border-bottom-color: var(--color-border);
}

.prose tbody tr:last-child {
  border-bottom-width: 0;
}

.prose tbody td {
  vertical-align: baseline;
  padding: 0.571em;
}

/* Dark mode adjustments */
.prose.dark\:prose-invert {
  color: var(--color-foreground);
}

.prose.dark\:prose-invert a {
  color: var(--color-primary);
}

.prose.dark\:prose-invert strong {
  color: inherit;
}

.prose.dark\:prose-invert code {
  color: var(--color-foreground);
  background-color: var(--color-muted);
}

.prose.dark\:prose-invert pre {
  background-color: rgb(13, 17, 23);
  border: 1px solid var(--color-border);
}

.prose.dark\:prose-invert thead {
  border-bottom-color: var(--color-border);
}

.prose.dark\:prose-invert tbody tr {
  border-bottom-color: var(--color-border);
}

/* Remove maximum width constraint */
.prose.max-w-none {
  max-width: none;
}

/* Rotating symbol animation */
@keyframes rotate-symbol {
  0%   { content: "◐"; transform: scale(1); }
  25%  { content: "◓"; transform: scale(1); }
  50%  { content: "◑"; transform: scale(1); }
  75%  { content: "◒"; transform: scale(1); }
  100% { content: "◐"; transform: scale(1); }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.rotating-symbol {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  animation: fade-in 0.2s ease-out;
  font-weight: normal;
  font-size: 1.5rem; /* Make it bigger! */
  position: relative;
  top: -2px;
}

.rotating-symbol::before {
  content: "◐";
  animation: rotate-symbol 1.6s steps(4, end) infinite;
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  vertical-align: baseline;
  transform-origin: center;
}

/* Removed special font-weight for larger sizes to maintain consistency */

/* Shimmer hover effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Animation for shimmer effect */
.animate-shimmer {
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.shimmer-hover {
  position: relative;
  overflow: hidden;
}

.shimmer-hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transition: left 0.5s;
}

.shimmer-hover:hover::before {
  left: 100%;
  animation: shimmer 0.5s;
}

/* Trailing border effect */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes trail-rotate {
  to {
    --angle: 360deg;
  }
}

.trailing-border {
  position: relative;
  background: var(--color-card);
  z-index: 0;
  overflow: visible;
}

/* The correctly traveling border line */
.trailing-border::after {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle),
    transparent 0%,
    transparent 85%,
    #d97757 90%,
    #ff9a7a 92.5%,
    #d97757 95%,
    transparent 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.trailing-border:hover::after {
  opacity: 1;
  animation: trail-rotate 2s linear infinite;
}

/* Ensure the card content stays above the border effect */
.trailing-border > * {
  position: relative;
  z-index: 1;
}

/* --- ELEGANT SCROLLBARS --- */

/* Firefox - thin and minimal */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

/* Global webkit scrollbar - ultra thin and elegant */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

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

::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.6);
}

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

/* Code blocks - slightly larger for better usability */
pre::-webkit-scrollbar,
.w-md-editor-content::-webkit-scrollbar,
code::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

pre::-webkit-scrollbar-thumb,
.w-md-editor-content::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.4);
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover,
.w-md-editor-content::-webkit-scrollbar-thumb:hover,
code::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.6);
}

/* NFO Credits Scanlines Animation */
@keyframes scanlines {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.animate-scanlines {
  animation: scanlines 8s linear infinite;
}

/* Screenshot Shutter Animation */
@keyframes shutterFlash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.shutter-flash {
  animation: shutterFlash 0.5s ease-in-out;
}

/* Image Move to Input Animation */
@keyframes moveToInput {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  50% {
    transform: scale(0.3) translateY(50%);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.1) translateY(100vh);
    opacity: 0;
  }
}

.image-move-to-input {
  animation: moveToInput 0.8s ease-in-out forwards;
}

/* Glass Morphism Effects - Enhanced for better contrast */
.glass-panel {
  background: var(--color-background);
  background: color-mix(in srgb, var(--color-background) 98%, transparent);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  box-shadow: 
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1),
    inset 0 1px 0 0 rgb(255 255 255 / 0.05);
}

.theme-light .glass-panel {
  background: color-mix(in srgb, var(--color-background) 85%, transparent);
  box-shadow: 
    0 2px 8px 0 rgb(0 0 0 / 0.08),
    0 1px 3px -1px rgb(0 0 0 / 0.06),
    inset 0 1px 0 0 rgb(255 255 255 / 0.8);
}

/* Enhanced text contrast for light theme */
.theme-light .text-muted-foreground {
  color: oklch(0.45 0.01 240);
}

.theme-light .hover\:text-muted-foreground:hover {
  color: oklch(0.40 0.01 240);
}