@import './styles/theme.css';
@import "tailwindcss";

/* Terminal font sizes are defined in theme.css */

/* Prefer dark UI for native system widgets like scrollbars */
html,
body,
#root {
  color-scheme: dark;
  font-size: var(--ui-font-size);
}

/* Ensure text selection works in diff viewer */
.select-text {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

.select-text * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Better text selection colors for diff viewer */
.select-text ::selection {
  background-color: var(--color-selection-bg);
  color: inherit;
}

/* Improve rasterization of box-drawing characters in ASCII logo */
.ascii-logo {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  line-height: 1.18; /* slightly more spacing to avoid descender clipping */
}

.select-text ::-moz-selection {
  background-color: var(--color-selection-bg);
  color: inherit;
}

/* Custom scrollbar for recent projects */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
  border-radius: var(--radius-default);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: var(--radius-default);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

/* Stylish split gutters (handles) */
.gutter {
  position: relative;
  background: transparent !important;
}

.gutter.gutter-horizontal { @apply cursor-col-resize; }
.gutter.gutter-vertical { @apply cursor-row-resize; }

/* Centered rounded handle with subtle glow */
.gutter.gutter-horizontal::before,
.gutter.gutter-vertical::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(var(--color-gray-400-rgb), 0.45), rgba(var(--color-gray-400-rgb), 0.25));
  box-shadow:
    0 0 0 1px rgba(var(--color-gray-400-rgb), 0.15),
    inset 0 0 0 1px rgba(var(--color-bg-tertiary-rgb), 0.5),
    0 6px 12px rgba(var(--color-bg-primary-rgb), 0.45);
  opacity: 0.7;
  transition: opacity 150ms ease, box-shadow 150ms ease, transform 120ms ease;
  pointer-events: none; /* ensure dragging works anywhere on the gutter */
}

.gutter.gutter-horizontal::after,
.gutter.gutter-vertical::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(var(--color-gray-400-rgb), 0.25);
  opacity: 0.6;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.gutter.gutter-horizontal::after { /* center hairline for vertical gutter */
  width: 1px;
  height: 100%;
}

.gutter.gutter-vertical::after { /* center hairline for horizontal gutter */
  width: 100%;
  height: 1px;
}

.gutter:hover::after { opacity: 0.9; }

.gutter.gutter-horizontal::before { /* vertical pill for left/right split */
  width: 4px;
  height: 44px;
}

.gutter.gutter-vertical::before { /* horizontal pill for top/bottom split */
  width: 44px;
  height: 4px;
}

/* Ensure Split.js vertical gutter is visually centered between panels */
.gutter.gutter-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gutter:hover::before {
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(var(--color-gray-400-rgb), 0.25),
    inset 0 0 0 1px rgba(var(--color-bg-tertiary-rgb), 0.6),
    0 8px 16px rgba(var(--color-bg-primary-rgb), 0.55);
}

.gutter:active::before {
  transform: translate(-50%, -50%) scale(0.96);
}

/* Suppress panel transitions during active split drag to avoid trailing artifacts */
body.is-split-dragging .bg-panel,
body.is-split-dragging .border,
body.is-split-dragging [class*="transition-"] {
  transition: none !important;
}

/* Hide scrollbars globally except for xterm */
:not(.xterm-viewport)::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

*:not(.xterm-viewport) {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Allow xterm terminals to show scrollbars */
.xterm-viewport::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}

.xterm-viewport::-webkit-scrollbar-track {
  background-color: transparent;
}

.xterm-viewport::-webkit-scrollbar-thumb {
  /* slate-400 at ~35% for a subtle dark thumb */
  background-color: rgba(var(--color-gray-400-rgb), 0.35);
  border-radius: 2px;
}

.xterm-viewport::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--color-gray-400-rgb), 0.55);
}

/* Hint to browsers (Safari/macOS) to prefer dark overlay scrollbars */
.xterm-viewport {
  color-scheme: dark;
  scrollbar-gutter: stable both-edges;
}

.xterm-viewport {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-gray-500-rgb), 0.3) transparent;
}

/* Hide auxiliary caret from xterm's helper textarea to prevent a second cursor */
.xterm .xterm-helper-textarea {
  caret-color: transparent !important;
  color: transparent !important;
  background: transparent !important;
}

/* Shared thin scrollbar styles for scrollable panels */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thumb-gray-700::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-gray-700-rgb) / 1);
  border-radius: 3px;
}

