/* 컨텐츠 영역 */
.app-container { 
	display: flex; height: 100vh; width: 100vw; 
}

/* header-sidebar */
.header-sidebar {
    width: 280px;
    background-color: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-x: hidden; /* 축소 시 텍스트가 삐져나오거나 깨지는 현상 방지 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 햄버거 버튼 */
.menu-toggle { background: none; border: none; color: var(--text-main); font-size: 20px; cursor: pointer; padding: 18px; border-radius: 50%; }
.menu-toggle:hover { background-color: var(--hover-bg); }

/* 사이드바 내부 영역 */
.header-sidebar-header { 
	margin-bottom: 30px; 
}

.header-sidebar-content { 
	flex: 1; 
	overflow-y: auto; 
	overflow-x: hidden; 
}
/**/


/* 사이드바 접힘 처리 */
.header-sidebar.collapsed {
    width: 72px;
    padding: 16px 8px;
}

.header-sidebar.collapsed span, 
.header-sidebar.collapsed .dark-button span {
    display: none;
}

.header-sidebar.collapsed .dark-button {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    margin-left: 4px;
}
/**/


/* 사이드바 메뉴 */
.header-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 24px;
    text-decoration: none;
    color: var(--text-main);
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.header-sidebar .header-sidebar-item {
	margin-left: 5px;
	margin-bottom: 5px;
}

.header-sidebar.collapsed .header-sidebar-item {
    width: 40px;
    height: 40px;
	margin-left: 8px;
    padding: 0;
    justify-content: center;
}

.header-sidebar .header-sidebar-item i {
    margin: 0;
    font-size: 18px;
}

.header-sidebar-item:hover { background-color: var(--hover-bg); }
.header-sidebar-item.active { background-color: #d3e3fd; color: var(--accent-active); }
/**/

/* header-sidebar Footer */
.header-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 10px;
}

.header-sidebar-footer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 24px;
    text-decoration: none;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
}

.header-sidebar.collapsed .header-sidebar-footer-item {
    width: 40px;
    height: 40px;
	margin-left: 8px;
    padding: 0;
    justify-content: center;
}

.header-sidebar-footer-item:hover { background-color: var(--hover-bg); }
.header-sidebar-footer-item i { width: 20px; text-align: center; font-size: 16px; }
/**/

/* Main Content */
.main-wrapper { flex: 1; display: flex; flex-direction: column; position: relative; }

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 24px;
}

.mobile-only { display: none; }

@media (max-width: 768px) {
    .top-nav {
        padding: 15px 20px 10px 10px;
    }
	.mobile-only { display: inline; }
}

.blur { filter: blur(4px); pointer-events: none; user-select: none; }

.app-brand { font-size: 20px; font-weight: 500; cursor: pointer; display: flex; align-items: anchor-center;}
.user-profile { width: 32px; height: 32px; background: #9b72cb; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; }

.main-container { flex: 1; overflow-y: auto; padding: 20px 5%; display: flex; flex-direction: column; align-items: center; }

.nav-left { display: flex; align-items: baseline; }

/* Input Area */
.input-area { padding-bottom: 24px; }
.input-container { max-width: 820px; margin: 0 auto; width: 90%; }

.input-wrapper {
    background-color: var(--bg-input);
    border-radius: 28px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.input-wrapper textarea {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 16px;
    padding: 12px 0;
    outline: none;
    resize: none;
    max-height: 200px;
}

.input-actions { display: flex; gap: 4px; }
.action-btn { background: none; border: none; color: var(--text-main); font-size: 18px; padding: 10px; border-radius: 50%; cursor: pointer; }
.action-btn:hover { background-color: var(--hover-bg); }

.send-btn { background: none; border: none; color: var(--accent); font-size: 18px; padding: 10px; cursor: pointer; }

.disclaimer { font-size: 12px; color: var(--text-sub); text-align: center; margin-top: 12px; }

/* Responsive */
@media (max-width: 768px) {
    .header-sidebar { position: fixed; left: -280px; z-index: 1000; height: 100%; }
    .header-sidebar.open { left: 0; }
    .input-container { width: 95%; }
}