/* fu-se Chat — Discord風テーマ（Dark/Light） */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root, [data-theme="dark"] {
  --bg-primary: #313338;
  --bg-secondary: #2b2d31;
  --bg-tertiary: #1e1f22;
  --bg-input: #383a40;
  --bg-msg-hover: #2e3035;
  --text-primary: #dbdee1;
  --text-secondary: #b5bac1;
  --text-muted: #949ba4;
  --text-link: #00a8fc;
  --accent: #5865f2;
  --accent-hover: #4752c4;
  --green: #23a559;
  --red: #da373c;
  --yellow: #f0b232;
  --border: #3f4147;
  --hover: #35373c;
  --active: #404249;
  --mention-bg: rgba(88,101,242,0.15);
  --header-primary: #f2f3f5;
  --channel-icon: #80848e;
  --shadow: rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f2f3f5;
  --bg-tertiary: #e3e5e8;
  --bg-input: #ebedef;
  --bg-msg-hover: #f7f7f8;
  --text-primary: #313338;
  --text-secondary: #4e5058;
  --text-muted: #80848e;
  --text-link: #006ce7;
  --border: #e1e1e4;
  --hover: #e8e9eb;
  --active: #dcdee1;
  --mention-bg: rgba(88,101,242,0.08);
  --header-primary: #060607;
  --channel-icon: #6d6f78;
  --shadow: rgba(0,0,0,0.15);
}

html, body { height: 100%; }
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 15px;
  overflow: hidden;
}
.hidden { display: none !important; }
button { cursor: pointer; font-family: inherit; background: none; border: none; color: inherit; }
input, textarea, select {
  font-family: inherit; font-size: 15px;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid transparent; border-radius: 8px; padding: 10px 12px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
a { color: var(--text-link); }

/* ============ ログイン画面 ============ */
#login-screen {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e1f22 0%, #2b2d64 100%);
}
.login-box {
  background: var(--bg-secondary); border-radius: 12px; padding: 36px;
  width: min(400px, 92vw); box-shadow: 0 8px 32px var(--shadow); text-align: center;
}
.login-box h1 { color: var(--header-primary); margin-bottom: 4px; }
.login-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.login-box input { width: 100%; margin-bottom: 10px; }
.btn-primary {
  background: var(--accent); color: #fff; border-radius: 8px;
  padding: 10px 20px; font-size: 15px; font-weight: 500; width: 100%;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: var(--bg-input); color: var(--text-primary);
  border-radius: 8px; padding: 10px 20px; font-size: 15px;
}
.login-switch { margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.login-error { color: #f38688; font-size: 13px; margin-top: 12px; min-height: 1.2em; }
.setup-note { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }

/* ============ レイアウト ============ */
#app { display: flex; height: 100vh; height: 100dvh; }
#sidebar {
  width: 240px; min-width: 180px; max-width: 400px; background: var(--bg-secondary);
  display: flex; flex-direction: column; flex-shrink: 0;
}
#resize-handle-sidebar { width: 4px; cursor: col-resize; background: transparent; flex-shrink: 0; }
#resize-handle-sidebar:hover { background: var(--accent); }
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-primary); }
#content-row { flex: 1; display: flex; min-height: 0; }
#feed-column { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ============ サイドバー ============ */
.sidebar-header {
  padding: 12px 16px; font-weight: 700; color: var(--header-primary);
  border-bottom: 1px solid var(--bg-tertiary); box-shadow: 0 1px 0 var(--shadow); font-size: 16px;
}
.sidebar-subtitle {
  display: block; font-size: 11px; font-weight: 500; color: var(--text-muted);
  margin-bottom: 2px; letter-spacing: .04em;
}
#channel-list { flex: 1; overflow-y: auto; padding: 10px 8px; }
.category-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; padding: 10px 8px 4px; cursor: pointer;
}
.category-header .cat-add { visibility: hidden; font-size: 16px; color: var(--text-muted); }
.category-header:hover .cat-add { visibility: visible; }
.channel-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 1px 0;
  border-radius: 6px; color: var(--channel-icon); cursor: pointer; font-size: 15px;
}
.channel-item:hover { background: var(--hover); color: var(--text-secondary); }
.channel-item.active { background: var(--active); color: var(--header-primary); }
.channel-item.unread { color: var(--header-primary); font-weight: 700; }
.channel-item .ch-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  background: var(--red); color: #fff; border-radius: 10px; font-size: 11px;
  font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-section-header {
  font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  padding: 14px 8px 4px;
}
.doc-add { background: none; border: none; color: var(--text-muted); font-size: 16px; padding: 0 4px; }
.doc-add:hover { color: var(--text-primary); }
.sidebar-task-btn {
  margin: 8px; padding: 9px; border-radius: 8px; background: var(--bg-input);
  color: var(--text-secondary); font-size: 14px; text-align: center;
}
.sidebar-task-btn:hover { background: var(--hover); color: var(--text-primary); }
.sidebar-footer {
  padding: 10px 12px; background: var(--bg-tertiary);
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px; overflow: hidden;
  background-size: cover; background-position: center; user-select: none;
}
.avatar.small { width: 24px; height: 24px; font-size: 11px; }
.me-info { min-width: 0; flex: 1; }
#me-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-actions { display: flex; gap: 2px; }
.me-actions button { font-size: 13px; padding: 2px 4px; border-radius: 4px; opacity: .8; }
.me-actions button:hover { background: var(--hover); opacity: 1; }

