/* 強制修正選單展開後的顯示問題 */
details[open] faceplate-auto-height-animator {
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

div[faceplate-auto-height-animator-content] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 確保側邊欄項目在展開後正確排列 */
.class-list-subreddit {
    display: block !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    color: #1A1A1B !important; /* Reddit 標準文字顏色 */
    text-decoration: none;
}

.class-list-subreddit:hover {
    background-color: rgba(26, 26, 27, 0.05);
}

.community-banner {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 20vh;
    border-radius: 10px;
    background-color: var(--color-active-option);
}

.community-actions {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
	align-items: flex-end;
	top: -2.25rem;
	margin-bottom: -2.25rem;
	margin-top: 0;
}

.content-wrapper {
	display: flex;
	flex: 1;
	align-items: flex-end;
	justify-content: space-between;
	flex-direction: column;
	padding: 0 1.5rem;
	flex-direction: row;
}

.icon-wrapper {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 8px;
	width: 100%;
}

.icon {
	font-size: 48px;
	flex-shrink: 0;
}

.community-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	overflow: hidden;
	border: 5px solid var(--color-background);
	background-color: var(--color-active-option);
}

.title-wrapper {
	display: flex;
	flex-direction: column;
}

.title-wrapper h1 {
	display: flex;
	align-items: center;
	padding: 0 0 0 1rem;
	margin: 3rem 0 0 0;
	font-size: 2rem;
	font-weight: bold;
}

.subreddit-content {
    display: flex;
    margin: 1rem 0 0 0;
}

.middle-content {
    width: 75%;
	margin: 0 1rem 0 0;
}

.middle-content iframe{
	border-radius: 10px;
}

.chapter {
	margin: 0 1rem;
}

.chapter-title {
	font-size: 1.5rem;
	font-weight: bold;
}

.chapter-content img {
	border-radius: 10px;
}

.right-sidebar {
    width: 25%;
    background-color: var(--color-hover-option);
    border-radius: 10px;
    margin: 0 0 0 1rem;
	align-self: flex-start;
}

.right-sidebar-title {
    color: var(--color-tone-2);
    text-align: center;
    font-weight: bold;
}

.member {
	padding: 0.5rem 1rem;
	margin: 1rem;
	display: flex;
}

.member:hover {
	background-color: var(--color-active-option);
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
}

.member img {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	margin: 0 1rem 0 0;
}

.member-info {
	margin: auto 0;
	color: var(--color-tone-2);
}

.name {
	font-size: 1rem;
	font-weight: bold;
	color: var(--color-tone-2);;
}

.info {
	font-size: 0.8rem;
}

.comments {
	padding: 0.5rem 1rem;
	margin: 1rem;
	background-color: var(--color-active-option);
	border-radius: 5px;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}