/* ============================================
 * ORKIS Global Styles
 * ============================================
 * Essential global styles only.
 * Component-specific styles should use:
 * - MUI styled components
 * - Theme patterns: import { patterns } from '@/theme'
 * ============================================ */

/* ============================================
 * 1. Font System
 * ============================================ */

/* SystemFont - language-specific font fallback */
@font-face {
  font-family: 'SystemFont';
  src: local('Roboto'), local('Pretendard'), local('Apple SD Gothic Neo'), local('Noto Sans KR');
  unicode-range: U+0041-005A, U+0061-007A, U+0030-0039; /* English, Numbers */
}

@font-face {
  font-family: 'SystemFont';
  src: local('Pretendard'), local('Apple SD Gothic Neo'), local('Noto Sans KR'), local('Malgun Gothic');
  unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F; /* Korean */
}

/* Global font application */
* {
  font-family: 'SystemFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
}

/* ============================================
 * 2. Text Selection & Cursor Control
 * ============================================ */

/* Default: disable text selection */
body, div, span, p, h1, h2, h3, h4, h5, h6,
section, article, header, footer, nav, aside,
.MuiBox-root, .MuiTypography-root {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
}

/* Enable text selection for input elements */
input,
textarea,
[contenteditable="true"] {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  cursor: text !important;
}

/* Pointer cursor for clickable elements */
button,
a,
[role="button"],
[role="tab"],
.clickable,
.MuiButton-root,
.MuiIconButton-root {
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Enable copy for code and messages */
pre,
code,
.copyable,
.message-content,
.chat-message,
.MuiBox-root .MuiTypography-root {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* Chat message body - text selection enabled */
[class*="userMessage"] *,
[class*="generalAnswer"] *,
[class*="sqlAnswer"] *,
.BaseMessage-root *,
.chat-message-text {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
}

/* ============================================
 * 3. Accessibility
 * ============================================ */

/* Focus indicators */
:focus {
  outline: 2px solid var(--global-blue-normal, #1976d2);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--global-blue-normal, #1976d2);
  outline-offset: 2px;
}

/* Circular focus for avatars and icons */
.user-avatar:focus,
.support-agent-icon:focus,
.icon-instance-node:focus {
  outline: 2px solid var(--global-blue-normal, #1976d2);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Input focus */
.input-field:focus-within,
.search-bar:focus-within {
  outline: 2px solid var(--global-blue-normal, #1976d2);
  outline-offset: 1px;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .search-bar,
  .chat-input-container {
    border: 2px solid var(--global-gray-600, #666666);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
 * 4. Responsive Design (basic layout only)
 * ============================================ */

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }

  .chat-input-container {
    width: 100%;
    max-width: calc(100vw - 32px);
  }
}

@media (max-width: 480px) {
  .search-bar {
    width: 100%;
    max-width: calc(100vw - 64px);
  }
}