/* ============ ヘッダー ============ */
#channel-header {
  display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 48px;
  border-bottom: 1px solid var(--bg-tertiary); box-shadow: 0 1px 0 var(--shadow); flex-shrink: 0;
}
#hamburger-btn { display: none; font-size: 20px; }
#channel-icon { color: var(--channel-icon); font-size: 20px; font-weight: 500; }
#channel-name { font-weight: 700; color: var(--header-primary); white-space: nowrap; }
#channel-desc {
  color: var(--text-muted); font-size: 13px; border-left: 1px solid var(--border);
  padding-left: 10px; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.header-actions { display: flex; gap: 4px; margin-left: auto; }
.header-actions button {
  font-size: 17px; padding: 4px 8px; border-radius: 6px; color: var(--text-secondary); position: relative;
}
.header-actions button:hover { background: var(--hover); color: var(--text-primary); }
.header-actions .badge { position: absolute; top: -2px; right: -2px; }

/* ============ メッセージ ============ */
#message-area { flex: 1; overflow-y: auto; padding: 16px 0 8px; }
#messages { display: flex; flex-direction: column; }
.date-separator {
  display: flex; align-items: center; gap: 10px; margin: 14px 16px 6px;
  color: var(--text-muted); font-size: 12px; font-weight: 700;
}
.date-separator::before, .date-separator::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.unread-separator {
  display: flex; align-items: center; gap: 8px; margin: 8px 16px;
  color: var(--red); font-size: 11px; font-weight: 700;
}
.unread-separator::before { content: ""; flex: 1; height: 1px; background: var(--red); }
.message {
  display: flex; gap: 14px; padding: 3px 16px; position: relative;
}
.message:hover { background: var(--bg-msg-hover); }
.message.grouped { padding-top: 1px; }
.message.grouped .avatar { visibility: hidden; height: 0; }
.message.mentioned-me { background: var(--mention-bg); border-left: 3px solid var(--yellow); padding-left: 13px; }
.msg-body { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 500; color: var(--header-primary); }
.bot-tag {
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 4px; padding: 1px 5px; vertical-align: middle;
}
.msg-time { font-size: 11px; color: var(--text-muted); }
.msg-edited { font-size: 10px; color: var(--text-muted); }
.msg-content { line-height: 1.55; word-break: break-word; white-space: pre-wrap; }
.msg-content a { color: var(--text-link); }
.msg-content code {
  background: var(--bg-tertiary); border-radius: 4px; padding: 1px 5px;
  font-family: Consolas, monospace; font-size: 13px;
}
.msg-content pre {
  background: var(--bg-tertiary); border-radius: 8px; padding: 10px; margin: 4px 0;
  overflow-x: auto; font-family: Consolas, monospace; font-size: 13px; white-space: pre;
}
.mention-pill {
  color: #c9cdfb; background: var(--mention-bg); border-radius: 4px;
  padding: 0 3px; font-weight: 500;
}
.collapse-toggle { color: var(--text-link); font-size: 13px; cursor: pointer; margin-top: 2px; display: inline-block; }
.msg-collapsed { max-height: 300px; overflow: hidden; position: relative; }
.msg-collapsed::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 50px;
  background: linear-gradient(transparent, var(--bg-primary));
}

