Spaces:

wiizm
/

soyailabs

Running on CPU Upgrade

SOY NV AI

Add Hugging Face Spaces deployment support and file public/private feature

ae31891 5 days ago

119 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SOY AI 작품 개발 어시스턴트</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	:root {
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-tertiary: #f1f3f4;
	--text-primary: #202124;
	--text-secondary: #5f6368;
	--accent: #1a73e8;
	--accent-hover: #1557b0;
	--border: #dadce0;
	--user-bg: #e8f0fe;
	--ai-bg: #f1f3f4;
	--shadow: rgba(0, 0, 0, 0.1);
	}

	body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--bg-primary);
	color: var(--text-primary);
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	}

	/* 사이드바 */
	.sidebar {
	width: 280px;
	background: var(--bg-secondary);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	height: 100vh;
	transition: width 0.3s ease;
	flex-shrink: 0;
	}

	.sidebar.collapsed {
	width: 64px;
	}

	.sidebar.collapsed .sidebar-title-text {
	display: none;
	}

	.sidebar.collapsed .sidebar-title {
	justify-content: center;
	}

	.sidebar.collapsed .sidebar-logo {
	display: none;
	}

	.sidebar.collapsed .new-chat-button span {
	display: none;
	}

	.sidebar.collapsed .new-chat-button {
	justify-content: center;
	padding: 12px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin: 12px auto;
	}

	.sidebar.collapsed .chat-item-title,
	.sidebar.collapsed .chat-item-time {
	display: none;
	}

	.sidebar.collapsed .chat-item {
	justify-content: center;
	padding: 12px;
	}

	.sidebar.collapsed .available-models-list,
	.sidebar.collapsed .model-selector-label,
	.sidebar.collapsed .model-select,
	.sidebar.collapsed .model-status,
	.sidebar.collapsed .refresh-models-btn {
	display: none;
	}

	.sidebar.collapsed .novel-selector-label,
	.sidebar.collapsed .novel-list,
	.sidebar.collapsed .selected-novels-info {
	display: none;
	}

	.sidebar.collapsed .novel-selector {
	padding: 8px;
	}

	.sidebar.collapsed .logout-button span {
	display: none;
	}

	.sidebar.collapsed .logout-button {
	justify-content: center;
	padding: 12px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	}

	.sidebar.collapsed .chat-history {
	padding: 4px;
	}

	.sidebar-header {
	padding: 16px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	}

	.sidebar-title {
	font-size: 18px;
	font-weight: 500;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 8px;
	}

	.sidebar-title img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	}

	.sidebar-toggle {
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	border-radius: 50%;
	color: var(--text-secondary);
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.sidebar-toggle:hover {
	background: var(--bg-tertiary);
	}

	.new-chat-button {
	margin: 12px 16px;
	padding: 12px 16px;
	background: var(--accent);
	color: white;
	border: none;
	border-radius: 24px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background 0.2s;
	}

	.new-chat-button:hover {
	background: var(--accent-hover);
	}

	.new-chat-button svg {
	width: 18px;
	height: 18px;
	}

	.chat-history {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
	}

	.chat-history::-webkit-scrollbar {
	width: 6px;
	}

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

	.chat-history::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
	}

	.chat-history::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
	}

	.chat-item {
	padding: 12px 16px;
	margin: 4px 0;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text-primary);
	text-decoration: none;
	}

	.chat-item:hover {
	background: var(--bg-tertiary);
	}

	.chat-item.active {
	background: var(--accent);
	color: white;
	}

	.chat-item-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	}

	.chat-item-title {
	flex: 1;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.chat-item-time {
	font-size: 12px;
	opacity: 0.7;
	flex-shrink: 0;
	}

	.chat-item.active .chat-item-time {
	opacity: 0.9;
	}

	/* AI 모델 선택 영역 */
	.available-models-list {
	border-top: 1px solid var(--border);
	padding: 16px;
	background: var(--bg-primary);
	}

	.available-models-list .model-select {
	margin-top: 8px;
	}

	.available-models-list .model-select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	}

	.model-selector {
	border-top: 1px solid var(--border);
	padding: 16px;
	background: var(--bg-primary);
	}

	.model-selector-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-secondary);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	}

	.model-selector-label svg {
	width: 16px;
	height: 16px;
	}

	.model-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
	}

	.model-select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
	}

	.model-status {
	margin-top: 8px;
	font-size: 11px;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 4px;
	}

	.model-status.connected {
	color: #34a853;
	}

	.model-status.error {
	color: #ea4335;
	}

	.model-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	}

	.refresh-models-btn {
	margin-top: 8px;
	width: 100%;
	padding: 8px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--text-primary);
	font-size: 12px;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	}

	.refresh-models-btn:hover {
	background: var(--border);
	}

	.refresh-models-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	}

	.refresh-models-btn svg {
	width: 14px;
	height: 14px;
	}

	/* 웹소설 선택 영역 */
	.novel-selector {
	border-top: 1px solid var(--border);
	padding: 16px;
	background: var(--bg-primary);
	max-height: 300px;
	display: flex;
	flex-direction: column;
	}

	.novel-selector-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-secondary);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	}

	.novel-selector-label svg {
	width: 16px;
	height: 16px;
	}

	.novel-list {
	max-height: 200px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	}

	.novel-list::-webkit-scrollbar {
	width: 4px;
	}

	.novel-list::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 2px;
	}

	.novel-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: var(--bg-secondary);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s;
	}

	.novel-item:hover {
	background: var(--bg-tertiary);
	}

	.novel-item input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
	flex-shrink: 0;
	}

	.novel-item-name {
	flex: 1;
	font-size: 12px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.novel-item-empty {
	padding: 16px;
	text-align: center;
	color: var(--text-secondary);
	font-size: 12px;
	}

	.selected-novels-info {
	margin-top: 8px;
	font-size: 11px;
	color: var(--text-secondary);
	}

	.selected-novels-info.has-selection {
	color: var(--accent);
	}

	/* 모달 스타일 */
	.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	}

	.modal-content {
	background-color: var(--bg-primary);
	margin: 5% auto;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	width: 90%;
	max-width: 800px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	}

	.modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--bg-secondary);
	}

	.modal-header h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	color: var(--text-primary);
	}

	.modal-close {
	background: none;
	border: none;
	font-size: 28px;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s;
	}

	.modal-close:hover {
	background: var(--bg-tertiary);
	}

	.modal-body {
	padding: 24px;
	overflow-y: auto;
	}

	.webnovel-item {
	padding: 16px;
	margin-bottom: 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-secondary);
	cursor: pointer;
	transition: all 0.2s;
	}

	.webnovel-item:hover {
	background: var(--bg-tertiary);
	border-color: var(--accent);
	}

	.webnovel-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	}

	.webnovel-item-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-primary);
	}

	.webnovel-item-meta {
	font-size: 12px;
	color: var(--text-secondary);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	}

	.webnovel-item-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	}

	.webnovel-item-btn {
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s;
	}

	.webnovel-item-btn:hover {
	background: var(--accent);
	color: white;
	border-color: var(--accent);
	}

	/* 로그아웃 버튼 */
	.sidebar-footer {
	border-top: 1px solid var(--border);
	padding: 16px;
	background: var(--bg-primary);
	margin-top: auto;
	}

	.logout-button {
	width: 100%;
	padding: 12px 16px;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	}

	.logout-button:hover {
	background: var(--bg-tertiary);
	border-color: var(--accent);
	}

	.logout-button svg {
	width: 18px;
	height: 18px;
	}

	/* 메인 콘텐츠 영역 */
	.main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	}

	/* 헤더 */
	.header {
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border);
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 1px 2px var(--shadow);
	z-index: 10;
	}

	.header-title {
	font-size: 20px;
	font-weight: 500;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.header-title img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	}

	.header-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	}

	.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	padding: 8px;
	color: var(--text-primary);
	}

	.mobile-menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	}

	.mobile-menu.active {
	display: block;
	}

	.mobile-menu-content {
	position: fixed;
	top: 0;
	right: -100%;
	width: 280px;
	max-width: 80%;
	height: 100%;
	background: var(--bg-primary);
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
	transition: right 0.3s ease;
	overflow-y: auto;
	z-index: 1001;
	}

	.mobile-menu.active .mobile-menu-content {
	right: 0;
	}

	.mobile-menu-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--bg-primary);
	position: sticky;
	top: 0;
	z-index: 10;
	}

	.mobile-menu-title {
	font-size: 18px;
	font-weight: 500;
	}

	.mobile-menu-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--text-primary);
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.mobile-menu-items {
	padding: 8px 0;
	}

	.mobile-menu-item {
	display: block;
	padding: 12px 20px;
	color: var(--text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--bg-tertiary);
	transition: background 0.2s;
	}

	.mobile-menu-item:hover {
	background: var(--bg-secondary);
	}

	.mobile-menu-user {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
	color: var(--text-secondary);
	font-size: 14px;
	}

	@media (max-width: 768px) {
	.header {
	padding: 12px 16px;
	}

	.header-title {
	font-size: 18px;
	}

	.menu-toggle {
	display: block;
	}

	.header-actions {
	display: none;
	}
	}

	.btn-icon {
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	border-radius: 50%;
	color: var(--text-secondary);
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.btn-icon:hover {
	background: var(--bg-tertiary);
	}

	.btn-text-icon {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 6px;
	transition: background 0.2s;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	text-decoration: none;
	}

	.btn-text-icon:hover {
	background: var(--bg-tertiary);
	color: var(--accent);
	}

	/* 채팅 영역 */
	.chat-container {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--bg-primary);
	}

	.chat-container::-webkit-scrollbar {
	width: 8px;
	}

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

	.chat-container::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 4px;
	}

	.chat-container::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
	}

	/* 메시지 */
	.message {
	display: flex;
	gap: 12px;
	max-width: 800px;
	animation: fadeIn 0.3s ease-in;
	}

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

	.message.user {
	align-self: flex-end;
	flex-direction: row-reverse;
	}

	.message.ai {
	flex-direction: column;
	align-items: flex-start;
	}

	.message-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	}

	.message.ai .message-avatar {
	width: 24px;
	height: 24px;
	font-size: 14px;
	margin-bottom: 8px;
	}

	.message.user .message-avatar {
	background: var(--accent);
	color: white;
	}

	.message.ai .message-avatar {
	background: var(--bg-tertiary);
	color: var(--text-primary);
	}

	.message-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	}

	.message-bubble {
	padding: 12px 16px;
	border-radius: 18px;
	line-height: 1.5;
	font-size: 15px;
	word-wrap: break-word;
	white-space: pre-wrap;
	}

	.message.ai .message-bubble {
	white-space: pre-wrap; /* 줄바꿈 보존 */
	}

	.message.ai .message-bubble br {
	display: block;
	content: "";
	margin: 0;
	}

	.message.user .message-bubble {
	background: var(--accent);
	color: white;
	border-bottom-right-radius: 4px;
	}

	.message.ai .message-bubble {
	background: var(--ai-bg);
	color: var(--text-primary);
	border-bottom-left-radius: 4px;
	}

	/* 마크다운 스타일 */
	.message.ai .message-bubble h1,
	.message.ai .message-bubble h2,
	.message.ai .message-bubble h3,
	.message.ai .message-bubble h4,
	.message.ai .message-bubble h5,
	.message.ai .message-bubble h6 {
	margin: 12px 0 8px 0;
	font-weight: 600;
	line-height: 1.3;
	}

	.message.ai .message-bubble h1 {
	font-size: 1.5em;
	border-bottom: 2px solid var(--border);
	padding-bottom: 8px;
	}

	.message.ai .message-bubble h2 {
	font-size: 1.3em;
	border-bottom: 1px solid var(--border);
	padding-bottom: 6px;
	}

	.message.ai .message-bubble h3 {
	font-size: 1.1em;
	}

	.message.ai .message-bubble h4 {
	font-size: 1em;
	}

	.message.ai .message-bubble h5 {
	font-size: 0.9em;
	}

	.message.ai .message-bubble h6 {
	font-size: 0.85em;
	}

	.message.ai .message-bubble p {
	margin: 8px 0;
	line-height: 1.6;
	}

	.message.ai .message-bubble code {
	background: var(--bg-tertiary);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Courier New', monospace;
	font-size: 0.9em;
	color: var(--accent);
	}

	.message.ai .message-bubble pre {
	background: var(--bg-tertiary);
	padding: 12px;
	border-radius: 8px;
	overflow-x: auto;
	margin: 12px 0;
	border: 1px solid var(--border);
	}

	.message.ai .message-bubble pre code {
	background: none;
	padding: 0;
	color: var(--text-primary);
	font-size: 0.85em;
	}

	.message.ai .message-bubble ul,
	.message.ai .message-bubble ol {
	margin: 8px 0;
	padding-left: 24px;
	}

	.message.ai .message-bubble li {
	margin: 4px 0;
	line-height: 1.5;
	}

	.message.ai .message-bubble blockquote {
	border-left: 4px solid var(--accent);
	padding-left: 16px;
	margin: 12px 0;
	color: var(--text-secondary);
	font-style: italic;
	}

	.message.ai .message-bubble hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 16px 0;
	}

	.message.ai .message-bubble a {
	color: var(--accent);
	text-decoration: underline;
	}

	.message.ai .message-bubble a:hover {
	opacity: 0.8;
	}

	.message.ai .message-bubble img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 12px 0;
	}

	.message.ai .message-bubble strong {
	font-weight: 600;
	}

	.message.ai .message-bubble em {
	font-style: italic;
	}

	/* 각주 스타일 */
	.footnote-ref {
	font-size: 0.75em;
	vertical-align: super;
	color: var(--accent);
	cursor: help;
	text-decoration: underline;
	text-decoration-style: dotted;
	position: relative;
	font-weight: 500;
	display: inline-block;
	}

	.footnote-ref:hover {
	color: var(--accent-hover);
	}

	/* 각주 툴팁 */
	.footnote-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.95);
	color: white;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 0.75em;
	max-width: 350px;
	min-width: 200px;
	word-wrap: break-word;
	white-space: normal;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
	z-index: 10000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	line-height: 1.4;
	text-align: left;
	}

	.footnote-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: rgba(0, 0, 0, 0.95);
	}

	.footnote-ref:hover .footnote-tooltip {
	opacity: 1;
	}

	/* 각주 번호가 화면 위쪽에 있으면 툴팁을 아래쪽에 표시 */
	.message-bubble {
	position: relative;
	}

	/* 각주 목록 컨테이너 */
	.footnotes-container {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
	font-size: 0.85em;
	color: var(--text-secondary);
	}

	.footnote-item {
	margin-bottom: 6px;
	line-height: 1.4;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	}

	.footnote-item sup {
	font-size: 0.9em;
	color: var(--accent);
	font-weight: 500;
	}

	.footnote-item span {
	flex: 1;
	}

	.message-time {
	font-size: 12px;
	color: var(--text-secondary);
	padding: 0 4px;
	}

	.message.user .message-time {
	text-align: right;
	}

	/* 입력 영역 */
	.input-container {
	background: var(--bg-primary);
	border-top: 1px solid var(--border);
	padding: 16px 24px;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	}

	.input-wrapper {
	flex: 1;
	position: relative;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: border-color 0.2s, box-shadow 0.2s;
	}

	.input-wrapper:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
	}

	#messageInput {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 15px;
	font-family: inherit;
	color: var(--text-primary);
	resize: none;
	max-height: 200px;
	min-height: 24px;
	line-height: 1.5;
	}

	#messageInput::placeholder {
	color: var(--text-secondary);
	}

	.send-button {
	background: var(--accent);
	color: white;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
	flex-shrink: 0;
	}

	.send-button:hover:not(:disabled) {
	background: var(--accent-hover);
	transform: scale(1.05);
	}

	.send-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	}

	.send-button svg {
	width: 20px;
	height: 20px;
	}

	/* 로딩 인디케이터 */
	.typing-indicator {
	display: flex;
	gap: 4px;
	padding: 12px 16px;
	background: var(--ai-bg);
	border-radius: 18px;
	border-bottom-left-radius: 4px;
	width: fit-content;
	}

	.typing-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text-secondary);
	animation: typing 1.4s infinite;
	}

	.typing-dot:nth-child(2) {
	animation-delay: 0.2s;
	}

	.typing-dot:nth-child(3) {
	animation-delay: 0.4s;
	}

	@keyframes typing {
	0%, 60%, 100% {
	transform: translateY(0);
	opacity: 0.7;
	}
	30% {
	transform: translateY(-10px);
	opacity: 1;
	}
	}

	/* 빈 상태 */
	.empty-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 24px;
	color: var(--text-secondary);
	}

	.empty-state-icon {
	font-size: 64px;
	margin-bottom: 16px;
	opacity: 0.5;
	}

	.empty-state-title {
	font-size: 24px;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 8px;
	}

	.empty-state-description {
	font-size: 15px;
	max-width: 500px;
	}

	/* 사이드바 오버레이 (모바일) */
	.sidebar-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	}

	.sidebar-overlay.active {
	display: block;
	}

	/* 반응형 */
	@media (max-width: 768px) {
	.sidebar {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	box-shadow: 2px 0 8px var(--shadow);
	width: 0;
	overflow: hidden;
	transition: width 0.3s ease;
	}

	.sidebar:not(.collapsed) {
	width: 280px;
	}

	.sidebar.collapsed {
	width: 0;
	}

	.main-content {
	width: 100%;
	}

	.header {
	padding: 12px 16px;
	}

	.header-title {
	font-size: 18px;
	}

	#sidebarToggleBtn {
	display: flex !important;
	}

	.chat-container {
	padding: 16px;
	}

	.message {
	max-width: 100%;
	}

	.input-container {
	padding: 12px 16px;
	}
	}
	</style>
	</head>
	<body>
	<!-- 사이드바 -->
	<div class="sidebar" id="sidebar">
	<div class="sidebar-header">
	<div class="sidebar-title">
	<img src="{{ url_for('static', filename='logo.webp') }}" alt="SOY AI 로고" class="sidebar-logo">
	<span class="sidebar-title-text">작품 개발 어시스턴트</span>
	</div>
	<button class="sidebar-toggle" onclick="toggleSidebar()" title="사이드바 접기">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M9 18l-6-6 6-6M21 18l-6-6 6-6"/>
	</svg>
	</button>
	</div>
	<button class="new-chat-button" onclick="startNewChat()">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M12 5v14M5 12h14"/>
	</svg>
	<span>새 대화</span>
	</button>
	<div class="chat-history" id="chatHistory">
	<!-- 대화 히스토리 항목들이 여기에 동적으로 추가됩니다 -->
	</div>

	<!-- 사용 가능한 AI 목록 -->
	<div class="available-models-list">
	<div class="model-selector-label">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
	</svg>
	사용 가능한 AI 목록
	</div>
	<select class="model-select" id="availableModelsSelect">
	<option value="">AI 목록을 불러오는 중...</option>
	</select>
	</div>

	<!-- AI 모델 선택 영역 -->
	<div class="model-selector">
	<div class="model-selector-label">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
	</svg>
	AI 모델 선택
	</div>
	<select class="model-select" id="modelSelect">
	<option value="">모델을 선택하세요...</option>
	</select>
	<div class="model-status" id="modelStatus">
	<span class="model-status-dot"></span>
	<span>연결 안 됨</span>
	</div>
	<button class="refresh-models-btn" id="refreshModelsBtn" onclick="loadModels()">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
	</svg>
	모델 새로고침
	</button>
	</div>

	<!-- 웹소설 선택 영역 -->
	<div class="novel-selector">
	<div class="novel-selector-label">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8"/>
	</svg>
	학습할 웹소설 선택
	</div>
	<div class="novel-list" id="novelList">
	<div class="novel-item-empty">웹소설 목록을 불러오는 중...</div>
	</div>
	<div class="selected-novels-info" id="selectedNovelsInfo"></div>
	</div>

	<!-- 로그아웃 버튼 -->
	<div class="sidebar-footer">
	<a href="{{ url_for('main.logout') }}" class="logout-button" title="로그아웃">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>
	</svg>
	<span>로그아웃</span>
	</a>
	</div>
	</div>

	<!-- 사이드바 오버레이 (모바일) -->
	<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebarOnMobile()"></div>

	<!-- 메인 콘텐츠 -->
	<div class="main-content">
	<!-- 헤더 -->
	<div class="header">
	<div class="header-title">
	<button class="btn-icon" onclick="toggleSidebar()" title="사이드바 열기" id="sidebarToggleBtn" style="display: none;">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M3 12h18M3 6h18M3 18h18"/>
	</svg>
	</button>
	<span></span>
	</div>
	<button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="메뉴 열기">☰</button>
	<div class="header-actions">
	<span style="margin-right: 8px; font-size: 14px; color: var(--text-secondary);">{{ current_user.nickname or current_user.username }}</span>
	<a href="{{ url_for('main.webnovels') }}" class="btn-text-icon" title="원작 정보">
	<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8"/>
	</svg>
	<span>원작 정보</span>
	</a>
	{% if current_user.is_admin %}
	<a href="{{ url_for('main.admin') }}" class="btn-icon" title="관리자 페이지" style="text-decoration: none; color: var(--text-secondary);">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M12 15v2m-6 4h12a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm10-10V7a4 4 0 0 0-8 0v4h8z"/>
	</svg>
	</a>
	{% endif %}
	<a href="{{ url_for('main.logout') }}" class="btn-icon" title="로그아웃" style="text-decoration: none; color: var(--text-secondary);">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>
	</svg>
	</a>
	<button class="btn-icon" onclick="clearChat()" title="대화 초기화">
	<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14z"/>
	</svg>
	</button>
	</div>
	</div>

	<!-- 모바일 메뉴 -->
	<div class="mobile-menu" id="mobileMenu" onclick="closeMobileMenuOnBackdrop(event)">
	<div class="mobile-menu-content" onclick="event.stopPropagation()">
	<div class="mobile-menu-header">
	<div class="mobile-menu-title">메뉴</div>
	<button class="mobile-menu-close" onclick="toggleMobileMenu()" aria-label="메뉴 닫기">×</button>
	</div>
	<div class="mobile-menu-user">{{ current_user.nickname or current_user.username }}</div>
	<div class="mobile-menu-items">
	<a href="{{ url_for('main.webnovels') }}" class="mobile-menu-item" onclick="closeMobileMenu()">원작 정보</a>
	{% if current_user.is_admin %}
	<a href="{{ url_for('main.admin') }}" class="mobile-menu-item" onclick="closeMobileMenu()">관리자 페이지</a>
	{% endif %}
	<a href="{{ url_for('main.logout') }}" class="mobile-menu-item" onclick="closeMobileMenu()">로그아웃</a>
	</div>
	</div>
	</div>

	<!-- 채팅 영역 -->
	<div class="chat-container" id="chatContainer">
	<div class="empty-state" id="emptyState">
	<div class="empty-state-icon">💬</div>
	<div class="empty-state-title">SOYMEDIA 작품 세계에 오신 것을 환영합니다</div>
	<div class="empty-state-description">
	무엇이든 물어보세요. AI가 도와드리겠습니다.
	</div>
	</div>
	</div>

	<!-- 입력 영역 -->
	<div class="input-container">
	<div class="input-wrapper">
	<textarea
	id="messageInput"
	placeholder="메시지를 입력하세요..."
	rows="1"
	></textarea>
	<button class="send-button" id="sendButton" onclick="sendMessage()">
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
	</svg>
	</button>
	</div>
	</div>
	</div>

	<!-- 웹소설 보기 모달 -->
	<div id="webnovelsModal" class="modal" style="display: none;">
	<div class="modal-content" style="max-width: 900px; max-height: 90vh;">
	<div class="modal-header">
	<h2>업로드된 웹소설</h2>
	<button class="modal-close" onclick="closeWebnovelsModal()">×</button>
	</div>
	<div class="modal-body" style="display: flex; flex-direction: column; height: calc(90vh - 120px);">
	<div style="margin-bottom: 16px;">
	<select id="webnovelModelFilter" onchange="loadWebnovels()" style="width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary);">
	<option value="">모든 모델</option>
	</select>
	</div>
	<div id="webnovelsList" style="flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 12px;">
	<div style="text-align: center; color: var(--text-secondary); padding: 24px;">
	웹소설 목록을 불러오는 중...
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 웹소설 내용 보기 모달 -->
	<div id="webnovelContentModal" class="modal" style="display: none;">
	<div class="modal-content" style="max-width: 1000px; max-height: 90vh;">
	<div class="modal-header">
	<h2 id="webnovelContentTitle">웹소설 내용</h2>
	<button class="modal-close" onclick="closeWebnovelContentModal()">×</button>
	</div>
	<!-- 검색 영역 -->
	<div style="padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
	<div style="display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px;">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--text-secondary);">
	<circle cx="11" cy="11" r="8"></circle>
	<path d="m21 21-4.35-4.35"></path>
	</svg>
	<input type="text" id="webnovelSearchInput" placeholder="검색어를 입력하세요..."
	style="flex: 1; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; outline: none;"
	onkeydown="if(event.key === 'Enter') performWebnovelSearch()">
	</div>
	<button onclick="performWebnovelSearch()"
	style="padding: 6px 16px; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500;">
	검색
	</button>
	<button onclick="clearWebnovelSearch()"
	style="padding: 6px 16px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 14px;">
	초기화
	</button>
	<div id="webnovelSearchInfo" style="font-size: 12px; color: var(--text-secondary); min-width: 120px; text-align: right;">
	<!-- 검색 결과 정보 표시 -->
	</div>
	</div>
	<div style="padding: 8px 24px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); display: flex; gap: 8px; align-items: center; justify-content: center;">
	<button onclick="scrollToPreviousMatch()" id="prevMatchBtn"
	style="padding: 4px 12px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 12px;"
	disabled>
	← 이전
	</button>
	<button onclick="scrollToNextMatch()" id="nextMatchBtn"
	style="padding: 4px 12px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 12px;"
	disabled>
	다음 →
	</button>
	</div>
	<div class="modal-body" style="height: calc(90vh - 200px); overflow-y: auto; position: relative;" id="webnovelContentContainer">
	<div id="webnovelContent" style="white-space: pre-wrap; font-family: inherit; line-height: 1.6; color: var(--text-primary); padding: 16px;">
	내용을 불러오는 중...
	</div>
	</div>
	</div>
	</div>

	<script>
	function toggleMobileMenu() {
	const menu = document.getElementById('mobileMenu');
	menu.classList.toggle('active');
	document.body.style.overflow = menu.classList.contains('active') ? 'hidden' : '';
	}

	function closeMobileMenu() {
	const menu = document.getElementById('mobileMenu');
	menu.classList.remove('active');
	document.body.style.overflow = '';
	}

	function closeMobileMenuOnBackdrop(event) {
	if (event.target.id === 'mobileMenu') {
	closeMobileMenu();
	}
	}

	const chatContainer = document.getElementById('chatContainer');
	const messageInput = document.getElementById('messageInput');
	const sendButton = document.getElementById('sendButton');
	const emptyState = document.getElementById('emptyState');
	const sidebar = document.getElementById('sidebar');
	const chatHistory = document.getElementById('chatHistory');
	const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
	const modelSelect = document.getElementById('modelSelect');
	const modelStatus = document.getElementById('modelStatus');
	const refreshModelsBtn = document.getElementById('refreshModelsBtn');

	let currentChatId = null;
	let currentSessionId = null;
	let chatSessions = [];
	let selectedModel = localStorage.getItem('selectedModel') \|\| ''; // 질문 분석용 모델
	let answerModel = localStorage.getItem('answerModel') \|\| ''; // 최종 답변용 모델
	let selectedFileIds = JSON.parse(localStorage.getItem('selectedFileIds') \|\| '[]');

	const novelList = document.getElementById('novelList');
	const selectedNovelsInfo = document.getElementById('selectedNovelsInfo');

	// 모델 선택 이벤트 (질문 분석용)
	modelSelect.addEventListener('change', function() {
	selectedModel = this.value;
	localStorage.setItem('selectedModel', selectedModel);
	updateModelStatus('connected');
	loadNovels(); // 모델 변경 시 웹소설 목록 로드
	});

	// 사용 가능한 AI 목록 선택 이벤트 (최종 답변용)
	const availableModelsSelect = document.getElementById('availableModelsSelect');
	availableModelsSelect.addEventListener('change', function() {
	answerModel = this.value;
	localStorage.setItem('answerModel', answerModel);
	// 선택된 모델이 있으면 콘솔에 로그 출력 (디버깅용)
	if (answerModel) {
	console.log('[답변 모델 선택]', answerModel);
	}
	});

	// 웹소설 목록 로드
	async function loadNovels() {
	try {
	// 모델이 선택되어 있으면 해당 모델의 파일만, 없으면 모든 파일
	// 공개 파일만 조회 (public_only=true)
	const url = selectedModel
	? `/api/files?model_name=${encodeURIComponent(selectedModel)}&public_only=true`
	: '/api/files?public_only=true';

	console.log('[웹소설 목록] API 요청:', url, '선택된 모델:', selectedModel \|\| '없음 (전체)');

	const response = await fetch(url, {
	credentials: 'include'
	});

	console.log('[웹소설 목록] 응답 상태:', response.status, response.statusText);

	if (!response.ok) {
	const errorText = await response.text();
	console.error('[웹소설 목록] 응답 오류:', errorText);
	throw new Error(`웹소설 목록을 불러올 수 없습니다. (${response.status})`);
	}

	const data = await response.json();
	console.log('[웹소설 목록] 응답 데이터:', data);
	console.log('[웹소설 목록] files 배열:', data.files);

	novelList.innerHTML = '';

	// API 응답은 { files: [...], model_stats: {...} } 형태
	let files = data.files \|\| [];
	console.log('[웹소설 목록] 파일 개수:', files.length);

	// 모델이 선택되어 있는데 해당 모델의 파일이 없으면, 모든 파일 다시 조회 (공개 파일만)
	if (selectedModel && files.length === 0) {
	console.log('[웹소설 목록] 선택한 모델에 파일이 없어 전체 파일 조회 중...');
	try {
	const allFilesResponse = await fetch('/api/files?public_only=true', {
	credentials: 'include'
	});
	if (allFilesResponse.ok) {
	const allFilesData = await allFilesResponse.json();
	files = allFilesData.files \|\| [];
	console.log('[웹소설 목록] 전체 파일 개수:', files.length);
	}
	} catch (e) {
	console.error('[웹소설 목록] 전체 파일 조회 오류:', e);
	}
	}

	if (files.length > 0) {
	files.forEach(file => {
	console.log('[웹소설 목록] 파일 처리:', file);
	const novelItem = document.createElement('div');
	novelItem.className = 'novel-item';

	const checkbox = document.createElement('input');
	checkbox.type = 'checkbox';
	checkbox.id = `novel-${file.id}`;
	checkbox.value = file.id;
	checkbox.checked = selectedFileIds.includes(file.id);
	checkbox.addEventListener('change', updateSelectedNovels);

	const label = document.createElement('label');
	label.className = 'novel-item-name';
	label.htmlFor = `novel-${file.id}`;
	// 모델 정보도 함께 표시
	const displayText = files.some(f => f.model_name && f.model_name !== selectedModel)
	? `${file.original_filename} (${file.model_name \|\| '미지정'})`
	: file.original_filename;
	label.textContent = displayText;
	label.title = `${file.original_filename} (${file.model_name \|\| '미지정'})`;

	novelItem.appendChild(checkbox);
	novelItem.appendChild(label);
	novelList.appendChild(novelItem);
	});
	updateSelectedNovelsInfo();
	} else {
	// 모든 파일을 조회했는데도 없으면 진짜 없는 것
	novelList.innerHTML = '<div class="novel-item-empty">업로드된 웹소설이 없습니다</div>';
	selectedNovelsInfo.textContent = '';
	}
	} catch (error) {
	console.error('[웹소설 목록] 로드 오류:', error);
	novelList.innerHTML = `<div class="novel-item-empty">웹소설 목록을 불러올 수 없습니다<br><small style="color: #ea4335;">${error.message}</small></div>`;
	selectedNovelsInfo.textContent = '';
	}
	}

	// 선택된 웹소설 업데이트
	function updateSelectedNovels() {
	const checkboxes = novelList.querySelectorAll('input[type="checkbox"]');
	selectedFileIds = Array.from(checkboxes)
	.filter(cb => cb.checked)
	.map(cb => parseInt(cb.value));

	localStorage.setItem('selectedFileIds', JSON.stringify(selectedFileIds));
	updateSelectedNovelsInfo();
	}

	// 선택된 웹소설 정보 표시
	function updateSelectedNovelsInfo() {
	if (selectedFileIds.length === 0) {
	selectedNovelsInfo.textContent = '선택된 웹소설 없음 (모든 웹소설 사용)';
	selectedNovelsInfo.className = 'selected-novels-info';
	} else {
	const count = selectedFileIds.length;
	selectedNovelsInfo.textContent = `${count}개 웹소설 선택됨`;
	selectedNovelsInfo.className = 'selected-novels-info has-selection';
	}
	}

	// 사용 가능한 AI 목록 로드 (모든 모델)
	async function loadAvailableModels() {
	const availableModelsSelect = document.getElementById('availableModelsSelect');
	availableModelsSelect.disabled = true;
	availableModelsSelect.innerHTML = '<option value="">AI 목록을 불러오는 중...</option>';

	try {
	const response = await fetch('/api/ollama/models?all=true');
	const data = await response.json();

	availableModelsSelect.innerHTML = '<option value="">답변 생성할 AI 모델을 선택하세요...</option>';

	if (data.models && data.models.length > 0) {
	// 모델을 타입별로 그룹화
	const ollamaModels = [];
	const geminiModels = [];

	data.models.forEach(model => {
	if (model.type === 'gemini') {
	geminiModels.push(model);
	} else {
	ollamaModels.push(model);
	}
	});

	// Ollama 모델 그룹
	if (ollamaModels.length > 0) {
	const optgroup = document.createElement('optgroup');
	optgroup.label = '🤖 Ollama 모델';
	ollamaModels.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	option.textContent = model.name;
	if (model.name === answerModel) {
	option.selected = true;
	}
	optgroup.appendChild(option);
	});
	availableModelsSelect.appendChild(optgroup);
	}

	// Gemini 모델 그룹
	if (geminiModels.length > 0) {
	const optgroup = document.createElement('optgroup');
	optgroup.label = '✨ Gemini 모델';
	geminiModels.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	// "gemini:" 접두사 제거하여 표시
	const displayName = model.name.startsWith('gemini:')
	? model.name.substring(7)
	: model.name;
	option.textContent = displayName;
	if (model.name === answerModel) {
	option.selected = true;
	}
	optgroup.appendChild(option);
	});
	availableModelsSelect.appendChild(optgroup);
	}

	availableModelsSelect.disabled = false;
	} else {
	availableModelsSelect.innerHTML = '<option value="">등록된 AI 모델이 없습니다</option>';
	}
	} catch (error) {
	availableModelsSelect.innerHTML = '<option value="">모델 목록 로드 실패</option>';
	console.error('사용 가능한 모델 로드 오류:', error);
	}
	}

	// 모델 목록 로드 (학습된 웹소설이 있는 모델만)
	async function loadModels() {
	refreshModelsBtn.disabled = true;
	refreshModelsBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg> 로딩 중...';

	try {
	const response = await fetch('/api/ollama/models');
	const data = await response.json();

	modelSelect.innerHTML = '<option value="">모델을 선택하세요...</option>';

	if (data.models && data.models.length > 0) {
	// 모델을 타입별로 그룹화
	const ollamaModels = [];
	const geminiModels = [];

	data.models.forEach(model => {
	if (model.type === 'gemini') {
	geminiModels.push(model);
	} else {
	ollamaModels.push(model);
	}
	});

	// 드롭다운에 추가
	// Ollama 모델 그룹
	if (ollamaModels.length > 0) {
	const optgroup = document.createElement('optgroup');
	optgroup.label = '🤖 Ollama 모델';
	ollamaModels.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	option.textContent = model.name;
	if (model.name === selectedModel) {
	option.selected = true;
	}
	optgroup.appendChild(option);
	});
	modelSelect.appendChild(optgroup);
	}

	// Gemini 모델 그룹
	if (geminiModels.length > 0) {
	const optgroup = document.createElement('optgroup');
	optgroup.label = '✨ Gemini 모델';
	geminiModels.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	// "gemini:" 접두사 제거하여 표시
	const displayName = model.name.startsWith('gemini:')
	? model.name.substring(7)
	: model.name;
	option.textContent = displayName;
	if (model.name === selectedModel) {
	option.selected = true;
	}
	optgroup.appendChild(option);
	});
	modelSelect.appendChild(optgroup);
	}

	updateModelStatus('connected');
	} else {
	updateModelStatus('error', '사용 가능한 모델이 없습니다');
	}
	} catch (error) {
	updateModelStatus('error', '모델 목록 로드 실패');
	console.error('모델 로드 오류:', error);
	} finally {
	refreshModelsBtn.disabled = false;
	refreshModelsBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg> 모델 새로고침';
	}
	}

	// 모델 상태 업데이트
	function updateModelStatus(status = 'disconnected', message = '') {
	modelStatus.className = 'model-status';
	if (status === 'connected') {
	modelStatus.classList.add('connected');
	// 선택된 모델 타입에 따라 메시지 변경
	if (selectedModel) {
	const modelType = selectedModel.toLowerCase().startsWith('gemini') ? 'Gemini' : 'Ollama';
	modelStatus.innerHTML = `<span class="model-status-dot"></span><span>${modelType} 모델 선택됨</span>`;
	} else {
	modelStatus.innerHTML = '<span class="model-status-dot"></span><span>모델 선택 가능</span>';
	}
	} else if (status === 'error') {
	modelStatus.classList.add('error');
	modelStatus.innerHTML = `<span class="model-status-dot"></span><span>${message \|\| '오류'}</span>`;
	} else {
	modelStatus.innerHTML = '<span class="model-status-dot"></span><span>모델을 선택하세요</span>';
	}
	}

	// 사이드바 토글
	function toggleSidebar() {
	sidebar.classList.toggle('collapsed');
	const isCollapsed = sidebar.classList.contains('collapsed');
	const overlay = document.getElementById('sidebarOverlay');

	if (window.innerWidth <= 768) {
	sidebarToggleBtn.style.display = isCollapsed ? 'flex' : 'none';
	// 모바일에서 사이드바가 열릴 때 배경 오버레이 추가
	if (!isCollapsed) {
	if (overlay) overlay.classList.add('active');
	document.body.style.overflow = 'hidden';
	} else {
	if (overlay) overlay.classList.remove('active');
	document.body.style.overflow = '';
	}
	} else {
	if (overlay) overlay.classList.remove('active');
	}

	// 사이드바 내부 토글 버튼 아이콘 업데이트
	const sidebarToggle = sidebar.querySelector('.sidebar-toggle');
	if (sidebarToggle) {
	sidebarToggle.innerHTML = isCollapsed ?
	'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>' :
	'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l-6-6 6-6M21 18l-6-6 6-6"/></svg>';
	}
	}

	function closeSidebarOnMobile() {
	if (window.innerWidth <= 768) {
	sidebar.classList.add('collapsed');
	const overlay = document.getElementById('sidebarOverlay');
	if (overlay) overlay.classList.remove('active');
	document.body.style.overflow = '';
	sidebarToggleBtn.style.display = 'flex';
	}
	}

	// 반응형 사이드바 처리
	function handleResize() {
	const overlay = document.getElementById('sidebarOverlay');
	if (window.innerWidth <= 768) {
	sidebar.classList.add('collapsed');
	sidebarToggleBtn.style.display = 'flex';
	if (overlay) overlay.classList.remove('active');
	document.body.style.overflow = '';
	} else {
	sidebar.classList.remove('collapsed');
	sidebarToggleBtn.style.display = 'none';
	if (overlay) overlay.classList.remove('active');
	}
	}

	window.addEventListener('resize', handleResize);
	handleResize();

	// 새 대화 시작
	async function startNewChat() {
	if (confirm('새 대화를 시작하시겠습니까? 현재 대화는 저장됩니다.')) {
	clearChat();
	currentChatId = null;
	currentSessionId = null;
	await loadChatHistory();
	}
	}

	// 대화 히스토리 로드 (DB에서 최근 20개만)
	async function loadChatHistory() {
	chatHistory.innerHTML = '<div style="padding: 16px; text-align: center; color: var(--text-secondary); font-size: 14px;">로딩 중...</div>';

	try {
	const response = await fetch('/api/chat/sessions');

	if (!response.ok) {
	const errorData = await response.json().catch(() => ({ error: '서버 오류' }));
	throw new Error(errorData.error \|\| `HTTP ${response.status}`);
	}

	const data = await response.json();

	if (data.error) {
	throw new Error(data.error);
	}

	chatHistory.innerHTML = '';
	chatSessions = data.sessions \|\| [];

	if (chatSessions.length === 0) {
	const emptyMsg = document.createElement('div');
	emptyMsg.style.padding = '16px';
	emptyMsg.style.textAlign = 'center';
	emptyMsg.style.color = 'var(--text-secondary)';
	emptyMsg.style.fontSize = '14px';
	emptyMsg.textContent = '대화 기록이 없습니다';
	chatHistory.appendChild(emptyMsg);
	return;
	}

	chatSessions.forEach((session) => {
	const chatItem = document.createElement('div');
	chatItem.className = 'chat-item';
	if (session.id === currentSessionId) {
	chatItem.classList.add('active');
	}

	chatItem.innerHTML = `
	<svg class="chat-item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
	<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
	</svg>
	<div class="chat-item-title">${escapeHtml(session.title \|\| '새 대화')}</div>
	<div class="chat-item-time">${formatTime(session.updated_at)}</div>
	`;

	chatItem.onclick = () => loadChat(session.id);
	chatHistory.appendChild(chatItem);
	});
	} catch (error) {
	console.error('대화 히스토리 로드 오류:', error);
	chatHistory.innerHTML = `<div style="padding: 16px; text-align: center; color: #ea4335; font-size: 14px;">대화 기록을 불러올 수 없습니다<br><small>${error.message \|\| '알 수 없는 오류'}</small></div>`;
	}
	}

	// 시간 포맷
	function formatTime(timestamp) {
	const date = new Date(timestamp);
	const now = new Date();
	const diff = now - date;
	const minutes = Math.floor(diff / 60000);
	const hours = Math.floor(diff / 3600000);
	const days = Math.floor(diff / 86400000);

	if (minutes < 1) return '방금';
	if (minutes < 60) return `${minutes}분 전`;
	if (hours < 24) return `${hours}시간 전`;
	if (days < 7) return `${days}일 전`;
	return date.toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
	}

	// 대화 로드
	async function loadChat(sessionId) {
	try {
	const response = await fetch(`/api/chat/sessions/${sessionId}`);

	if (!response.ok) {
	const errorData = await response.json().catch(() => ({ error: '서버 오류' }));
	if (response.status === 404) {
	console.warn('대화 세션을 찾을 수 없습니다:', sessionId);
	// 세션이 삭제되었을 수 있으므로 히스토리만 새로고침
	await loadChatHistory();
	return;
	}
	throw new Error(errorData.error \|\| `HTTP ${response.status}`);
	}

	const data = await response.json();

	if (!data.session) {
	console.warn('세션 데이터가 없습니다:', sessionId);
	await loadChatHistory();
	return;
	}

	currentSessionId = sessionId;
	currentChatId = sessionId;
	chatContainer.innerHTML = '';

	console.log('[대화 로드] 세션 ID:', sessionId);
	console.log('[대화 로드] 메시지 개수:', data.session.messages ? data.session.messages.length : 0);

	if (data.session.messages && data.session.messages.length > 0) {
	console.log('[대화 로드] 메시지 목록:', data.session.messages.map(m => ({ id: m.id, role: m.role, content_preview: m.content ? m.content.substring(0, 50) : '' })));

	// 메시지를 순차적으로 추가
	for (let index = 0; index < data.session.messages.length; index++) {
	const msg = data.session.messages[index];
	console.log(`[대화 로드] 메시지 ${index + 1}/${data.session.messages.length} 추가 중:`, msg.id, msg.role, msg.content ? msg.content.substring(0, 50) : '');
	if (msg.content && msg.content.trim() !== '') {
	addMessage(msg.role, msg.content, false);
	} else {
	console.warn(`[대화 로드] 메시지 ${msg.id}의 내용이 비어있습니다.`);
	}
	}

	// 모든 메시지 추가 후 스크롤을 맨 아래로
	setTimeout(() => {
	chatContainer.scrollTop = chatContainer.scrollHeight;
	console.log('[대화 로드] 모든 메시지 추가 완료, 스크롤 위치:', chatContainer.scrollTop);
	}, 100);
	} else {
	console.log('[대화 로드] 메시지가 없습니다.');
	if (emptyState) {
	emptyState.style.display = 'flex';
	}
	}

	await loadChatHistory();
	if (window.innerWidth <= 768) {
	sidebar.classList.add('collapsed');
	}
	} catch (error) {
	console.error('대화 로드 오류:', error);
	// 더 자세한 에러 메시지 표시
	const errorMessage = error.message \|\| '알 수 없는 오류';
	console.error('에러 상세:', errorMessage);
	// alert 대신 콘솔에만 표시하고 히스토리 새로고침
	await loadChatHistory();
	}
	}

	// 새 대화 세션 생성
	async function createNewSession() {
	try {
	const response = await fetch('/api/chat/sessions', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify({
	title: '새 대화',
	model_name: selectedModel \|\| null, // 하위 호환성
	analysis_model: selectedModel \|\| null, // 질문 분석용 모델
	answer_model: answerModel \|\| null // 최종 답변용 모델
	})
	});

	const data = await response.json();
	if (response.ok && data.session) {
	currentSessionId = data.session.id;
	currentChatId = data.session.id;
	await loadChatHistory();
	return data.session.id;
	}
	} catch (error) {
	console.error('세션 생성 오류:', error);
	}
	return null;
	}

	// 자동 높이 조절
	messageInput.addEventListener('input', function() {
	this.style.height = 'auto';
	this.style.height = Math.min(this.scrollHeight, 200) + 'px';
	});

	// Enter 키 처리
	messageInput.addEventListener('keydown', function(e) {
	if (e.key === 'Enter' && !e.shiftKey) {
	e.preventDefault();
	sendMessage();
	}
	});

	// [근거: ] 형식을 각주로 변환하는 함수
	// 마크다운을 HTML로 변환하는 함수
	function markdownToHtml(text) {
	if (!text) return '';

	let html = text;

	// FOOTNOTE 플레이스홀더 보호 (마크다운 변환 전에 보호)
	// 이 부분은 formatContentWithFootnotes에서 처리하므로 여기서는 보호하지 않음

	// 코드 블록 처리 (```로 감싸진 부분) - 먼저 처리하여 다른 변환에 영향받지 않도록
	const codeBlocks = [];
	html = html.replace(/```([\s\S]*?)```/g, (match, code) => {
	const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`;
	codeBlocks.push({
	placeholder: placeholder,
	html: `<pre><code>${escapeHtml(code.trim())}</code></pre>`
	});
	return placeholder;
	});

	// 인라인 코드 처리 (`로 감싸진 부분) - 코드 블록이 아닌 부분만
	const inlineCodes = [];
	html = html.replace(/`([^`\n]+)`/g, (match, code) => {
	const placeholder = `__INLINE_CODE_${inlineCodes.length}__`;
	inlineCodes.push({
	placeholder: placeholder,
	html: `<code>${escapeHtml(code)}</code>`
	});
	return placeholder;
	});

	// 헤더 처리 (# ## ### #### ##### ######)
	html = html.replace(/^###### (.*$)/gim, '<h6>$1</h6>');
	html = html.replace(/^##### (.*$)/gim, '<h5>$1</h5>');
	html = html.replace(/^#### (.*$)/gim, '<h4>$1</h4>');
	html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
	html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
	html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');

	// 수평선 처리 (--- 또는 ***) - 헤더 다음에 처리
	html = html.replace(/^---$/gim, '<hr>');
	html = html.replace(/^\\\*$/gim, '<hr>');

	// 인용문 처리 (>)
	html = html.replace(/^> (.+)$/gim, '<blockquote>$1</blockquote>');

	// 순서 없는 리스트 처리 (- 또는 * 또는 +)
	html = html.replace(/^[\*\-\+] (.+)$/gim, '<li>$1</li>');
	// 연속된 <li> 태그를 <ul>로 감싸기
	html = html.replace(/(<li>.?<\/li>(?:\s<li>.?<\/li>))/gs, '<ul>$1</ul>');

	// 순서 있는 리스트 처리 (1. 2. 3.)
	html = html.replace(/^\d+\. (.+)$/gim, '<li>$1</li>');
	// 연속된 <li> 태그를 <ol>로 감싸기 (이미 <ul>로 감싸지지 않은 경우만)
	html = html.replace(/(?<!<ul>)(<li>.?<\/li>(?:\s<li>.?<\/li>))(?!<\/ul>)/gs, '<ol>$1</ol>');

	// 볼드 처리 (text 또는 __text__) - 코드 블록/인라인 코드가 아닌 부분만
	html = html.replace(/\\([^]+)\\*/g, '<strong>$1</strong>');
	html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');

	// 이탤릭 처리 (text 또는 _text_) - 볼드가 아닌 경우만
	html = html.replace(/(?<!\)\([^]+)\(?!\*)/g, '<em>$1</em>');
	html = html.replace(/(?<!_)_([^_]+)_(?!_)/g, '<em>$1</em>');

	// 링크 처리 ([text](url))
	html = html.replace(/\[([^\]]+)\]$([^)]+)$/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');

	// 이미지 처리 (![alt](url))
	html = html.replace(/!\[([^\]]*)\]$([^)]+)$/g, '<img src="$2" alt="$1">');

	// 인라인 코드 플레이스홀더 복원
	inlineCodes.forEach(({ placeholder, html: codeHtml }) => {
	html = html.replace(placeholder, codeHtml);
	});

	// 코드 블록 플레이스홀더 복원
	codeBlocks.forEach(({ placeholder, html: codeHtml }) => {
	html = html.replace(placeholder, codeHtml);
	});

	// 줄바꿈 처리
	// 먼저 두 개 이상의 연속된 줄바꿈을 단락 구분으로 처리
	html = html.split(/\n\n+/).map(para => {
	if (para.trim() && !para.match(/^<[h\|u\|o\|b\|p\|d]/)) {
	// 이미 HTML 태그가 아닌 일반 텍스트만 <p>로 감싸기
	if (!para.trim().startsWith('<')) {
	return `<p>${para.trim()}</p>`;
	}
	}
	return para;
	}).join('\n');

	// 단일 줄바꿈은 <br>로 (이미 태그로 감싸진 부분은 제외)
	html = html.replace(/(?<!>)\n(?!<)/g, '<br>');

	// 빈 <p> 태그 제거
	html = html.replace(/<p>\s*<\/p>/g, '');
	html = html.replace(/<p>(<[^>]+>)/g, '$1');
	html = html.replace(/(<\/[^>]+>)<\/p>/g, '$1');

	// 나머지 텍스트 이스케이프 (이미 HTML 태그가 아닌 부분만)
	// 하지만 이미 escapeHtml을 사용한 부분이 있으므로 주의 필요
	// 기본적으로 마크다운 변환 후 남은 텍스트는 안전하게 처리됨

	return html;
	}

	function formatContentWithFootnotes(content) {
	if (!content) return { formattedContent: '', footnotes: [] };

	// "[내용을 찾을 수 없습니다]" 관련 텍스트 제거
	let cleanedContent = content;
	// 줄바꿈은 보존하면서 제거 (줄바꿈 앞뒤 공백도 함께 제거)
	cleanedContent = cleanedContent.replace(/\s\[내용을 찾을 수 없습니다\]\s/g, ' ');
	cleanedContent = cleanedContent.replace(/\s내용을 찾을 수 없습니다\s/g, ' ');
	cleanedContent = cleanedContent.replace(/\s\[근거:\s내용을 찾을 수 없습니다\]\s*/g, ' ');
	cleanedContent = cleanedContent.replace(/\s\[근거:\s"내용을 찾을 수 없습니다"\]\s*/g, ' ');
	cleanedContent = cleanedContent.replace(/\s\[근거:\s'내용을 찾을 수 없습니다'\]\s*/g, ' ');
	// 연속된 공백만 정리 (줄바꿈은 보존)
	cleanedContent = cleanedContent.replace(/[ \t]{2,}/g, ' '); // 탭과 공백만 정리
	// 줄바꿈 앞뒤의 불필요한 공백 제거 (줄바꿈은 유지)
	cleanedContent = cleanedContent.replace(/[ \t]+\n/g, '\n');
	cleanedContent = cleanedContent.replace(/\n[ \t]+/g, '\n');

	// 먼저 마크다운을 HTML로 변환
	let htmlContent = markdownToHtml(cleanedContent);

	// HTML에서도 "[내용을 찾을 수 없습니다]" 제거
	htmlContent = htmlContent.replace(/\[내용을 찾을 수 없습니다\]/g, '');
	htmlContent = htmlContent.replace(/내용을 찾을 수 없습니다/g, '');
	htmlContent = htmlContent.replace(/<[^>]>내용을 찾을 수 없습니다<\/[^>]>/g, '');

	// [근거: 내용] 패턴 찾기 (마크다운 변환 후에 처리)
	const footnotePattern = /\[근거:\s*([^\]]+)\]/g;
	const footnotes = [];
	let footnoteIndex = 0;

	// HTML에서 [근거: ] 패턴을 찾아서 각주로 변환
	htmlContent = htmlContent.replace(footnotePattern, (match, footnoteText) => {
	const cleanText = footnoteText.trim();
	// "내용을 찾을 수 없습니다"는 각주에 추가하지 않음
	if (cleanText.includes('내용을 찾을 수 없습니다')) {
	return '';
	}
	footnoteIndex++;
	footnotes.push(cleanText);
	// 직접 HTML로 변환 (플레이스홀더 사용하지 않음)
	return `<sup class="footnote-ref" data-footnote="${footnoteIndex}">[${footnoteIndex}]<span class="footnote-tooltip">${escapeHtml(cleanText)}</span></sup>`;
	});

	return { formattedContent: htmlContent, footnotes };
	}

	// HTML 이스케이프 헬퍼
	function escapeHtml(text) {
	const div = document.createElement('div');
	div.textContent = text;
	return div.innerHTML;
	}

	// 메시지 추가
	function addMessage(role, content, save = true) {
	// 내용이 없으면 추가하지 않음 (단, AI 응답인 경우 기본 메시지 표시)
	if (!content \|\| (typeof content === 'string' && content.trim() === '')) {
	if (role === 'ai') {
	// AI 응답이 비어있으면 기본 메시지 표시
	content = '응답을 생성할 수 없었습니다. 다시 시도해주세요.';
	console.warn('[addMessage] AI 응답이 비어있어 기본 메시지를 표시합니다.');
	} else {
	console.warn('[addMessage] 내용이 비어있어 메시지를 추가하지 않습니다. role:', role);
	return;
	}
	}

	// 빈 상태 숨기기
	if (emptyState) {
	emptyState.style.display = 'none';
	}

	const messageDiv = document.createElement('div');
	messageDiv.className = `message ${role}`;

	const avatar = document.createElement('div');
	avatar.className = 'message-avatar';
	avatar.textContent = role === 'user' ? '👤' : '🤖';

	const contentDiv = document.createElement('div');
	contentDiv.className = 'message-content';

	// AI 응답인 경우 AI 정보 표시
	if (role === 'ai') {
	const aiInfoDiv = document.createElement('div');
	aiInfoDiv.className = 'ai-info';
	aiInfoDiv.style.cssText = 'font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;';

	const modelType = answerModel ? (answerModel.startsWith('gemini:') ? 'Gemini' : 'Ollama') : 'AI';
	const modelName = answerModel ? (answerModel.startsWith('gemini:') ? answerModel.replace('gemini:', '') : answerModel) : '모델 미선택';

	aiInfoDiv.innerHTML = `
	<span style="font-weight: 500;">${modelType} 모델:</span>
	<span>${escapeHtml(modelName)}</span>
	`;
	contentDiv.appendChild(aiInfoDiv);
	}

	const bubble = document.createElement('div');
	bubble.className = 'message-bubble';

	// AI 응답인 경우 [근거: ] 형식을 각주로 변환
	if (role === 'ai') {
	// "[내용을 찾을 수 없습니다]" 텍스트 제거는 formatContentWithFootnotes에서 처리
	// 여기서는 원본 내용을 그대로 전달

	const { formattedContent, footnotes } = formatContentWithFootnotes(content);
	bubble.innerHTML = formattedContent;

	// 각주가 있으면 각주 목록 추가
	if (footnotes.length > 0) {
	const footnoteContainer = document.createElement('div');
	footnoteContainer.className = 'footnotes-container';
	footnotes.forEach((note, index) => {
	const footnoteDiv = document.createElement('div');
	footnoteDiv.className = 'footnote-item';
	footnoteDiv.innerHTML = `<sup>[${index + 1}]</sup> <span>${escapeHtml(note)}</span>`;
	footnoteContainer.appendChild(footnoteDiv);
	});
	bubble.appendChild(footnoteContainer);
	}
	} else {
	// 사용자 메시지는 일반 텍스트
	bubble.textContent = content;
	}

	const time = document.createElement('div');
	time.className = 'message-time';
	time.textContent = new Date().toLocaleTimeString('ko-KR', {
	hour: '2-digit',
	minute: '2-digit'
	});

	contentDiv.appendChild(bubble);
	contentDiv.appendChild(time);
	messageDiv.appendChild(avatar);
	messageDiv.appendChild(contentDiv);
	chatContainer.appendChild(messageDiv);

	// 스크롤을 맨 아래로
	chatContainer.scrollTop = chatContainer.scrollHeight;
	}

	// AI 모델 정보 가져오기
	function getAIModelInfo() {
	const analysisModelType = selectedModel ? (selectedModel.startsWith('gemini:') ? 'Gemini' : 'Ollama') : null;
	const analysisModelName = selectedModel ? (selectedModel.startsWith('gemini:') ? selectedModel.replace('gemini:', '') : selectedModel) : null;

	const answerModelType = answerModel ? (answerModel.startsWith('gemini:') ? 'Gemini' : 'Ollama') : null;
	const answerModelName = answerModel ? (answerModel.startsWith('gemini:') ? answerModel.replace('gemini:', '') : answerModel) : null;

	let aiInfo = '';
	if (analysisModelName && answerModelName) {
	if (analysisModelName === answerModelName) {
	// 같은 모델인 경우
	aiInfo = `<div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;">
	<span style="font-weight: 500;">${analysisModelType} 모델:</span>
	<span>${escapeHtml(analysisModelName)}</span>
	</div>`;
	} else {
	// 다른 모델인 경우
	aiInfo = `<div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px;">
	<div style="display: flex; align-items: center; gap: 6px;">
	<span style="font-weight: 500;">분석 모델:</span>
	<span>${escapeHtml(analysisModelName)} (${analysisModelType})</span>
	</div>
	<div style="display: flex; align-items: center; gap: 6px;">
	<span style="font-weight: 500;">답변 모델:</span>
	<span>${escapeHtml(answerModelName)} (${answerModelType})</span>
	</div>
	</div>`;
	}
	} else if (answerModelName) {
	aiInfo = `<div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;">
	<span style="font-weight: 500;">${answerModelType} 모델:</span>
	<span>${escapeHtml(answerModelName)}</span>
	</div>`;
	}

	return aiInfo;
	}

	// 진행 상황 표시
	function showTypingIndicator(step = '질문 분석 중...') {
	let messageDiv = document.getElementById('typingIndicator');

	if (!messageDiv) {
	messageDiv = document.createElement('div');
	messageDiv.className = 'message ai';
	messageDiv.id = 'typingIndicator';

	const avatar = document.createElement('div');
	avatar.className = 'message-avatar';
	avatar.textContent = '🤖';

	const contentDiv = document.createElement('div');
	contentDiv.className = 'message-content';
	contentDiv.id = 'typingIndicatorContent';

	messageDiv.appendChild(avatar);
	messageDiv.appendChild(contentDiv);
	chatContainer.appendChild(messageDiv);
	chatContainer.scrollTop = chatContainer.scrollHeight;
	}

	const aiInfo = getAIModelInfo();
	const contentDiv = document.getElementById('typingIndicatorContent');
	contentDiv.innerHTML = `
	${aiInfo}
	<div style="display: flex; flex-direction: column; gap: 8px;">
	<div style="display: flex; align-items: center; gap: 8px;">
	<div class="typing-indicator" style="display: flex; gap: 4px;">
	<div class="typing-dot"></div>
	<div class="typing-dot"></div>
	<div class="typing-dot"></div>
	</div>
	<span style="color: var(--text-secondary); font-size: 13px;">${step}</span>
	</div>
	</div>
	`;
	chatContainer.scrollTop = chatContainer.scrollHeight;
	}

	// 진행 상황 업데이트
	function updateTypingIndicator(step, details = '') {
	const contentDiv = document.getElementById('typingIndicatorContent');
	if (contentDiv) {
	const aiInfo = getAIModelInfo();
	const detailsHtml = details ? `<div style="font-size: 12px; color: var(--text-secondary); margin-left: 24px; margin-top: 4px;">${details}</div>` : '';
	contentDiv.innerHTML = `
	${aiInfo}
	<div style="display: flex; flex-direction: column; gap: 8px;">
	<div style="display: flex; align-items: center; gap: 8px;">
	<div class="typing-indicator" style="display: flex; gap: 4px;">
	<div class="typing-dot"></div>
	<div class="typing-dot"></div>
	<div class="typing-dot"></div>
	</div>
	<span style="color: var(--text-secondary); font-size: 13px;">${step}</span>
	</div>
	${detailsHtml}
	</div>
	`;
	chatContainer.scrollTop = chatContainer.scrollHeight;
	}
	}

	// 타이핑 인디케이터 제거
	function removeTypingIndicator() {
	const indicator = document.getElementById('typingIndicator');
	if (indicator) {
	indicator.remove();
	}
	}

	// 메시지 전송
	async function sendMessage() {
	const message = messageInput.value.trim();
	if (!message) return;

	// 답변용 모델이 선택되지 않았으면 경고
	if (!answerModel) {
	alert('답변을 생성할 AI 모델을 선택해주세요.\n\n"사용 가능한 AI 목록"에서 답변을 생성할 AI 모델을 선택하세요.');
	return;
	}

	// 세션이 없으면 새로 생성
	if (!currentSessionId) {
	currentSessionId = await createNewSession();
	}

	// 사용자 메시지 표시 (DB 저장은 /api/chat에서 처리)
	addMessage('user', message, false);

	messageInput.value = '';
	messageInput.style.height = 'auto';

	// 입력 비활성화
	messageInput.disabled = true;
	sendButton.disabled = true;

	// 진행 상황 표시 시작
	showTypingIndicator('질문 분석 중...');

	// 진행 상황 단계별 표시
	const progressSteps = [
	{ step: '질문 분석 중...', details: '질문 내용을 분석하고 있습니다' },
	{ step: '관련 정보 검색 중...', details: '웹소설 데이터베이스에서 관련 정보를 찾고 있습니다' },
	{ step: '회차별 분석 조회 중...', details: '회차별 요약 정보를 불러오고 있습니다' },
	{ step: 'GraphRAG 데이터 조회 중...', details: '캐릭터 관계 및 사건 정보를 조회하고 있습니다' },
	{ step: '벡터 검색 및 리랭킹 중...', details: '관련된 구체적인 내용을 검색하고 있습니다' },
	{ step: '컨텍스트 구성 중...', details: '참고할 정보를 정리하고 있습니다' },
	{ step: 'AI 답변 생성 중...', details: '답변을 생성하고 있습니다' }
	];

	let currentStepIndex = 0;
	const startTime = Date.now();

	// 진행 상황 자동 업데이트 (백엔드 응답 대기 중)
	const progressInterval = setInterval(() => {
	if (currentStepIndex < progressSteps.length) {
	const currentStep = progressSteps[currentStepIndex];
	updateTypingIndicator(currentStep.step, currentStep.details);
	currentStepIndex++;
	}
	}, 1500); // 1.5초마다 다음 단계로

	try {
	// API 호출
	console.log('[sendMessage] 요청 전송:', {
	message: message.substring(0, 50) + '...',
	analysis_model: selectedModel,
	answer_model: answerModel,
	file_ids: selectedFileIds,
	session_id: currentSessionId
	});

	const response = await fetch('/api/chat', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify({
	message: message,
	analysis_model: selectedModel \|\| null, // 질문 분석용 모델
	answer_model: answerModel \|\| null, // 최종 답변용 모델
	file_ids: selectedFileIds.length > 0 ? selectedFileIds : [],
	session_id: currentSessionId
	})
	});

	console.log('[sendMessage] 응답 상태:', response.status, response.statusText);

	clearInterval(progressInterval);
	const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(1);
	updateTypingIndicator('답변 수신 완료', `총 ${elapsedTime}초 소요`);

	// 잠시 후 인디케이터 제거
	setTimeout(() => {
	removeTypingIndicator();
	}, 300);

	if (response.ok) {
	const data = await response.json();
	console.log('[sendMessage] 응답 데이터:', data);

	const aiResponse = data.response \|\| data.message \|\| '응답을 생성하는 중 오류가 발생했습니다.';
	console.log('[sendMessage] AI 응답:', aiResponse ? aiResponse.substring(0, 100) + '...' : '(비어있음)');

	// 응답이 비어있거나 공백만 있어도 메시지 표시
	if (!aiResponse \|\| aiResponse.trim() === '') {
	console.warn('[sendMessage] 응답이 비어있습니다. 기본 메시지를 표시합니다.');
	addMessage('ai', '응답을 생성할 수 없었습니다. 다시 시도해주세요.', false);
	} else {
	addMessage('ai', aiResponse, false);
	}

	// DB에 AI 응답 저장 (이미 백엔드에서 저장됨)
	// 세션 목록 새로고침 (제목 업데이트 반영)
	if (data.session && data.session.title) {
	// 세션 제목이 업데이트되었으면 목록 새로고침
	await loadChatHistory();
	} else {
	// 세션 정보가 없어도 목록 새로고침
	await loadChatHistory();
	}
	} else {
	const error = await response.json().catch(() => ({ error: '서버 오류' }));
	console.error('[sendMessage] 서버 오류:', error);
	addMessage('ai', `오류: ${error.error \|\| '알 수 없는 오류가 발생했습니다.'}`, false);
	}
	} catch (error) {
	removeTypingIndicator();
	addMessage('ai', `연결 오류: ${error.message}`, false);
	} finally {
	// 전송 상태 해제
	isSending = false;
	// 입력 활성화
	messageInput.disabled = false;
	sendButton.disabled = false;
	messageInput.focus();
	}
	}

	// 대화 초기화
	function clearChat() {
	chatContainer.innerHTML = '';
	currentChatId = null;
	currentSessionId = null;
	if (emptyState) {
	emptyState.style.display = 'flex';
	}
	}

	// 웹소설 모달 관련 함수
	async function showWebnovelsModal() {
	const modal = document.getElementById('webnovelsModal');
	modal.style.display = 'block';
	await loadWebnovels();
	await loadWebnovelModelFilter();
	}

	function closeWebnovelsModal() {
	document.getElementById('webnovelsModal').style.display = 'none';
	}

	async function loadWebnovelModelFilter() {
	try {
	const response = await fetch('/api/ollama/models');
	if (!response.ok) throw new Error('모델 목록을 불러올 수 없습니다.');
	const data = await response.json();
	const models = data.models \|\| [];

	const filter = document.getElementById('webnovelModelFilter');
	filter.innerHTML = '<option value="">모든 모델</option>';
	models.forEach(model => {
	const option = document.createElement('option');
	option.value = model.name;
	option.textContent = model.name;
	filter.appendChild(option);
	});
	} catch (error) {
	console.error('모델 필터 로드 오류:', error);
	}
	}

	async function loadWebnovels() {
	const listContainer = document.getElementById('webnovelsList');
	const modelFilter = document.getElementById('webnovelModelFilter');
	const modelName = modelFilter ? modelFilter.value : '';

	listContainer.innerHTML = '<div style="text-align: center; color: var(--text-secondary); padding: 24px;">웹소설 목록을 불러오는 중...</div>';

	try {
	const url = modelName ? `/api/files?model_name=${encodeURIComponent(modelName)}` : '/api/files';
	const response = await fetch(url);
	if (!response.ok) throw new Error('웹소설 목록을 불러올 수 없습니다.');

	const data = await response.json();

	// API 응답은 { files: [...], model_stats: {...} } 형태
	const files = data.files \|\| [];

	if (!Array.isArray(files)) {
	console.error('예상치 못한 응답 형식:', data);
	throw new Error('웹소설 목록 형식이 올바르지 않습니다.');
	}

	if (files.length === 0) {
	listContainer.innerHTML = '<div style="text-align: center; color: var(--text-secondary); padding: 24px;">업로드된 웹소설이 없습니다.</div>';
	return;
	}

	listContainer.innerHTML = '';
	files.forEach(file => {
	const fileItem = document.createElement('div');
	fileItem.className = 'webnovel-item';

	const uploadedDate = new Date(file.uploaded_at);
	const formattedDate = uploadedDate.toLocaleDateString('ko-KR', {
	year: 'numeric',
	month: 'long',
	day: 'numeric'
	});

	fileItem.innerHTML = `
	<div class="webnovel-item-header">
	<div class="webnovel-item-title">${escapeHtml(file.original_filename)}</div>
	</div>
	<div class="webnovel-item-meta">
	<span>📅 ${formattedDate}</span>
	<span>📦 ${formatFileSize(file.file_size)}</span>
	<span>🧩 청크: ${file.chunk_count \|\| 0}개</span>
	${file.model_name ? `<span>🤖 ${escapeHtml(file.model_name)}</span>` : ''}
	</div>
	<div class="webnovel-item-actions">
	<button class="webnovel-item-btn" onclick="viewWebnovelContent(${file.id}, '${escapeHtml(file.original_filename)}')">내용 보기</button>
	</div>
	`;
	listContainer.appendChild(fileItem);
	});
	} catch (error) {
	console.error('웹소설 목록 로드 오류:', error);
	listContainer.innerHTML = `<div style="text-align: center; color: #ea4335; padding: 24px;">오류: ${error.message}</div>`;
	}
	}

	let webnovelOriginalContent = '';
	let webnovelSearchMatches = [];
	let webnovelCurrentMatchIndex = -1;

	async function viewWebnovelContent(fileId, filename) {
	const modal = document.getElementById('webnovelContentModal');
	const title = document.getElementById('webnovelContentTitle');
	const content = document.getElementById('webnovelContent');
	const searchInput = document.getElementById('webnovelSearchInput');

	modal.style.display = 'block';
	title.textContent = filename;
	content.textContent = '내용을 불러오는 중...';
	searchInput.value = '';
	webnovelOriginalContent = '';
	webnovelSearchMatches = [];
	webnovelCurrentMatchIndex = -1;
	updateWebnovelSearchInfo();

	try {
	const response = await fetch(`/api/files/${fileId}/content`);
	if (!response.ok) throw new Error('웹소설 내용을 불러올 수 없습니다.');

	const data = await response.json();
	webnovelOriginalContent = data.content;
	content.textContent = data.content;

	// 검색 입력 필드 포커스
	searchInput.focus();
	} catch (error) {
	console.error('웹소설 내용 로드 오류:', error);
	content.textContent = `오류: ${error.message}`;
	}
	}

	function performWebnovelSearch() {
	const searchInput = document.getElementById('webnovelSearchInput');
	const searchTerm = searchInput.value.trim();
	const content = document.getElementById('webnovelContent');

	if (!searchTerm) {
	clearWebnovelSearch();
	return;
	}

	if (!webnovelOriginalContent) {
	webnovelOriginalContent = content.textContent;
	}

	// 검색어로 하이라이트 처리
	const regex = new RegExp(`(${escapeRegex(searchTerm)})`, 'gi');
	const highlightedContent = webnovelOriginalContent.replace(regex, '<mark style="background: #ffeb3b; padding: 2px 0; border-radius: 2px;">$1</mark>');
	content.innerHTML = highlightedContent;

	// 검색 결과 위치 찾기
	webnovelSearchMatches = [];
	const matches = [...webnovelOriginalContent.matchAll(new RegExp(escapeRegex(searchTerm), 'gi'))];
	matches.forEach(match => {
	webnovelSearchMatches.push(match.index);
	});

	webnovelCurrentMatchIndex = webnovelSearchMatches.length > 0 ? 0 : -1;
	updateWebnovelSearchInfo();
	updateWebnovelNavigationButtons();

	if (webnovelCurrentMatchIndex >= 0) {
	scrollToMatch(webnovelCurrentMatchIndex);
	}
	}

	function clearWebnovelSearch() {
	const searchInput = document.getElementById('webnovelSearchInput');
	const content = document.getElementById('webnovelContent');

	searchInput.value = '';
	if (webnovelOriginalContent) {
	content.textContent = webnovelOriginalContent;
	}
	webnovelSearchMatches = [];
	webnovelCurrentMatchIndex = -1;
	updateWebnovelSearchInfo();
	updateWebnovelNavigationButtons();
	}

	function scrollToMatch(index) {
	if (index < 0 \|\| index >= webnovelSearchMatches.length) return;

	const content = document.getElementById('webnovelContent');
	const container = document.getElementById('webnovelContentContainer');
	const searchInput = document.getElementById('webnovelSearchInput');
	const searchTerm = searchInput.value.trim();

	if (!searchTerm) return;

	// HTML이 있는 경우 (하이라이트된 경우)
	const marks = content.querySelectorAll('mark');
	if (marks.length > 0 && marks[index]) {
	// 이전 하이라이트 제거
	marks.forEach((mark, i) => {
	if (i === index) {
	mark.style.background = '#ff9800';
	mark.style.fontWeight = 'bold';
	mark.style.boxShadow = '0 0 4px rgba(255, 152, 0, 0.5)';
	} else {
	mark.style.background = '#ffeb3b';
	mark.style.fontWeight = 'normal';
	mark.style.boxShadow = 'none';
	}
	});

	// 해당 매치로 스크롤
	marks[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
	} else {
	// 텍스트만 있는 경우 Range API 사용
	const textNode = content.firstChild;
	if (textNode && textNode.nodeType === Node.TEXT_NODE) {
	const range = document.createRange();
	const matchPos = webnovelSearchMatches[index];
	const matchLength = searchTerm.length;

	try {
	range.setStart(textNode, matchPos);
	range.setEnd(textNode, matchPos + matchLength);

	// Range의 위치 정보 가져오기
	const rect = range.getBoundingClientRect();
	const containerRect = container.getBoundingClientRect();

	// 스크롤 계산
	const scrollTop = container.scrollTop + (rect.top - containerRect.top) - (containerRect.height / 2);
	container.scrollTo({ top: scrollTop, behavior: 'smooth' });
	} catch (e) {
	console.error('스크롤 오류:', e);
	}
	}
	}
	}

	function scrollToNextMatch() {
	if (webnovelSearchMatches.length === 0) return;
	webnovelCurrentMatchIndex = (webnovelCurrentMatchIndex + 1) % webnovelSearchMatches.length;
	scrollToMatch(webnovelCurrentMatchIndex);
	updateWebnovelSearchInfo();
	}

	function scrollToPreviousMatch() {
	if (webnovelSearchMatches.length === 0) return;
	webnovelCurrentMatchIndex = webnovelCurrentMatchIndex <= 0
	? webnovelSearchMatches.length - 1
	: webnovelCurrentMatchIndex - 1;
	scrollToMatch(webnovelCurrentMatchIndex);
	updateWebnovelSearchInfo();
	}

	function updateWebnovelSearchInfo() {
	const info = document.getElementById('webnovelSearchInfo');
	const searchInput = document.getElementById('webnovelSearchInput');
	const searchTerm = searchInput.value.trim();

	if (!searchTerm \|\| webnovelSearchMatches.length === 0) {
	info.textContent = '';
	return;
	}

	if (webnovelCurrentMatchIndex >= 0) {
	info.textContent = `${webnovelCurrentMatchIndex + 1} / ${webnovelSearchMatches.length}`;
	} else {
	info.textContent = `총 ${webnovelSearchMatches.length}개`;
	}
	}

	function updateWebnovelNavigationButtons() {
	const prevBtn = document.getElementById('prevMatchBtn');
	const nextBtn = document.getElementById('nextMatchBtn');
	const hasMatches = webnovelSearchMatches.length > 0;

	prevBtn.disabled = !hasMatches;
	nextBtn.disabled = !hasMatches;
	}

	function escapeRegex(str) {
	return str.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&');
	}

	function closeWebnovelContentModal() {
	document.getElementById('webnovelContentModal').style.display = 'none';
	clearWebnovelSearch();
	}

	function formatFileSize(bytes) {
	if (bytes < 1024) return bytes + ' B';
	if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
	return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
	}

	function escapeHtml(text) {
	const div = document.createElement('div');
	div.textContent = text;
	return div.innerHTML;
	}

	// 모달 외부 클릭 시 닫기
	window.onclick = function(event) {
	const webnovelsModal = document.getElementById('webnovelsModal');
	const contentModal = document.getElementById('webnovelContentModal');
	if (event.target === webnovelsModal) {
	closeWebnovelsModal();
	}
	if (event.target === contentModal) {
	closeWebnovelContentModal();
	}
	}

	// 페이지 로드 시 초기화
	window.addEventListener('load', async () => {
	await loadChatHistory();
	await loadAvailableModels(); // 사용 가능한 AI 목록 로드 (모든 모델)
	await loadModels(); // AI 모델 선택 로드 (학습된 웹소설이 있는 모델만)
	// 모델 선택 여부와 관계없이 웹소설 목록 로드 (모델이 선택되어 있으면 해당 모델의 파일만, 없으면 모든 파일)
	loadNovels();
	// 초기 모델 상태 업데이트
	if (selectedModel) {
	updateModelStatus('connected');
	}
	messageInput.focus();
	});
	</script>
	</body>
	</html>