/* =============================================
   HyunYul AI Layout Adjustments
   Scope: container sizing, grid rhythm, responsive spacing.
   ============================================= */

  :root {
    --container-max: 1120px;
    --reading-max: 70ch;
    --chat-header-height: 72px;
    --chat-content-max: 960px;
    --chat-thread-max: 720px;
    --chat-thread-padding: clamp(16px, 4vw, 24px);
    --sidebar-width-desktop: 250px;
    --sidebar-current-width: var(--sidebar-width-desktop);
  }

  :root {
    --chat-rail-available: calc(100vw - var(--sidebar-current-width));
    --chat-rail-width-raw: calc(var(--chat-rail-available) - 2 * var(--chat-thread-padding));
    --chat-rail-width-clamped: clamp(200px, var(--chat-rail-width-raw), var(--chat-rail-available));
    --chat-rail-width: min(var(--chat-thread-max), var(--chat-rail-width-clamped));
    --chat-rail-left: calc(
      var(--sidebar-current-width) +
      max(0px, (var(--chat-rail-available) - var(--chat-rail-width)) / 2)
    );
  }

  :focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
  
  /* ✅ 브라우저 오른쪽 끝에 스크롤바 표시 (일반 웹사이트 방식) */
  html, body {
    height: 100vh !important;
    margin: 0;
    padding: 0;
    overflow-y: auto !important; /* 전체 페이지 스크롤 활성화 */
    overflow-x: hidden !important;
    width: 100vw !important;
  }

  /* 페이지 로드 시 스크롤 위치 초기화 */
  html {
    scroll-behavior: auto !important;
  }

  body {
    color: var(--text-primary, var(--text)) !important;
    font-family: var(--font-sans);
    font-weight: 500 !important;
    line-height: 1.6;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bg-secondary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 제목 폰트 웨이트 강화 */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
  }

  h1 { font-size: var(--fs-xxl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }

  /* =============================================
     Grid Container
     ============================================= */
  
  /* ✅ 2열 그리드 유지. 고정 높이·고정 배치 해제로 우측 공백/하단 잘림 제거 */
  /* 변경 */
  .app-container {
    display: grid !important;
    grid-template-columns: var(--sidebar-current-width) minmax(0, 1fr);
    gap: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    /* position: relative 제거 - sidebar의 position: fixed가 작동하도록 */
    top: 0;
    left: 0;
    min-height: 100svh;              /* 변경 */
    height: auto !important;         /* 변경 */
    overflow: visible !important;    /* 변경 */
    background: var(--bg-secondary) !important;
  }

  .app-container:has(.sidebar.collapsed),
  .app-container.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  :root:has(.sidebar.collapsed),
  .app-container.sidebar-collapsed,
  body.sidebar-collapsed {
    --sidebar-current-width: 0px;
  }
  
  /* =============================================
     Sidebar
     ============================================= */
  
  /* ✅ 사이드바 고정 (왼쪽 고정) */
  .sidebar {
    position: fixed !important;      /* 고정 배치 */
    left: 0 !important;
    top: 0 !important;
    width: var(--sidebar-width-desktop) !important;
    box-sizing: border-box !important; /* padding 포함한 너비 계산 */
    height: 100vh !important;        /* 전체 화면 높이 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;  /* Firefox 스크롤바 숨김 */
    -ms-overflow-style: none !important;  /* IE/Edge 스크롤바 숨김 */
    padding: 0 !important;
    margin: 0 !important;
    border-right: 1px solid var(--border-color);
    background: var(--bg-primary) !important;
    z-index: 100;
    transform: none !important;      /* transform 제거 (containing block 방지) */
    transition: margin-left 0.3s ease;
  }

  /* 웹킷 브라우저 사이드바 스크롤바 숨김 (Chrome, Safari, Edge) */
  .sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .sidebar::-webkit-scrollbar-track {
    display: none !important;
  }

  .sidebar::-webkit-scrollbar-thumb {
    display: none !important;
  }
  
  /* =============================================
     Main Content
     ============================================= */
  
  /* ✅ 본문 영역 (사이드바 오른쪽) */
  .main-content {
    position: relative;
    --content-offset: var(--sidebar-current-width);
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
    max-width: 100%;
    width: calc(100vw - var(--sidebar-current-width)) !important;
    margin-left: var(--sidebar-current-width) !important;   /* 사이드바 너비만큼 여백 */
    padding: 0;
    min-height: 100vh;
    height: auto !important;         /* 내용 길이에 따라 확장 */
    padding-top: var(--chat-header-height);
    transition: margin-left 0.3s ease;
    background: transparent !important; /* 배경 투명 (chat-messages가 배경 처리) */
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  
  /* 헤더 영역 (상단 고정) */
  .main-content > .chat-header {
    position: fixed !important;      /* 고정 배치 */
    top: 0 !important;
    left: var(--sidebar-current-width) !important;          /* 사이드바 오른쪽 */
    width: calc(100vw - var(--sidebar-current-width)) !important; /* 사이드바 제외한 너비 */
    box-sizing: border-box !important; /* padding 포함한 너비 계산 */
    display: flex;
    align-items: center;
    justify-content: space-between;  /* GPT 스타일 - 양쪽 정렬 (왼쪽: 드롭다운, 오른쪽: 테마 토글) */
    gap: var(--space-4);
    padding: 16px 40px 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    flex-shrink: 0;
    overflow: visible !important;    /* 드롭다운 메뉴가 잘리지 않도록 허용 */
    min-height: 60px;
    z-index: 120; /* (★수정) 90 → 120 (드롭다운 100보다 높게, 첫 메시지 가림 방지) */
  }
  
  /* 헤더 드롭다운은 가용 폭을 차지하도록 설정 */
  .chat-header .header-dropdown {
    display: flex !important;
    align-items: center !important;
    flex: 0 1 260px !important;
    min-width: 160px !important;
  }
  
  .chat-header .header-dropdown .unified-dropdown-button {
    width: 100% !important;
  }
  
  /* 헤더 테마 토글 버튼 (GPT 스타일) */
  .chat-header .theme-toggle {
    position: relative !important;
    width: 56px !important;
    height: 28px !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;       /* auto 제거 (space-between으로 자동 정렬) */
    margin-right: 0 !important;
  }
  
  .chat-header .theme-toggle:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
    transform: none !important;
    background: var(--bg-tertiary) !important;
  }
  
  .chat-header .theme-toggle .theme-icon {
    position: absolute !important;
    font-size: 16px !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }
  
  .chat-header .theme-toggle .sun {
    left: 6px !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  
  .chat-header .theme-toggle .moon {
    right: 6px !important;
    opacity: 0 !important;
    transform: scale(0.8) !important;
  }
  
  /* 다크모드 활성화 시 */
  body.dark-mode .chat-header .theme-toggle .sun {
    opacity: 0 !important;
    transform: scale(0.8) !important;
  }
  body.dark-mode .chat-header .theme-toggle .moon {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  
  /* =============================================
     Messages Area
     ============================================= */
  
  /* ✅ 채팅 메시지 영역 - 입력창과 동일한 너비 (중앙 정렬, body 스크롤 사용) */
  .chat-messages {
    position: relative !important;                           /* fixed → relative (문서 흐름에 포함, body 스크롤 사용) */
    width: 100% !important;
    max-width: var(--chat-rail-width, 700px) !important;      /* 입력창과 동일한 최대 너비 */
    margin: var(--chat-header-height) auto 0 auto !important; /* 헤더 높이만큼 상단 여백, 중앙 정렬 */
    overflow-y: visible !important;  /* 메시지 영역 스크롤 제거 (body가 스크롤) */
    overflow-x: hidden !important;
    padding: 20px 16px calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--space-4);
    background: transparent !important; /* 배경 투명 (body가 배경 처리) */
    box-sizing: border-box !important; /* 패딩 포함 너비 계산 */
    min-height: calc(100vh - var(--chat-header-height)) !important; /* 최소 높이 보장 */
  }

  /* 환영 화면에서도 스크롤 활성화 (body 스크롤) */
  .chat-messages:has(.welcome-screen) {
    overflow-y: visible !important;
  }

  /* ✅ 사이드바 숨김 시에도 동일한 위치 유지 (중앙 정렬) */
  .sidebar.collapsed + .main-content .chat-messages,
  .app-container.sidebar-collapsed .main-content .chat-messages,
  body.sidebar-collapsed .main-content .chat-messages {
    margin: var(--chat-header-height) auto 0 auto !important;
    max-width: var(--chat-rail-width, 700px) !important;
  }

  .app-container.sidebar-collapsed,
  body.sidebar-collapsed {
    --sidebar-current-width: 0px;
  }

  /* 환영 화면 블록 - 전체 너비, 왼쪽 정렬 */
  .welcome-screen {
    width: 100%;
    max-width: 100%;                 /* 전체 너비 사용 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
    min-height: auto;                /* 자동 높이 */
    justify-content: center;
    align-items: center;
    padding: 24px;                   /* 전체 패딩 */
  }
  
  .welcome-screen > * + * { margin-top: var(--space-4); }
  
  .welcome-hero {
    text-align: left;              /* 왼쪽 정렬 */
    max-width: var(--reading-max);
    margin: 0;                     /* 왼쪽 정렬 */
    display: grid;
    gap: var(--space-3);
  }
  
  /* =============================================
     Input Area - ChatGPT Style Integrated Input (2025-10-06 단순화)
     ============================================= */

  /* 입력창 래퍼 - 하단 고정, 중앙 정렬, 버튼 포함 */
  .chat-input-wrapper {
    position: fixed !important;
    bottom: 20px !important;
    left: calc(var(--chat-rail-left, 50vw) + (var(--chat-rail-width, 700px) / 2)) !important;
    transform: translateX(-50%) !important;
    width: min(var(--chat-rail-width, 700px), 700px) !important;
    max-width: var(--chat-rail-width, 700px) !important;
    min-width: min(var(--chat-rail-width, 700px), 500px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 16px !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 28px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    z-index: 50 !important;
  }

  .chat-input-wrapper:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  .main-content .operation-status,
  .main-content .multi-assistant-menu {
    width: 100% !important;
    max-width: var(--chat-content-max) !important;
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
  }

  .main-content .chat-messages {
    width: 100% !important;
    margin: 0 !important;
  }

  .app-container.sidebar-collapsed .main-content,
  body.sidebar-collapsed .main-content {
    --content-offset: 0 !important;
    margin-left: 0 !important;
  }

  @media (max-width: 1023px) {
    .app-container,
    body {
      --sidebar-current-width: 0px !important;
    }

    .main-content {
      --content-offset: 0 !important;
      margin-left: 0 !important;
      width: 100vw;
      overflow: visible !important;
    }
  }

  /* 모바일: 메시지/입력 폭 재조정 (좌우 여백 확보 + 중앙 정렬) */
  @media (max-width: 768px) {
    .chat-messages {
      width: calc(100% - 24px) !important;
      max-width: calc(100% - 24px) !important;
      margin: var(--chat-header-height) auto 0 auto !important;
      padding: 20px 12px calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .chat-input-wrapper {
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: calc(100% - 24px) !important;
      max-width: calc(100% - 24px) !important;
      min-width: 0 !important;
    }
  }

  .operation-status {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  /* 사이드바의 테마 토글 숨기기 */
  .sidebar .theme-toggle { display: none !important; }
  
  /* 파일 첨부 버튼 - 입력창 내부 */
  .file-attach-button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
  }
  .file-attach-button:hover {
    background: var(--bg-secondary) !important;
    color: var(--primary-color) !important;
  }
  .file-attach-button:active {
    transform: scale(0.95) !important;
  }

  /* 음성 첨부 버튼 - 입력창 내부 */
  .voice-attach-button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
  }
  .voice-attach-button:hover {
    background: var(--bg-secondary) !important;
    color: #667eea !important;
  }
  .voice-attach-button:active {
    transform: scale(0.95) !important;
  }

  /* 전송 버튼 - 입력창 내부 */
  .send-button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
  }
  .send-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
  }
  .send-button:not(:disabled):hover {
    background: var(--primary-hover) !important;
    transform: scale(1.05) !important;
  }
  .send-button svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* 브라우저 기본 스크롤을 사용하도록 별도 스타일 제거 */
  /* =============================================
     Welcome prompts
     ============================================= */
  
  .welcome-prompts {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
  section + section,
  .welcome-prompts + * { margin-top: var(--space-8); }
  
  /* =============================================
     Responsive
     ============================================= */

  /* 데스크톱: transform 명시적 제거 (position: fixed가 viewport 기준으로 작동하도록) */
  @media (min-width: 1024px) {
    .sidebar {
      transform: none !important;
    }
  }

  @media (max-width: 768px) {
    .app-container { grid-template-columns: minmax(0, 1fr); }

    .sidebar {
      transform: translateX(-100%) !important;
      transition: transform 0.3s ease !important;
      z-index: 100 !important; /* 오버레이(90)보다 높게 */
      left: 0 !important; /* transform과 함께 사용 */
    }
    .sidebar.open {
      transform: translateX(0) !important;
    }

    .main-content {
      margin-left: 0 !important;
    }

    /* ============================================
       모바일 헤더 최적화 (최고 우선순위)
       ============================================ */
    .main-content > .chat-header {
      left: 0 !important;
      padding: 8px 12px 8px 56px !important; /* 왼쪽: 햄버거(40px) + 여백(16px) */
      gap: 8px !important;
      min-height: 52px !important;
      justify-content: flex-start !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      overflow: visible !important;
    }

    /* 헤더 드롭다운 - 최고 명시도 */
    .main-content > .chat-header .header-dropdown {
      display: flex !important;
      flex: 1 1 auto !important;
      min-width: 0 !important;
      max-width: calc(100% - 60px) !important; /* 테마 토글(48px) + 여백(12px) 제외 */
      overflow: visible !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    /* 모바일에서 드롭다운 강제 표시 - 최고 명시도 */
    .main-content > .chat-header .unified-dropdown {
      display: flex !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow: visible !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    /* 드롭다운 버튼 - 최고 명시도 */
    .main-content > .chat-header .unified-dropdown-button {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 6px 10px !important;
      font-size: 12px !important;
      gap: 6px !important;
      overflow: hidden !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    /* 드롭다운 버튼 텍스트 */
    .main-content > .chat-header .unified-dropdown-button .text {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      max-width: 100% !important;
      flex: 1 1 auto !important;
      display: block !important;
      visibility: visible !important;
    }

    /* 드롭다운 아이콘들 */
    .main-content > .chat-header .unified-dropdown-button .icon,
    .main-content > .chat-header .unified-dropdown-button .arrow {
      flex-shrink: 0 !important;
      display: inline-block !important;
      visibility: visible !important;
    }

    /* 모바일 테마 토글 최적화 */
    .chat-header .theme-toggle {
      width: 48px !important;
      height: 24px !important;
      margin-left: auto !important;
      flex-shrink: 0 !important; /* 절대 축소되지 않음 (항상 표시) */
    }

    .chat-header .theme-toggle .theme-icon {
      font-size: 14px !important;
    }

    .chat-header .theme-toggle .sun {
      left: 4px !important;
    }

    .chat-header .theme-toggle .moon {
      right: 4px !important;
    }

    /* 모바일 입력창 */
    .chat-input-wrapper {
      left: 12px !important;
      right: 12px !important;
      bottom: 12px !important;
      max-width: calc(100% - 24px) !important;
      padding: 6px 10px !important;
      gap: 8px !important;
    }

    .chat-input {
      font-size: 16px !important; /* iOS 자동 줌 방지 */
    }

    /* 모바일에서 버튼 크기 조정 */
    .file-attach-button,
    .voice-attach-button,
    .send-button {
      width: 28px !important;
      height: 28px !important;
    }

    .welcome-prompts {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  
  
/* 앱 컨테이너는 위에서 grid로 정의됨 */

/* =============================================
   Sidebar Overlay (모바일용) - 2025-10-06
   ============================================= */

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90; /* 사이드바(z-index: 100)보다 낮게 */
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.sidebar-overlay.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
}