/* ホバーアクション */
.msg-actions {
  position: absolute; top: -14px; right: 16px; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 8px; display: none; z-index: 5;
  box-shadow: 0 2px 8px var(--shadow);
}
.message:hover .msg-actions { display: flex; }
.msg-actions button { font-size: 15px; padding: 5px 8px; border-radius: 6px; }
.msg-actions button:hover { background: var(--hover); }

/* リアクション */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  background: var(--bg-input); border: 1px solid transparent; border-radius: 10px;
  font-size: 13px; cursor: pointer;
}
.reaction.mine { background: var(--mention-bg); border-color: var(--accent); }
.reaction:hover { border-color: var(--text-muted); }
.reaction .rc { color: var(--text-secondary); font-size: 12px; }

/* スレッドリンク */
.thread-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  color: var(--text-link); font-size: 13px; cursor: pointer; font-weight: 500;
}
.thread-link:hover { text-decoration: underline; }

/* 添付ファイル */
.attachments { margin-top: 6px; display: grid; gap: 4px; max-width: 520px; }
.attachments.grid-1 { grid-template-columns: 1fr; }
.attachments.grid-2 { grid-template-columns: 1fr 1fr; }
.attachments img { max-width: 100%; max-height: 350px; border-radius: 8px; cursor: pointer; object-fit: cover; }
.file-chip {
  display: flex; align-items: center; gap: 8px; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px;
}
.file-chip a { text-decoration: none; }
.file-size { color: var(--text-muted); font-size: 11px; }

/* AIタスク確認カード */
.pending-actions { display: flex; gap: 8px; margin-top: 8px; }
.pending-actions button { border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 500; }
.pending-create { background: var(--green); color: #fff; }
.pending-edit { background: var(--bg-input); color: var(--text-primary); }
.pending-cancel { background: none; color: var(--text-muted); border: 1px solid var(--border); }

/* ============ 入力エリア ============ */
#input-area { padding: 0 16px 18px; }
#input-wrapper { background: var(--bg-input); border-radius: 12px; position: relative; }
.input-row { display: flex; align-items: flex-end; }
#attach-btn, #emoji-btn-input, #send-btn { font-size: 19px; padding: 10px 12px; color: var(--text-secondary); }
#attach-btn:hover, #emoji-btn-input:hover { color: var(--text-primary); }
#send-btn { color: var(--accent); }
#message-input, #thread-input {
  flex: 1; background: none; border: none; resize: none; max-height: 40vh;
  padding: 12px 4px; line-height: 1.5;
}
#attachment-preview {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px 0;
}
.attach-chip {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; display: flex; align-items: center; gap: 6px;
}
.attach-chip button { color: var(--red); font-size: 14px; }
#input-wrapper.dragover { outline: 2px dashed var(--accent); }

/* メンションオートコンプリート */
#mention-autocomplete {
  position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 8px;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 4px 16px var(--shadow); max-height: 240px; overflow-y: auto; z-index: 30;
}
.mention-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
}
.mention-option:hover, .mention-option.selected { background: var(--hover); }

