@import "tailwindcss";

html,
body {
  height: 100%;
  overflow: hidden;
}

#root {
  height: 100%;
}

:root {
  font-family:
    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC",
    "Noto Sans CJK JP", "Noto Sans CJK KR", "Noto Sans Arabic",
    "Noto Sans Devanagari", "Noto Sans Thai", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
}

@theme {
  --color-primary: #E07832;
  --color-primary-foreground: #ffffff;
  --color-primary-light: #F09550;
  --color-primary-dark: #C06520;
  --color-primary-subtle: #FFF5ED;
  --color-background: #FAFAF7;
  --color-foreground: #1A1814;
  --color-muted: #F3EEE6;
  --color-muted-foreground: #6B6560;
  --color-border: #DDD6CC;
  --color-card: #ffffff;
  --color-card-foreground: #1A1814;
  --color-sidebar: #F3EEE6;
  --color-sidebar-foreground: #3D3832;
  --color-accent: #F09550;
  --color-destructive: #D44C47;
  --color-success: #2D9D78;
}

.dark {
  --color-background: #1A1210;
  --color-foreground: #F0EBE4;
  --color-muted: #262018;
  --color-muted-foreground: #9A908A;
  --color-border: #382E26;
  --color-card: #262018;
  --color-card-foreground: #F0EBE4;
  --color-sidebar: #262018;
  --color-sidebar-foreground: #C5BAB0;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 9999px;
  background: var(--color-muted);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-foreground);
  cursor: pointer;
  border: 2px solid var(--color-background);
  box-shadow: 0 0 0 1px var(--color-border);
  transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-foreground);
  cursor: pointer;
  border: 2px solid var(--color-background);
  box-shadow: 0 0 0 1px var(--color-border);
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 9999px;
  background: var(--color-muted);
}

/* RTL-specific overrides for Arabic layout */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="search"],
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

[dir="rtl"] input[type="range"] {
  direction: ltr;
}

[dir="rtl"] pre,
[dir="rtl"] code {
  direction: ltr;
  text-align: left;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Slide-in animation for settings panel */
@keyframes settings-slide-in {
  from {
    opacity: 0;
    transform: translateX(-1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes settings-slide-in-rtl {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.settings-slide-in {
  animation: settings-slide-in 200ms ease-out;
}

[dir="rtl"] .settings-slide-in {
  animation-name: settings-slide-in-rtl;
}

/* Fade-in animation for processed results and review panel */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 200ms ease-out;
}

/* Container queries for responsive settings panels */
.settings-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .settings-container .settings-grid-auto {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Touch-friendly targets for coarse pointer devices */
@media (pointer: coarse) {
  input[type="range"] { height: 8px; padding: 8px 0; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; border-width: 3px; }
  input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-width: 3px; }
  input[type="range"]::-moz-range-track { height: 8px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  button, [role="button"], a { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-spin {
    animation-duration: 1.5s !important;
    animation-iteration-count: infinite !important;
  }
}
