:root {
    --dc-bg-dark: #202225;
    --dc-bg-sidebar: #2f3136;
    --dc-bg-chat: #36393f;
    --dc-bg-header: #36393f;
    --dc-bg-member: #2f3136;
    --dc-channel-hover: #393c43;
    --dc-channel-active: #393c43;
    --dc-text-normal: #dcddde;
    --dc-text-muted: #72767d;
    --dc-text-header: #fff;
    --dc-interactive: #b9bbbe;
    --dc-blue: #5865f2;
    --dc-divider: #202225;
    
    /* ロールカラー */
    --role-admin: #e91e63;
    --role-family: #00b0f4;
    --role-bot: #5865f2;
}

body.discord-theme {
    margin: 0; padding: 0;
    display: flex; height: 100vh; width: 100vw;
    background-color: var(--dc-bg-dark);
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    color: var(--dc-text-normal);
    overflow: hidden;
}

/* --- Server List (Far Left) --- */
.server-list {
    width: 72px; background-color: var(--dc-bg-dark);
    display: flex; flex-direction: column; align-items: center;
    padding-top: 12px; gap: 8px; flex-shrink: 0;
    overflow-y: auto; scrollbar-width: none;
}
.server-icon {
    width: 48px; height: 48px; background-color: var(--dc-bg-chat);
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    cursor: pointer; transition: 0.2s; position: relative;
    overflow: hidden;
}
.server-icon:hover, .server-icon.active {
    border-radius: 16px; background-color: var(--dc-blue);
}
.server-icon.active::before {
    content: ''; position: absolute; left: -4px; top: 10px; height: 28px; width: 8px;
    background: #fff; border-radius: 0 4px 4px 0;
}
.server-icon img { width: 100%; height: 100%; object-fit: cover; }
.home-icon { background-color: #36393f; color: var(--dc-text-normal); }
.separator { width: 32px; height: 2px; background-color: #36393f; margin: 2px 0; }
.add-server { color: #3ba55c; background-color: #36393f; font-size: 24px; transition: 0.2s; }
.add-server:hover { background-color: #3ba55c; color: #fff; }

/* --- Channel Sidebar --- */
.channel-sidebar {
    width: 240px; background-color: var(--dc-bg-sidebar);
    display: flex; flex-direction: column; flex-shrink: 0;
}
.server-header {
    height: 48px; padding: 0 16px; display: flex; align-items: center;
    box-shadow: 0 1px 0 rgba(4,4,5,0.2); font-weight: bold; cursor: pointer;
    transition: 0.2s;
}
.server-header:hover { background-color: #34373c; }
.server-header h1 { font-size: 16px; margin: 0; color: var(--dc-text-header); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verified { color: #3ba55c; margin-left: 5px; font-size: 14px; }

.channel-category {
    padding: 18px 16px 4px; font-size: 12px; font-weight: 700;
    color: var(--dc-text-muted); text-transform: uppercase;
}
.channel {
    margin: 1px 8px; padding: 6px 8px; border-radius: 4px;
    color: var(--dc-text-muted); cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.channel:hover { background-color: var(--dc-channel-hover); color: var(--dc-text-normal); }
.channel.active { background-color: var(--dc-channel-active); color: #fff; }
.channel i { font-size: 14px; }

.user-area {
    margin-top: auto; background-color: #292b2f; height: 52px;
    padding: 0 8px; display: flex; align-items: center; gap: 8px;
}
.user-avatar { position: relative; width: 32px; height: 32px; }
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; }
.status-dot {
    position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px;
    border-radius: 50%; border: 3px solid #292b2f;
}
.status-dot.online { background-color: #3ba55c; }
.status-dot.dnd { background-color: #ed4245; }
.status-dot.idle { background-color: #faa61a; }
.status-dot.mobile { background-color: #3ba55c; border-radius: 2px; height: 12px; }

.user-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.username { font-size: 14px; font-weight: bold; color: #fff; }
.user-id { font-size: 12px; color: var(--dc-text-muted); }
.user-mic, .user-deafen, .user-settings {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 4px;
}
.user-mic:hover, .user-deafen:hover, .user-settings:hover { background-color: #36393f; }

/* --- Main Chat Area --- */
.chat-area {
    flex: 1; background-color: var(--dc-bg-chat); display: flex; flex-direction: column;
    min-width: 0;
}
.chat-header {
    height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 1px 0 rgba(4,4,5,0.2); flex-shrink: 0;
}
.header-hash { font-size: 24px; color: var(--dc-text-muted); }
.chat-header h2 { font-size: 16px; color: #fff; margin: 0; }
.header-desc { font-size: 14px; color: var(--dc-text-muted); margin-left: 10px; border-left: 1px solid #4f545c; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-tools { margin-left: auto; display: flex; gap: 20px; color: var(--dc-interactive); font-size: 20px; align-items: center; }
.search-bar { background: #202225; padding: 4px 8px; font-size: 14px; border-radius: 4px; width: 140px; }

.messages-wrapper {
    flex: 1; overflow-y: auto; padding: 20px 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.messages-wrapper::-webkit-scrollbar { width: 8px; background: #2e3338; }
.messages-wrapper::-webkit-scrollbar-thumb { background: #202225; border-radius: 4px; }

/* メッセージスタイル */
.message { display: flex; margin-top: 10px; position: relative; }
.message:hover { background-color: rgba(4,4,5,0.07); }
.message-avatar {
    width: 40px; height: 40px; border-radius: 50%; margin-right: 16px; margin-top: 2px;
    overflow: hidden; cursor: pointer;
}
.message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-content { flex: 1; min-width: 0; }
.message-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.msg-author { font-weight: 500; font-size: 16px; color: #fff; cursor: pointer; }
.msg-author:hover { text-decoration: underline; }
.bot-tag {
    background: #5865f2; color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 3px;
    text-transform: uppercase; font-weight: bold; vertical-align: middle; margin-left: 4px;
}
.msg-time { font-size: 12px; color: var(--dc-text-muted); }
.msg-text { font-size: 15px; line-height: 1.4; color: var(--dc-text-normal); white-space: pre-wrap; }

/* リアクション */
.reactions { display: flex; gap: 4px; margin-top: 4px; }
.reaction {
    background: #2f3136; border: 1px solid transparent; border-radius: 8px;
    padding: 2px 6px; cursor: pointer; display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--dc-text-muted);
}
.reaction:hover { border-color: #4f545c; background: #36393f; }
.reaction.reacted { background: rgba(88, 101, 242, 0.15); border-color: #5865f2; }
.reaction.reacted .count { color: #5865f2; }

/* デマまるのスパムメッセージ */
.message.spam { opacity: 0.6; }
.message.spam .msg-text { color: #ff4444; font-weight: bold; }
.system-alert {
    border-left: 4px solid #ed4245; background: rgba(237, 66, 69, 0.1);
    padding: 10px; border-radius: 4px; margin: 5px 0; color: #dcddde; font-size: 14px;
}

/* 入力エリア */
.input-area { padding: 0 16px 24px; flex-shrink: 0; }
.input-wrapper {
    background-color: #40444b; border-radius: 8px; padding: 10px 16px;
    display: flex; align-items: center; gap: 16px;
}
.upload-btn { color: var(--dc-interactive); cursor: pointer; }
.input-wrapper input {
    background: transparent; border: none; color: #dcddde; font-size: 15px; flex: 1;
}
.input-icons { display: flex; gap: 12px; color: var(--dc-interactive); font-size: 20px; }

/* --- Member Sidebar --- */
.member-sidebar {
    width: 240px; background-color: var(--dc-bg-member); flex-shrink: 0;
    padding: 20px 10px; overflow-y: auto; display: block;
}
.member-category {
    font-size: 12px; font-weight: 700; color: var(--dc-text-muted);
    text-transform: uppercase; padding: 0 8px 10px;
}
.member {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px;
    border-radius: 4px; cursor: pointer; opacity: 0.9;
}
.member:hover { background-color: #34373c; opacity: 1; }
.avatar-wrapper { position: relative; width: 32px; height: 32px; }
.avatar-wrapper img { width: 100%; height: 100%; border-radius: 50%; }
.member-name { font-weight: 500; font-size: 15px; }
.role-admin { color: var(--role-admin); }
.role-family { color: var(--role-family); }
.member-activity { font-size: 11px; color: var(--dc-text-muted); display: block; }

/* レスポンシブ */
@media (max-width: 900px) {
    .member-sidebar { display: none; }
}
@media (max-width: 600px) {
    .channel-sidebar { display: none; } /* 実際はハンバーガーメニューにする */
    .server-list { display: none; }
    .chat-header { padding-left: 10px; }
}