/* ============ スレッドパネル ============ */
#thread-panel {
  width: 400px; min-width: 280px; max-width: 600px; flex-shrink: 0;
  border-left: 1px solid var(--bg-tertiary); display: flex; flex-direction: column;
  background: var(--bg-primary);
}
#resize-handle-thread { width: 4px; cursor: col-resize; flex-shrink: 0; }
#resize-handle-thread:hover { background: var(--accent); }
.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--bg-tertiary);
  font-weight: 700; color: var(--header-primary); flex-shrink: 0;
}
.panel-header button { font-size: 14px; color: var(--text-muted); padding: 3px 7px; border-radius: 5px; }
.panel-header button:hover { background: var(--hover); color: var(--text-primary); }
#thread-messages { flex: 1; overflow-y: auto; padding: 12px 0; }
.thread-root { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 8px; }
.thread-input-area {
  display: flex; align-items: flex-end; margin: 0 12px 14px;
  background: var(--bg-input); border-radius: 10px;
}
.thread-input-area button { font-size: 18px; padding: 10px 12px; color: var(--accent); }

/* ============ フォーラム ============ */
#forum-area { flex: 1; display: flex; min-width: 0; }
#forum-list { flex: 1; overflow-y: auto; padding: 16px; }
.forum-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.forum-toolbar .btn-primary { width: auto; padding: 8px 16px; font-size: 14px; }
.forum-archived-toggle { font-size: 13px; color: var(--text-muted); cursor: pointer; }
.forum-card {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; margin-bottom: 10px; cursor: pointer;
}
.forum-card:hover { border-color: var(--accent); }
.forum-card.has-thumb { display: flex; gap: 12px; align-items: flex-start; }
.forum-card-main { min-width: 0; flex: 1; }
.forum-thumb {
  width: 96px; height: 96px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
  background: var(--bg-tertiary);
}
.forum-file-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.forum-file-preview img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border);
}
.forum-card.archived { opacity: .55; }
/* カレンダー */
.cal-subscribe {
  display: block; text-align: center; text-decoration: none;
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; margin-bottom: 6px; font-size: 12.5px; color: var(--text-secondary);
}
.cal-subscribe:hover { border-color: var(--accent); color: var(--accent); }
.cal-day {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); padding: 12px 0 5px; margin-bottom: 4px;
}
.cal-day.today { color: var(--accent); border-color: var(--accent); }
.cal-today-tag { background: var(--accent); color: #fff; border-radius: 4px; font-size: 10px; padding: 1px 5px; margin-left: 4px; }
.cal-ev { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; align-items: baseline; }
.cal-time { color: var(--text-muted); font-size: 12px; flex: none; width: 3.4em; font-variant-numeric: tabular-nums; }
.cal-sum { color: var(--text-primary); min-width: 0; }
.cal-loc { display: block; color: var(--text-muted); font-size: 11px; }
.cal-ok { color: var(--green); font-size: 13px; }
.cal-err { color: var(--red); font-size: 13px; }
.cal-none { color: var(--text-muted); font-size: 13px; }
.admin-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.7; }

/* タスクの期限＝Googleカレンダーへの追加リンク */
.task-due { color: inherit; text-decoration: none; }
.task-due:hover { text-decoration: underline; }
.cal-plus { color: var(--accent); font-weight: 700; }

/* タスクのプロジェクト表示 */
.task-project-tag { color: var(--accent); }

/* 触れないタスクの状態表示（select の代わり） */
.task-status-fixed {
  font-size: 12px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 8px; flex: none;
}

/* プロジェクト参加バー */
#project-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-secondary); font-size: 13px;
}
#project-bar.hidden { display: none; }
#project-join-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  padding: 5px 12px; cursor: pointer; font-size: 13px; flex: none;
}
#project-join-btn.joined { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); }
#project-members { color: var(--text-secondary); min-width: 0; }
#project-finish-btn {
  margin-left: auto; background: none; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; cursor: pointer; font-size: 12px; flex: none;
}
#project-finish-btn:hover { color: var(--red); border-color: var(--red); }
#project-finish-btn:disabled { opacity: .6; cursor: wait; }

/* AI利用料 */
.ai-usage-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 13px; color: var(--text-secondary);
}
.ai-usage-row span:first-child { flex: 1; }
.ai-usage-row.total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--header-primary); }
.ai-usage-empty { color: var(--text-muted); font-size: 13px; }

