/* =============================================
   Sidebar Refinement
   ============================================= */

   .app-container .sidebar {
    /* padding: var(--space-6) var(--space-4) !important; */
    padding: var(--space-6) var(--space-4) !important; /* 기존 유지 */
    /* gap: var(--space-6) !important; */
    gap: var(--space-3) !important; /* // 변경: 내부 카드 간격을 절반 정도로 완화 */
  }

.app-container .sidebar-header {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4) !important;
  padding: 0 !important;
  border: none !important;
}

/* 로고와 토글 버튼을 같은 라인에 배치 */
.app-container .sidebar-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0 !important;
}

/* 헤더 오른쪽 버튼들 컨테이너 */
.app-container .sidebar-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 32px !important;
}

.app-container .sidebar-header .logo {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s;
  background: none !important;
}

.app-container .sidebar-header .logo span {
  color: var(--text) !important; /* 가독성 향상 (var(--text-primary) → var(--text)) */
  opacity: 1 !important;
  font-weight: 700 !important; /* 더 굵게 */
}

.app-container .sidebar-header .logo:hover {
  opacity: 0.7;
}

.app-container .sidebar-header .logo img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.app-container .sidebar .new-chat-btn,
.app-container .sidebar .new-chat-button {
  border-radius: var(--radius-3) !important;
  font-size: var(--fs-sm) !important;
  padding: calc(var(--space-3) + 2px) var(--space-4) !important;
  box-shadow: none !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 90%, #8f7bff 10%), var(--primary)) !important;
}

.app-container .premium-service-menu,
.app-container .multi-assistant-menu,
.app-container .image-features-menu {
  display: grid !important;
  gap: var(--space-3) !important;
}

.app-container .sidebar .menu-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-2) !important;
  border: 1px solid transparent !important;
  background: color-mix(in srgb, var(--bg-elev) 94%, rgba(0, 0, 0, 0.02) 6%) !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.app-container .sidebar .menu-item:hover,
.app-container .sidebar .menu-item:focus-visible {
  border-color: rgba(106, 85, 255, 0.25) !important;
  box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.12) !important;
  transform: translateY(-2px) !important;
  color: var(--text) !important;
}

.app-container .sidebar .menu-item:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}

.app-container .sidebar .menu-icon {
  font-size: 1.4rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
}

.app-container .sidebar .menu-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.app-container .sidebar .menu-title {
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.app-container .sidebar .menu-desc {
  font-size: 0.8125rem !important;
  color: var(--text-muted) !important;
}

.app-container .sidebar .menu-arrow {
  font-size: 1rem !important;
  transform: translateX(0) !important;
  transition: transform 0.2s ease !important;
}

.app-container .sidebar .menu-item:hover .menu-arrow {
  transform: translateX(2px) !important;
}

.app-container .sidebar .chat-history {
  background: color-mix(in srgb, var(--bg-elev) 96%, rgba(106, 85, 255, 0.06) 4%) !important;
  border-radius: var(--radius-3) !important;
  border: var(--border-1) !important;
  padding: var(--space-4) !important;
  box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), 0.05) !important;
}

.app-container .sidebar .history-section {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-3) !important;
}

.app-container .sidebar .section-title {
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.01em !important;
}

.app-container .sidebar #recent-sessions {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
}

.app-container .sidebar .history-item,
.app-container .sidebar .history-item {
  padding: var(--space-3) !important;
  border-radius: var(--radius-2) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  line-height: 1.4 !important;
  color: var(--text-muted) !important;
}

.app-container .sidebar .history-item:hover,
.app-container .sidebar .history-item:hover {
  border-color: rgba(106, 85, 255, 0.35) !important;
  background: rgba(106, 85, 255, 0.08) !important;
}

.app-container .sidebar .history-item.active,
.app-container .sidebar .history-item.active {
  border-color: rgba(106, 85, 255, 0.45) !important;
  background: rgba(106, 85, 255, 0.12) !important;
  color: var(--text) !important;
}