.scrollbar-thumb-gray-700::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-gray-600-rgb) / 1);
}

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

/* Markdown Editor Scrollbar Styles */
.markdown-editor-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

.markdown-editor-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.markdown-editor-scroll::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
  border-radius: var(--radius-lg);
}

.markdown-editor-scroll::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-scrollbar-track);
}

.markdown-editor-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

.markdown-editor-scroll::-webkit-scrollbar-corner {
  background: var(--color-scrollbar-track);
}

html,
body,
#root {
  height: 100vh;
  overflow: hidden;
}

/* macOS window controls spacing and draggable area */
.draggable-area {
  -webkit-app-region: drag;
  user-select: none;
}

.no-drag {
  -webkit-app-region: no-drag;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  @apply antialiased;
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
}

/* Reduce expensive pointer-driven repainting during split drag */
body.is-split-dragging {
  cursor: row-resize;
  user-select: none;
}

/* Session frame highlighting (use actual box-shadow on the element for better overflow handling) */
.session-ring {
  /* Keep smaller border-radius for reviewed cards to differentiate them */
  border-radius: 0.375rem;
  transform: scale(0.97);
  transform-origin: center;
}

.session-ring-blue {
  box-shadow: 0 0 0 2px var(--color-accent-blue), 0 0 0 4px var(--color-accent-blue-bg);
  background-color: var(--color-accent-blue-bg) !important;
}

.session-ring-green {
  box-shadow: 0 0 0 2px var(--color-accent-green), 0 0 0 4px var(--color-accent-green-bg);
  background-color: var(--color-accent-green-bg) !important;
}

.session-ring-violet {
  box-shadow: 0 0 0 2px var(--color-accent-violet), 0 0 0 4px var(--color-accent-violet-bg);
  background-color: var(--color-accent-violet-bg) !important;
}

.session-ring-purple {
  box-shadow: 0 0 0 2px var(--color-accent-purple), 0 0 0 4px var(--color-accent-purple-bg);
  background-color: var(--color-accent-purple-bg) !important;
}

.session-ring-magenta {
  box-shadow: 0 0 0 2px var(--color-accent-magenta), 0 0 0 4px var(--color-accent-magenta-bg);
  background-color: var(--color-accent-magenta-bg) !important;
}

.session-ring-amber {
  box-shadow: 0 0 0 2px var(--color-accent-amber), 0 0 0 4px var(--color-accent-amber-bg);
  background-color: var(--color-accent-amber-bg) !important;
}

.session-ring-gray {
  box-shadow: 0 0 0 2px var(--color-gray-500), 0 0 0 4px rgba(var(--color-gray-500-alt-rgb), 0.2);
  background-color: rgba(var(--color-gray-500-alt-rgb), 0.08) !important;
}

/* Subtle header ruler to visually continue the frame into the content */
.session-header-ruler {
  height: 2px;
  background-image: linear-gradient(to right, transparent, var(--color-text-tertiary), transparent);
}

/* Work area unified ring; color toggled via JS */
#work-ring {
  box-shadow: none;
}

/* Keep diff containers themselves transparent but allow line highlights */
.diff-wrapper,
.diff-wrapper [class*="diff-viewer"],
.diff-wrapper [class*="diff-container"],
.diff-wrapper [class*="code-diff"] {
  background: transparent;
}

/* Preserve whitespace in diff viewer */
.diff-line-content,
code {
  white-space: pre !important;
  tab-size: 4;
}

/* Animation classes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes filterGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--color-accent-blue-rgb), 0),
                inset 0 0 0 rgba(var(--color-accent-blue-rgb), 0);
    background-color: rgba(var(--color-accent-blue-rgb), 0.1);
  }
  50% {
    box-shadow: 0 0 8px 1px rgba(var(--color-accent-blue-rgb), 0.4),
                inset 0 0 8px rgba(var(--color-accent-blue-rgb), 0.15);
    background-color: rgba(var(--color-accent-blue-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 4px 0.5px rgba(var(--color-accent-blue-rgb), 0.3),
                inset 0 0 4px rgba(var(--color-accent-blue-rgb), 0.1);
    background-color: rgba(var(--color-accent-blue-rgb), 0.15);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out;
}

.animate-slideUp {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-slideIn {
  animation: slideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-filterGlow {
  animation: filterGlow 0.4s ease-out;
  position: relative;
}
