@charset "UTF-8";

.sidebar {
	width: 80px;
	background: #111;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 1rem 0;
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
	position: fixed;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	height: 90%;
	border-radius: 20px;
	transition: width 0.3s ease;
}

.sidebar-line {
	border-top: 1px solid #ddd;
	width: 100%;
	margin: 10px 0;
}

.sidebar.expanded {
	width: 260px;
	display: flex;
	align-items: flex-start;
	padding: 1rem;
	padding-top: 28px;
}

.sidebar-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	/* padding: 0 15px; */
	box-sizing: border-box;
}

.sidebar .label {
	display: none;
	color: #fff;
	font-size: 0.95rem;
	white-space: nowrap;
}

.sidebar.expanded .label {
	display: inline;
}

.sidebar.expanded .sidebar-search input {
	display: block;
}

.sidebar-search {
	width: 90%;
	/* padding: 0 15px; */
	margin-bottom: 1rem;
	box-sizing: border-box;
}

.sidebar-search input {
	width: 100%;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid #ddd;
	display: none;
}

.sidebar.expanded .sidebar-search input {
	display: block;
}

.sidebar-section {
	width: 100%;
	/* padding: 0 15px; */
	box-sizing: border-box;
}

.sidebar.expanded .section-title {
	display: block;
	/* margin-bottom: 10px; */
	font-size: 0.9rem;
	color: #fff;
}

.section-title {
	display: none;
}

.chat-item {
	font-size: 0.9rem;
	color: #444;
	margin-bottom: 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor: pointer;
}

.sidebar.expanded .chat-item {
	white-space: normal;
}

.sidebar-icon {
	width: 40px;
	height: 40px;
	/* margin: 1rem auto; */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/* 아이콘 고정 */
.sidebar-icon {
	width: 40px;
	height: 40px;
	background: no-repeat center center;
}

.sidebar-icon.menu {
	background-image: url('../images/icon/menu.svg');
}

body.dark-mode .sidebar-icon.menu {
	background-image: url('../images/icon/menu-dark.svg');
}

.sidebar-icon.write {
	position: relative;
	background-image: url('../images/icon/edit_square.svg');
	border-radius: 15px;
	cursor: pointer;
	overflow: hidden;
}


body.dark-mode .sidebar-icon.write {
	background-image: url('../images/icon/edit_square_dark.svg');
}

.sidebar-icon.write:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../images/icon/edit_square_hover.svg') no-repeat center
		center;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	pointer-events: none;
}

.sidebar-icon.write:hover:after {
	opacity: 1;
}

.sidebar-icon.write:hover {
	box-shadow: 5px 5px 4px 0px rgba(0, 132, 255, 0.4);
	border-radius: 20px;
}

body.dark-mode .sidebar-icon.write:hover {
	background-color:black;
}
	
.sidebar-icon.help {
	background-image: url('../images/icon/help.svg');
}

body.dark-mode .sidebar-icon.help {
	background-image: url('../images/icon/help_dark.svg');
}


.sidebar-icon.setting {
	background-image: url('../images/icon/setting.svg');
}


body.dark-mode .sidebar-icon.setting {
	background-image: url('../images/icon/setting_dark.svg');
}

.sidebar-icon.history {
	background-image: url('../images/icon/history.svg');
}

body.dark-mode .sidebar-icon.history {
	background-image: url('../images/icon/history_dark.svg');
}


.sidebar:not(.expanded) .sidebar-section, .sidebar:not(.expanded) .sidebar-search
	{
	display: none;
}

.chat-item {
	padding: 8px 12px;
	border-radius: 10px;
	transition: background-color 0.2s;
}

.chat-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 6px 8px;
	width: 200px;
	height: 36px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	font-size: 14px;
}

.chat-item.active {
	background: linear-gradient(0deg, rgba(216, 216, 216, 0.2),
		rgba(216, 216, 216, 0.2)), rgba(255, 255, 255, 0.12);
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25);
	border-radius: 12px;
}

.chat-item.active .chat-title {
	font-weight: 600;
}

/* 텍스트 영역 */
.chat-item .chat-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
}

body.dark-mode .chat-item .chat-title{
	color:white;
}


/* more_horiz.svg 아이콘 (우측) */
.chat-item .chat-more-icon {
	width: 20px;
	height: 20px;
	background: url('../images/icon/more_horiz.svg') no-repeat center center;
	background-size: 16px 16px;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	flex-shrink: 0;
}


body.dark-mode .chat-item .chat-more-icon {
	background: url('../images/icon/more_horiz_dark.svg') no-repeat center center;
}




.chat-item .chat-more-icon:hover {
	opacity: 1;
}

.sidebar-chat-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 250px;
	overflow-y: auto;
		overflow-x: hidden;
}

.chat-item {
	padding: 10px 12px;
	font-size: 0.95rem;
	color: #333;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	transition: background-color 0.2s;
}

.chat-item:hover {
	background-color: #f2f2f2;
}

.sidebar-bottom {
	margin-top: auto; /* 남은 공간을 위로 밀어서 아래에 고정 */
	display: flex;
	flex-direction: column;
	align-items: center;
}


.sidebar-bottom .sidebar-item{
	height:40px;
}



.sidebar-item {
	display: flex;
	align-items: center;
}

/* 추가: 축소 상태에서 write 아이콘만 중앙 정렬되도록 분기 */
.sidebar:not(.expanded) .sidebar-item {
	justify-content: center;
}


.sidebar .label, .sidebar .section-title, .sidebar .chat-item {
	opacity: 0;
	visibility: hidden;
	white-space: nowrap;
	transition: opacity 0.3s ease, visibility 0.3s ease, white-space 0s
		linear 0.3s;
}

.sidebar.expanded-text .label, .sidebar.expanded-text .section-title,
	.sidebar.expanded-text .chat-item {
	opacity: 1;
	visibility: visible;
	white-space: normal;
	transition-delay: 0s;
}

.sidebar-icon.darkmode {
    background-image: url('../images/icon/moon.svg'); /* 기본: 밤 아이콘 */
    width: 40px;   /* 요소의 전체 크기를 40px로 설정 */
    height: 40px;  /* 요소의 전체 크기를 40px로 설정 */
    cursor: pointer;
    transition: background-image 0.3s ease;

    /* 아이콘(background-image) 자체의 크기를 25px로 설정하고 중앙에 배치 */
    background-size: 25px 25px; /* 배경 이미지의 실제 크기를 25x25px로 지정 */
    background-repeat: no-repeat;
    background-position: center;
}



body.dark-mode .sidebar {
	background-color: #1e1e1e;
}

body.dark-mode .section-title, body.dark-mode .sidebar-item .label{
	color:white !important;
}