.app-container .sidebar-footer {
  display: none !important; /* 테마 토글이 헤더로 이동하여 더 이상 필요 없음 */
}

.app-container .sidebar .theme-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-2) !important;
  background: color-mix(in srgb, var(--bg-elev) 92%, rgba(106, 85, 255, 0.06) 8%) !important;
  border: 1px solid rgba(106, 85, 255, 0.15) !important;
}

.app-container .sidebar .theme-toggle span {
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.app-container .sidebar .theme-switch {
  transform: scale(0.92) !important;
}

@media (max-width: 1023px) {
  .app-container .sidebar {
    border-radius: 0 !important;
    height: 100vh !important;
    padding: var(--space-6) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom)) !important;
    box-shadow: 24px 0 50px rgba(var(--shadow-rgb), 0.18) !important;
  }
}

@media (max-width: 767px) {
  .app-container .sidebar {
    width: min(280px, 75vw) !important;
  }

  /* 모바일 사이드바 컴팩트화 */
  .app-container .sidebar {
    padding: var(--space-4) var(--space-3) calc(var(--space-6) + env(safe-area-inset-bottom)) !important;
    gap: var(--space-2) !important;
  }

  /* 세션 목록 항목 패딩 감소 */
  .app-container .sidebar .history-item {
    padding: var(--space-2) var(--space-3) !important;
    font-size: 0.8125rem !important;
  }

  /* 메뉴 항목 패딩 감소 */
  .app-container .sidebar .menu-item {
    padding: var(--space-2) var(--space-3) !important;
  }

  /* 새 대화 버튼 패딩 감소 */
  .app-container .sidebar .new-chat-btn,
  .app-container .sidebar .new-chat-button {
    padding: var(--space-2) var(--space-3) !important;
    font-size: 0.875rem !important;
  }
}