/* 縁を探す（投稿者本人にだけ見える） */
.en-box { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.en-box button {
  background: var(--bg-tertiary); color: var(--header-primary);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 14px; cursor: pointer; font-size: 13px;
}
.en-box button:hover { border-color: var(--accent); }
.en-box button:disabled { opacity: .6; cursor: wait; }
.en-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
#en-result {
  margin-top: 10px; padding: 12px; border-radius: 8px;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.7; white-space: normal;
}
/* 未読の投稿は左に赤い帯と丸印を出して、一覧の中で拾いやすくする */
.forum-card.unread { border-left: 3px solid var(--red); }
.unread-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); flex: none;
}
.new-replies {
  background: var(--red); color: #fff; border-radius: 8px;
  font-size: 10px; font-weight: 700; padding: 1px 5px; margin-left: 4px;
}
.forum-card-title { font-weight: 700; color: var(--header-primary); display: flex; align-items: center; gap: 6px; }
.forum-card-body { color: var(--text-secondary); font-size: 13px; margin: 6px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.forum-card-meta { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12px; }
#forum-detail {
  flex: 1.2; border-left: 1px solid var(--bg-tertiary); display: flex; flex-direction: column;
  min-width: 0; background: var(--bg-primary);
}
#forum-detail .panel-body { flex: 1; overflow-y: auto; padding: 16px; }
.forum-post-head { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 12px; }
.forum-post-head h3 { color: var(--header-primary); margin-bottom: 6px; }
.forum-reply { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.forum-reply:hover { background: var(--bg-msg-hover); }
.forum-reply .msg-actions { top: -8px; right: 8px; }
.forum-reply:hover .msg-actions { display: flex; }
.forum-reply-input {
  display: flex; align-items: flex-end; margin: 12px 16px 16px; gap: 8px;
  background: var(--bg-input); border-radius: 10px; padding-left: 6px;
}
.forum-reply-input textarea { flex: 1; background: none; border: none; resize: none; }
.forum-reply-input button { font-size: 18px; padding: 10px 12px; color: var(--accent); }

/* ============ メンバー紹介カード ============ */
#members-area { flex: 1; overflow-y: auto; }
.members-wrap { max-width: 1500px; margin: 0 auto; padding: 20px 24px 60px; }
.members-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.members-bar .btn-primary { width: auto; padding: 8px 18px; font-size: 14px; }
.members-tools { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 240px; }
#member-search { flex: 1; min-width: 160px; }
#member-sort { width: auto; }
.members-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.member-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
  align-items: start; /* カードの高さを内容に合わせる（余白の間延びを防ぐ） */
}
.member-card {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.member-card.is-me { border-color: var(--accent); }
.mc-head { display: flex; gap: 12px; align-items: flex-start; }
.mc-id { min-width: 0; flex: 1; }
.mc-name { font-weight: 700; color: var(--header-primary); font-size: 15px; }
.mc-me { font-size: 10px; background: var(--accent); color: #fff; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.mc-title { font-size: 13px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }
.mc-area { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.mc-greeting {
  font-size: 15px; font-weight: 500; color: var(--header-primary); line-height: 1.6;
  background: var(--mention-bg); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 10px 12px;
}
.mc-block { border-top: 1px solid var(--border); padding-top: 8px; }
.mc-label { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; }
.mc-text { font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.mc-empty { font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 10px; line-height: 1.6; }
.mc-sns { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.mc-sns a {
  font-size: 12px; background: var(--bg-input); color: var(--text-secondary);
  border-radius: 12px; padding: 4px 12px; text-decoration: none;
}
.mc-sns a:hover { background: var(--accent); color: #fff; }
.clickable-name { cursor: pointer; }
.clickable-name:hover { text-decoration: underline; }
.pv-card { border: none; background: none; padding: 0; }
.pv-actions { display: flex; justify-content: center; margin-top: 14px; }
.pv-actions .btn-primary { width: auto; padding: 8px 24px; font-size: 14px; }
.pf-field { margin-bottom: 12px; }
.pf-field label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.pf-field input, .pf-field textarea { width: 100%; margin-bottom: 2px; }
.pf-hint { font-size: 11px; color: var(--text-muted); }

/* ============ ドキュメントページ ============ */
#page-area { flex: 1; overflow-y: auto; }
.page-doc { max-width: 820px; margin: 0 auto; padding: 24px 28px 60px; }
.page-admin-bar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.page-admin-bar button {
  background: var(--bg-input); color: var(--text-secondary); border-radius: 6px; padding: 6px 12px; font-size: 13px;
}
.page-admin-bar button:hover { background: var(--hover); color: var(--text-primary); }
.page-admin-bar .danger-text:hover { color: var(--red); }
.page-body { line-height: 1.8; color: var(--text-primary); }
.page-body h2 { font-size: 22px; margin: 20px 0 10px; color: var(--header-primary); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.page-body h3 { font-size: 18px; margin: 16px 0 8px; color: var(--header-primary); }
.page-body h4 { font-size: 15px; margin: 12px 0 6px; color: var(--header-primary); }
.page-body p { margin: 6px 0; }
.page-body ul { margin: 6px 0 6px 22px; }
.page-body li { margin: 3px 0; }
.page-body pre { background: var(--bg-tertiary); border-radius: 8px; padding: 12px; overflow-x: auto; font-family: Consolas, monospace; font-size: 13px; margin: 8px 0; }
.page-body code { background: var(--bg-tertiary); border-radius: 4px; padding: 1px 5px; font-family: Consolas, monospace; font-size: 13px; }
.page-body a { color: var(--text-link); }

/* ============ 右サイドパネル ============ */
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 95vw;
  background: var(--bg-secondary); border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px var(--shadow); z-index: 60; display: flex; flex-direction: column;
}
.panel-body { flex: 1; overflow-y: auto; padding: 12px; }
.search-controls { padding: 12px; border-bottom: 1px solid var(--border); }
.search-controls input[type=text] { width: 100%; }
.search-scope { font-size: 13px; color: var(--text-muted); display: block; margin-top: 8px; }
.result-item {
  padding: 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; margin-bottom: 6px;
  background: var(--bg-primary);
}
.result-item:hover { border-color: var(--accent); }
.result-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; display: flex; gap: 8px; }
.result-content { font-size: 14px; }
.result-content .hl { background: var(--yellow); color: #000; border-radius: 2px; padding: 0 1px; }
.highlight-flash { animation: flash 2s; }
@keyframes flash { 0%, 60% { background: var(--mention-bg); } 100% { background: transparent; } }

/* タスクパネル */
.task-group-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin: 12px 4px 6px; }
.task-card {
  background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 6px;
}
.task-card-head { display: flex; align-items: center; gap: 8px; }
.task-title { flex: 1; font-weight: 500; }
.task-card.done .task-title { text-decoration: line-through; color: var(--text-muted); }
.task-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-muted); margin-top: 4px; flex-wrap: wrap; }
.prio-high { color: #f38688; } .prio-medium { color: var(--yellow); } .prio-low { color: var(--green); }
.task-status-select { font-size: 12px; padding: 3px 6px; border-radius: 6px; }
.task-card button { color: var(--text-muted); font-size: 13px; }
.task-card button:hover { color: var(--red); }
.task-overdue { color: #f38688; font-weight: 700; }

/* ============ 絵文字ピッカー / コンテキストメニュー ============ */
#emoji-picker {
  position: fixed; background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 24px var(--shadow); padding: 10px;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; z-index: 100;
}
#emoji-picker button { font-size: 20px; padding: 5px; border-radius: 6px; }
#emoji-picker button:hover { background: var(--hover); }
#context-menu {
  position: fixed; background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px var(--shadow); padding: 6px; z-index: 100; min-width: 190px;
}
#context-menu button {
  display: flex; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
  font-size: 14px; gap: 8px; align-items: center;
}
#context-menu button:hover { background: var(--accent); color: #fff; }
#context-menu button.danger:hover { background: var(--red); }
#context-menu .menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ============ モーダル ============ */
#modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--bg-secondary); border-radius: 12px; padding: 24px;
  width: min(440px, 92vw); max-height: 85vh; overflow-y: auto;
}
.modal.modal-wide { width: min(640px, 94vw); }
.modal h3 { color: var(--header-primary); margin-bottom: 16px; }
.modal h4 { color: var(--text-secondary); font-size: 13px; margin-bottom: 8px; }
.modal input[type=text], .modal input[type=password], .modal input[type=date], .modal textarea, .modal select {
  width: 100%; margin-bottom: 10px;
}
.modal-row { display: flex; gap: 8px; }
.modal-row > * { flex: 1; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.modal-buttons button { width: auto; }
.admin-section { margin-bottom: 20px; }
.invite-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.invite-main { min-width: 0; flex: 1; }
.invite-note { font-size: 14px; color: var(--text-primary); margin-bottom: 2px; }
.invite-meta { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.invite-meta code { background: var(--bg-tertiary); border-radius: 4px; padding: 1px 6px; font-size: 11px; }
.invite-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.invite-actions button {
  font-size: 12px; background: var(--bg-input); border-radius: 6px; padding: 5px 10px; color: var(--text-secondary);
}
.invite-actions button:hover { background: var(--hover); color: var(--text-primary); }
.invite-actions .danger-text:hover { color: var(--red); }
.invite-code-box {
  background: var(--bg-tertiary); border-radius: 8px; padding: 10px 12px; margin: 8px 0;
  font-family: Consolas, monospace; font-size: 14px; word-break: break-all;
}
.admin-user-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.admin-user-row .u-name { flex: 1; }
.admin-user-row button { font-size: 12px; background: var(--bg-input); border-radius: 6px; padding: 4px 8px; }
.admin-user-row .inactive { color: var(--red); }
.forward-preview {
  background: var(--bg-tertiary); border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 8px 10px; font-size: 13px; margin-bottom: 12px; max-height: 100px; overflow: hidden;
}
.summary-body { white-space: pre-wrap; line-height: 1.7; font-size: 14px; }
.pending-edit-row {
  display: grid; grid-template-columns: 1fr 110px 80px 130px; gap: 6px; margin-bottom: 8px;
}
.pending-edit-row input, .pending-edit-row select { margin-bottom: 0; font-size: 13px; padding: 7px 8px; }

/* ============ トースト ============ */
#toast-container { position: fixed; top: 16px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--bg-secondary); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 12px 16px; box-shadow: 0 6px 20px var(--shadow);
  max-width: 340px; font-size: 14px; animation: slideIn .25s; cursor: pointer;
}
.toast.reminder { border-left-color: var(--yellow); }
.toast-title { font-weight: 700; font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.loading { color: var(--text-muted); font-size: 13px; padding: 16px; text-align: center; }
.empty-note { color: var(--text-muted); font-size: 13px; padding: 20px; text-align: center; line-height: 1.7; }

/* ============ レスポンシブ ============ */
@media (min-width: 769px) and (max-width: 1024px) {
  #sidebar { width: 200px; }
  #thread-panel { width: 340px; }
}
@media (max-width: 768px) {
  #hamburger-btn { display: block; }
  #resize-handle-sidebar, #resize-handle-thread { display: none !important; }
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 90; width: 280px;
    transform: translateX(-100%); transition: transform .2s;
  }
  #sidebar.open { transform: none; }
  #sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 80; display: block; }
  #thread-panel { position: fixed; inset: 0; width: 100% !important; max-width: none; z-index: 70; }
  .side-panel { width: 100%; }
  #channel-desc { display: none; }
  #forum-detail { position: fixed; inset: 0; z-index: 70; border: none; }
  input, textarea, select { font-size: 16px; }
  .msg-actions { display: none !important; }
  .message { padding: 5px 12px; }
  .header-actions button { min-width: 40px; min-height: 40px; }
}