/* ========================================================
 * 사이드바 (head_style_0018.css에서 이동, 2025-10-02)
 * 원본: head_style_0018.css 라인 17-327 (311 라인)
 * ======================================================== */
    /* 사이드바 - layout.css에서 이미 정의됨, 여기서는 추가 스타일만 */
    /* .sidebar의 width, position 등 기본 속성은 layout.css 참조 */
    
    .sidebar-header {
      padding: 12px;
      border-bottom: 1px solid var(--border-color);
    }
    
    /* .logo 스타일은 상단 .app-container .sidebar-header .logo에서 관리 (중복 제거) */
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      background: var(--bg-secondary);
      border-radius: 6px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .user-info:hover {
      background: var(--bg-chat);
    }
    
    /* 게스트 모드 인증 버튼 */
    .guest-auth-buttons {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    
    .auth-btn {
      flex: 1;
      padding: 10px 16px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
    }
    
    .login-btn {
      background: var(--bg-secondary);
      color: var(--text) !important; /* 가독성 향상 (var(--text-primary) → var(--text)) */
      border: 1px solid var(--border-primary);
      font-weight: 700 !important; /* 더 굵게 */
    }

    .login-btn:hover {
      background: var(--bg-chat);
      border-color: var(--primary-color);
    }
    
    .register-btn {
      background: var(--primary-color);
      color: white;
    }
    
    .register-btn:hover {
      background: var(--primary-dark);
      transform: translateY(-1px);
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--gradient-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      font-size: 16px;
    }
    
    .user-details {
      flex: 1;
    }
    
    .user-name {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 2px;
    }
    
    .user-email {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .new-chat-btn {
      width: 100%;
      padding: 12px 16px;
      background: var(--primary-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
    }
    
    .new-chat-btn:hover {
      background: var(--primary-dark);
      transform: translateY(-1px);
    }
    
    .chat-history {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      min-height: 0; /* (★중요) flex 컨테이너에서 스크롤 가능하게 */
    }
    
    .history-section {
      margin-bottom: 12px;
    }
    
    .section-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .history-item {
      padding: 6px 8px;
      margin-bottom: 4px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 12px;
      color: var(--text-secondary);
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .history-item:hover {
      background: var(--bg-secondary);
      color: var(--text-primary);
    }
    
    .history-item.active {
      background: var(--bg-chat);
      color: var(--text-primary);
    }
    
    .history-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .history-actions {
      display: none;
      gap: 4px;
    }
    
    .history-item:hover .history-actions {
      display: flex;
    }
    
    .history-action {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: all 0.2s;
    }
    
    .history-action:hover {
      background: var(--bg-chat);
      color: var(--text-primary);
    }
    
    .sidebar-footer {
      padding: 20px;
      border-top: 1px solid var(--border-color);
      background: var(--bg-secondary) !important; /* (★중요) 배경색 추가 */
      display: block !important;
    }
    
    .model-info {
      background: var(--bg-secondary);
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 12px;
    }
    
    .model-name {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 4px;
    }
    
    .model-desc {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .theme-toggle {
      display: flex !important;
      align-items: center;
      gap: 12px;
      font-size: 16px; /* (★중요) 더 큰 글씨 */
      color: #333 !important; /* (★중요) 더 진한 색상 */
      font-weight: 600; /* (★중요) 더 굵게 */
      padding: 14px;
      background: #f0f0f0; /* (★중요) 밝은 회색 배경 */
      border-radius: 10px;
      border: 2px solid #6366f1; /* (★중요) 더 두꺼운 보라색 테두리 */
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2); /* (★중요) 보라색 그림자 */
      transition: all 0.3s;
      cursor: pointer;
    }
    
    .theme-toggle:hover {
      background: #e8e8e8; /* (★중요) 호버시 더 진한 회색 */
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }
    
    /* 다크모드일 때 토글 스타일 */
    [data-theme="dark"] .theme-toggle {
      background: #2d2d2d !important;
      color: #fff !important;
      border-color: #7c3aed;
    }
    
    [data-theme="dark"] .theme-toggle:hover {
      background: #3d3d3d !important;
    }
    
    .theme-toggle span {
      color: inherit !important; /* (★중요) 부모로부터 색상 상속 */
      font-weight: 600 !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* (★중요) 텍스트 그림자 */
    }
    
    .theme-switch {
      position: relative;
      width: 54px; /* (★중요) 더 큰 크기 */
      height: 28px;
      background: linear-gradient(to right, #999, #bbb) !important; /* (★중요) 그라디언트 배경 */
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.3s;
      border: 2px solid #777;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* (★중요) 내부 그림자 */
    }
    
    .theme-switch.active {
      background: linear-gradient(to right, #6366f1, #7c3aed) !important; /* (★중요) 보라색 그라디언트 */
      border-color: #5b21b6;
      box-shadow: 0 0 12px rgba(99, 102, 241, 0.4), inset 0 2px 4px rgba(0,0,0,0.2); /* (★중요) 빛나는 효과 */
    }
    
    .theme-switch::after {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      background: linear-gradient(135deg, #fff, #f0f0f0); /* (★중요) 그라디언트 버튼 */
      border-radius: 50%;
      top: 0px;
      left: 0px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* (★중요) 부드러운 애니메이션 */
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    
    .theme-switch.active::after {
      transform: translateX(26px); /* (★중요) 더 큰 이동 거리 */
      background: linear-gradient(135deg, #fbbf24, #f59e0b); /* (★중요) 황금색 그라디언트 */
      box-shadow: 0 2px 8px rgba(251, 191, 36, 0.5);
    }

    /* =============================================
       사이드바 토글 버튼
       ============================================= */

    .sidebar-toggle-btn {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-secondary);
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      z-index: 10;
    }

    .sidebar-toggle-btn:hover {
      background: var(--bg-chat);
      border-color: var(--primary);
      color: var(--primary-color);
      transform: scale(1.05);
    }

    .sidebar-expand-btn {
      position: fixed;
      top: 24px;
      left: 16px;
      width: 40px;
      height: 40px;
      border: none;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      border-radius: 8px;
      cursor: pointer;
      display: none; /* ← flex에서 none으로 변경 */
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      z-index: 999;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .sidebar-expand-btn:hover {
      background: var(--primary-color);
      color: white;
      transform: translateX(2px);
    }

    /* 사이드바 접힌 상태 */
    .sidebar.collapsed {
      transform: translateX(-100%) !important;
      transition: transform 0.3s ease !important;
    }

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

    /* 사이드바 접힌 상태에서 헤더도 왼쪽으로 이동 */
    .sidebar.collapsed + .main-content > .chat-header,
    .app-container.sidebar-collapsed .main-content > .chat-header,
    body.sidebar-collapsed .main-content > .chat-header {
      left: 0 !important;
    }

    /* 메인 채팅 영역 */

/* =============================================
   대화 이력 관리 (편집 모드)
   ============================================= */

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-actions-bar {
  display: flex;
  gap: 4px;
}

.btn-manage {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 14px;
}

.btn-manage:hover {
  background: var(--bg-secondary);
  color: var(--primary-color);
}

.history-manage-bar {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.history-manage-bar button {
  flex: 1;
  min-width: 70px;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-select-all {
  background: var(--bg-chat);
  color: var(--text);
  border: 1px solid var(--border-color) !important;
}

.btn-select-all:hover {
  background: var(--bg-elev);
  border-color: var(--primary-color) !important;
}

.btn-delete-selected {
  background: #ff4444;
  color: white;
}

.btn-delete-selected:hover:not(:disabled) {
  background: #cc0000;
  transform: translateY(-1px);
}

.btn-delete-selected:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-delete-all {
  background: #ff6b6b;
  color: white;
}

.btn-delete-all:hover {
  background: #ee5a52;
  transform: translateY(-1px);
}

.btn-cancel {
  background: var(--bg-chat);
  color: var(--text);
  border: 1px solid var(--border-color) !important;
}

.btn-cancel:hover {
  background: var(--bg-secondary);
}

.session-checkbox {
  margin-right: 8px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.history-item {
  cursor: pointer;
  user-select: none;
}

.history-item:has(.session-checkbox:checked) {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: var(--primary-color) !important;
}

@media (max-width: 767px) {
  .history-manage-bar button {
    font-size: 11px;
    padding: 5px 8px;
    min-width: 60px;
  }
}

/* =============================================
   사이드바 드롭다운 & 테마 토글 (2025-10-20)
   ============================================= */

/* 사이드바 드롭다운 */
.sidebar .sidebar-dropdown {
  margin-top: 12px;
  width: 100%;
}

.sidebar .sidebar-dropdown .unified-dropdown-button {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: var(--text-primary);
}

.sidebar .sidebar-dropdown .unified-dropdown-button:hover {
  background: var(--bg-chat);
  border-color: var(--primary);
}

.sidebar .sidebar-dropdown .unified-dropdown-button .text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .sidebar-dropdown .unified-dropdown-button .arrow {
  font-size: 10px;
  transition: transform 0.2s;
}

.sidebar .sidebar-dropdown.open .unified-dropdown-button .arrow {
  transform: rotate(180deg);
}

/* 사이드바 하단 테마 토글 */
.sidebar-footer {
  margin-top: auto;
  padding: 16px 0;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
}

.sidebar-theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
  padding: 0;
}

.sidebar-theme-toggle:hover {
  background: var(--bg-chat);
  border-color: var(--primary);
  transform: scale(1.05);
}

.sidebar-theme-toggle .theme-icon {
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}

.sidebar-theme-toggle .theme-icon.sun {
  opacity: 1;
}

.sidebar-theme-toggle .theme-icon.moon {
  opacity: 0;
}

body.dark-mode .sidebar-theme-toggle .theme-icon.sun {
  opacity: 0;
}

body.dark-mode .sidebar-theme-toggle .theme-icon.moon {
  opacity: 1;
}