:root { color-scheme: light dark; }

[data-theme="dark"] {
  --bg-primary:   #313338;
  --bg-secondary: #2b2d31;
  --bg-tertiary:  #1e1f22;
  --bg-hover:     #35373c;
  --bg-active:    #404249;
  --text-primary: #dbdee1;
  --text-muted:   #949ba4;
  --text-bright:  #ffffff;
  --accent:       #5865f2;
  --accent-hover: #4752c4;
  --border:       #1e1f22;
  --pill-bg:      #2b2d31;
  --input-bg:     #383a40;
  --error:        #f23f42;
  --shadow:       0 8px 24px rgba(0,0,0,0.3);
}

[data-theme="light"] {
  --bg-primary:   #ffffff;
  --bg-secondary: #f2f3f5;
  --bg-tertiary:  #e3e5e8;
  --bg-hover:     #ebedef;
  --bg-active:    #d7d9db;
  --text-primary: #2e3338;
  --text-muted:   #6d6f78;
  --text-bright:  #060607;
  --accent:       #5865f2;
  --accent-hover: #4752c4;
  --border:       #e3e5e8;
  --pill-bg:      #e3e5e8;
  --input-bg:     #ebedef;
  --error:        #d92626;
  --shadow:       0 4px 12px rgba(0,0,0,0.1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button, input, textarea { font-family: inherit; }

/* ---------- Auth screens ---------- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  padding: 20px;
}
.auth-card {
  background: var(--bg-primary);
  padding: 32px;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
}
.auth-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-bright);
  text-align: center;
}
.auth-subtitle {
  margin: 0 0 24px;
  color: var(--text-muted);
  text-align: center;
  font-size: 14px;
}
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.auth-field input {
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 15px;
  transition: border-color 0.15s;
}
.auth-field input:focus { outline: none; border-color: var(--accent); }
.auth-error { color: var(--error); font-size: 13px; min-height: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-link {
  background: transparent;
  color: var(--text-muted);
}
.btn-link:hover { color: var(--text-bright); text-decoration: underline; }
.icon-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-bright); }

/* ---------- Main app layout ---------- */
#app { display: flex; height: 100vh; overflow: hidden; }

/* Dark-purple left icon column (clinic-slack-manual style) */
#left-icon-col {
  width: 80px;
  flex-shrink: 0;
  background: #5C2B64;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  gap: 6px;
  overflow-y: auto;
  z-index: 50;
}
.left-icon-btn {
  width: 64px; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; border-radius: 8px;
  color: #fff; cursor: pointer;
  transition: background 0.1s;
}
.left-icon-btn:hover { background: rgba(255,255,255,0.10); }
.left-icon-btn.active { background: rgba(255,255,255,0.20); }
.left-icon-btn .left-icon { font-size: 22px; line-height: 1; }
.left-icon-btn .left-label { font-size: 11px; color: rgba(255,255,255,0.75); }
@media (max-width: 768px) {
  #left-icon-col { width: 60px; }
  .left-icon-btn { width: 52px; padding: 6px 0; }
  .left-icon-btn .left-icon { font-size: 18px; }
  .left-icon-btn .left-label { font-size: 9px; }
}

/* Pinned messages */
.message-pinned-banner {
  font-size: 11px; color: #b45309;
  padding: 2px 6px; margin-bottom: 3px;
  background: rgba(250,204,21,0.20);
  border-radius: 4px;
  display: flex; align-items: center; gap: 6px;
}
.message.message-pinned { background: rgba(250,204,21,0.06); border-left: 3px solid #eab308; }
.pins-count {
  display: inline-block; padding: 0 5px; margin-left: 2px;
  border-radius: 9px; background: #eab308; color: #111;
  font-size: 10px; font-weight: 700;
}
.pins-count.hidden { display: none; }

/* Channel name private/public icon */
.channel-name-lock { margin-right: 4px; }

/* Files panel */
.file-panel-item {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  cursor: pointer;
}
.file-panel-item:hover { background: var(--bg-hover); }
.file-panel-thumb {
  width: 42px; height: 42px; border-radius: 6px;
  background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; font-size: 18px;
}
.file-panel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-panel-meta { display: flex; flex-direction: column; min-width: 0; }
.file-panel-name { font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-panel-sub { font-size: 10px; color: var(--text-muted); }
.file-panel-size { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
#sidebar {
  width: 240px;
  min-width: 180px;
  max-width: 420px;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.sidebar-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.sidebar-header h2 {
  margin: 0;
  font-size: 16px;
  color: var(--text-bright);
  font-weight: 700;
}

.channel-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.category { padding: 16px 8px 4px 16px; }
.category-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.channel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 1px 8px;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, color 0.1s;
}
.channel-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.channel-item.active { background: var(--bg-active); color: var(--text-bright); }
.channel-item .ch-hash { font-weight: 700; opacity: 0.7; }

.user-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--bg-tertiary);
  min-height: 52px;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  margin-top: auto;
  z-index: 2;
}
.user-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Avatar ---------- */
.avatar, .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  user-select: none;
  background: #888;
}
/* Sidebar user-panel avatar: square w/ rounded corners, clickable (opens user menu). */
.user-panel .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
/* User avatar popup menu (anchored above .user-panel). */
.user-avatar-menu {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 6px 0;
  font-size: 13px;
}
.user-avatar-menu .uam-label {
  padding: 6px 12px;
  font-weight: 700;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-avatar-menu .uam-sub {
  padding: 0 12px 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.user-avatar-menu .uam-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.user-avatar-menu .uam-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.user-avatar-menu .uam-item:hover { background: var(--bg-hover); color: var(--text-bright); }

/* ---------- Resize handle ---------- */
.resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.15s;
}
.resize-handle:hover { background: var(--accent); }

/* ---------- Main area ---------- */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-primary);
}
.channel-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.channel-hash { color: var(--text-muted); font-size: 20px; font-weight: 700; }
.channel-name { color: var(--text-bright); font-weight: 700; }
.channel-description {
  color: var(--text-muted);
  font-size: 13px;
  border-left: 1px solid var(--border);
  padding-left: 8px;
  margin-left: 8px;
}

/* ---------- Messages ---------- */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
}
.message {
  display: flex;
  gap: 12px;
  padding: 4px 8px;
  margin: 2px 0;
  border-radius: 4px;
}
.message:hover { background: var(--bg-hover); }
.message .message-body { min-width: 0; flex: 1; }
.message-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.message-author { font-weight: 500; color: var(--text-bright); }
.message-time { font-size: 12px; color: var(--text-muted); }
.message-edited { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.message-content {
  color: var(--text-primary);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.message-content.clickable { cursor: pointer; }
.message:hover .message-content.clickable { color: var(--text-bright); }

.date-pill {
  align-self: center;
  margin: 16px 0 8px;
  padding: 2px 12px;
  background: var(--pill-bg);
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
}

/* ---------- Message input ---------- */
.message-input-wrap {
  display: flex;
  gap: 8px;
  padding: 12px 16px 20px;
  background: var(--bg-primary);
  align-items: flex-end;
}
#message-input {
  flex: 1;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  resize: none;
  min-height: 44px;
  max-height: 200px;
  line-height: 1.5;
}
#message-input:focus { outline: none; }
#send-btn { min-height: 44px; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-active); }

/* ==========================================================
   Step B additions: reactions / threads / context menu /
   mention autocomplete / unread
   ========================================================== */

/* ---------- Unread badge (sidebar) ---------- */
.channel-item.unread .ch-name { color: var(--text-bright); font-weight: 700; }
/* DM rows: label uses .dm-name; bold when the DM has unread messages. */
.dm-item.unread .dm-name { color: var(--text-bright); font-weight: 700; }
.unread-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

/* ---------- Unread separator (spec-matched) ---------- */
.unread-separator {
  border-top: 2px solid #EF4444;
  margin: 12px 0;
  position: relative;
  text-align: center;
  height: 0;
}
.unread-separator::before {
  content: "ここから未読";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  color: #EF4444;
  padding: 0 12px;
  font-size: 12px;
  font-weight: bold;
}
/* Unread message styling */
.message.unread {
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}

/* ---------- Message action bar (hover) ---------- */
.message { position: relative; }
.action-bar {
  position: absolute;
  top: -12px;
  right: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: none;
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 3;
}
.message:hover .action-bar { display: flex; }
.action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 16px;
  border-radius: 4px;
  line-height: 1;
}
.action-btn:hover { background: var(--bg-hover); }

/* ---------- Reactions ---------- */
.reactions-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.reactions-strip:empty { display: none; }
.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.reaction-pill:hover { background: var(--bg-hover); }
.reaction-pill.mine {
  background: rgba(88,101,242,0.15);
  border-color: var(--accent);
  color: var(--text-bright);
}

/* ---------- Emoji picker ---------- */
.emoji-picker {
  position: fixed;
  z-index: 1000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  width: 300px;
  max-height: 360px;
  overflow-y: auto;
}
.emoji-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  padding: 8px 4px 4px;
}
.emoji-section-title:first-child { padding-top: 2px; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.emoji-item {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-size: 20px;
  border-radius: 4px;
  line-height: 1;
  aspect-ratio: 1 / 1;
}
.emoji-item:hover { background: var(--bg-hover); }

/* ---------- Reply link ---------- */
.reply-link {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.reply-link:hover { background: var(--bg-hover); text-decoration: underline; }

/* ---------- Thread panel ---------- */
#app.has-thread, body.thread-open #app { /* allows room for panel */ }
.thread-panel {
  width: 420px;
  flex-shrink: 0;
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.thread-header {
  height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.thread-header-text { flex: 1; min-width: 0; }
.thread-title { font-weight: 700; color: var(--text-bright); font-size: 15px; line-height: 1.2; }
.thread-subtitle { color: var(--text-muted); font-size: 12px; line-height: 1.2; margin-top: 2px; }
.thread-close { margin-left: auto; flex-shrink: 0; }
.thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.thread-parent {
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.thread-replies { padding: 0 4px; }

/* "N件の返信" divider — line — label — line */
.thread-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.thread-divider-line { flex: 1; height: 1px; background: var(--border); }
.thread-divider-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.thread-input-wrap {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
  align-items: flex-end;
}
.thread-input {
  flex: 1;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  min-height: 40px;
  max-height: 160px;
  line-height: 1.5;
}
.thread-input:focus { outline: none; }

/* ---------- Slack-style context menu ---------- */
.slack-menu {
  position: fixed;
  z-index: 1000;
  width: 360px;
  max-width: calc(100vw - 16px);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-theme="light"] .slack-menu { background: #fff; }

.slack-divider {
  height: 1px; background: var(--border);
  margin: 6px 4px;
}

/* Tier 1: emoji quick actions */
.slack-emoji-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.slack-emoji-btn {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, border-color 0.1s;
}
.slack-emoji-btn:hover { background: var(--bg-hover); }
.slack-emoji-more {
  background: var(--bg-primary);
  border-color: var(--border);
  font-size: 18px;
}
[data-theme="light"] .slack-emoji-more { background: #fff; }

/* Tier 2: primary action cards */
.slack-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.slack-card {
  height: 72px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
}
[data-theme="light"] .slack-card { background: #fff; }
.slack-card:hover { background: var(--bg-hover); border-color: var(--accent); }
.slack-card-icon { font-size: 22px; line-height: 1; }
.slack-card-label { font-size: 12px; font-weight: 500; color: var(--text-primary); }

/* Tier 3: vertical menu items */
.slack-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  width: 100%;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  transition: background 0.1s;
}
.slack-item:hover { background: var(--bg-hover); }
.slack-item-icon  { font-size: 20px; width: 24px; text-align: center; flex-shrink: 0; }
.slack-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slack-item-arrow { color: var(--text-muted); font-size: 12px; }
.slack-item.danger { color: #EF4444; background: rgba(239,68,68,0.08); }
.slack-item.danger:hover { background: rgba(239,68,68,0.18); }
.slack-item.danger .slack-item-icon { color: #EF4444; }

/* Reminder submenu */
.slack-submenu {
  position: fixed;
  z-index: 1001;
  min-width: 200px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
[data-theme="light"] .slack-submenu { background: #fff; }

.slack-item-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.slack-item-disabled:hover { background: transparent; }

/* Reminder color bar (priority-based left border) */
/* 3-color progress scheme: 青(前半1/3) / 黄(1/3-2/3) / 赤(2/3-〆切) / 期限切れは赤+点滅 */
.reminder-item { position: relative; border-left: 4px solid transparent; }
.reminder-item[data-progress="early"]   { border-left-color: #3b82f6; }
.reminder-item[data-progress="mid"]     { border-left-color: #eab308; }
.reminder-item[data-progress="late"]    { border-left-color: #ef4444; }
.reminder-item[data-progress="overdue"] { border-left-color: #ef4444; animation: reminder-due-blink 1.2s ease-in-out infinite; }
.reminder-item[data-progress="overdue"] .reminder-title,
.reminder-item[data-progress="overdue"] .reminder-due {
  font-size: 1.5em;
  font-weight: 700;
  color: #ef4444;
}
.reminder-item[data-progress="done"]    { border-left-color: #94a3b8; }
.reminder-item[data-progress="early"]   .reminder-due { color: #3b82f6; }
.reminder-item[data-progress="mid"]     .reminder-due { color: #eab308; font-weight: 600; }
.reminder-item[data-progress="late"]    .reminder-due { color: #ef4444; font-weight: 700; }
.reminder-item[data-progress="overdue"] .reminder-due { color: #ef4444; font-weight: 700; }
.reminder-item[data-progress="done"]    .reminder-due { color: #94a3b8; }
@keyframes reminder-due-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.reminder-done .reminder-title, .reminder-done .reminder-due { text-decoration: line-through; color: #94a3b8; }

/* Gantt overlay (body-level modal) */
#reminder-gantt-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ============================================================
   Gantt v5 (clinic-slack-manual port)
   ============================================================ */
#reminder-gantt-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.gantt-container {
  background: var(--bg-primary);
  width: 96vw; height: 92vh;
  border-radius: 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.gantt-header {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gantt-title { font-size: 16px; font-weight: 700; color: var(--text-primary); flex-shrink: 0; }
.gantt-close { margin-left: 4px; }
.overlay-back {
  font-size: 18px; font-weight: 700;
  padding: 4px 10px; border-radius: 6px;
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border); cursor: pointer; margin-right: 6px;
}
.overlay-back:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.gantt-controls { display: flex; gap: 10px; margin-left: auto; align-items: center; }

.gantt-v2-ctrl-check {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12px; color: var(--text-muted);
}
.gantt-v2-ctrl-check input[type=checkbox] { margin: 0; }
.gantt-v2-ctrl-select {
  padding: 5px 10px; font-size: 12px;
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer;
}
.gantt-v2-ctrl-addtask {
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  cursor: pointer;
}
.gantt-v2-ctrl-addtask:hover { background: var(--accent-hover); }

.gantt-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  max-width: 100%;
  position: relative;
}

/* Flex split layout: left fixed column + right scrollable column (vertical scroll synced via JS). */
.gantt-v2-table {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.gantt-v2-left {
  position: static !important;
  left: auto !important;
  flex: 0 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-primary) !important;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 10;
}
.gantt-v2-right {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow-x: auto;
  overflow-y: auto;
  display: flex; flex-direction: column;
  position: relative;
}

/* QuickPlan風: 選択行ハイライト (キーボードショートカットの対象行を視覚化) */
.gantt-v2-left-row.gantt-v2-left-row-selected {
  background: rgba(96,165,250,0.12) !important;
  box-shadow: inset 3px 0 0 #60a5fa;
}

/* Header rows (both left head + right date head stick to top). */
.gantt-v2-left-head,
.gantt-v2-date-head {
  position: sticky; top: 0; z-index: 4;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  height: 40px; display: flex; align-items: stretch;
  flex-shrink: 0;
}
.gantt-v2-left-head { z-index: 6; }
.gantt-v2-left-head .col-task,
.gantt-v2-left-head .col-assignee,
.gantt-v2-left-head .col-status {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.05em;
}
.gantt-v2-left-head .col-assignee{ min-width: 80px; max-width: 160px; }
.gantt-v2-left-head .col-task    { flex: 1; justify-content: flex-start; padding-left: 12px; border-left: 1px solid var(--border); }
.gantt-v2-left-head .col-status  { width: 72px; border-left: 1px solid var(--border); }

/* Task rows */
.gantt-v2-left-row {
  display: flex; align-items: center;
  height: 40px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  background: var(--bg-primary);
}
.gantt-v2-left-row:hover { background: var(--bg-hover); }
.gantt-v2-left-row .col-task {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; min-width: 0;
  border-left: 1px solid var(--border);
}
.gantt-v2-left-row .col-assignee {
  min-width: 80px; max-width: 160px;
  text-align: center;
  font-size: 11px; color: var(--text-muted);
  padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: center;
}
.gantt-v2-left-row .col-status {
  width: 72px; text-align: center;
  border-left: 1px solid var(--border);
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}
.col-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.col-task-title {
  font-size: 13px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-task-title.is-done { text-decoration: line-through; color: var(--text-muted); }
.col-task-sub {
  font-size: 10px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-v2-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gantt-v2-task-dot.status-done        { background: #22c55e; }
.gantt-v2-task-dot.status-in_progress { background: #3b82f6; }
.gantt-v2-task-dot.status-todo        { background: #9ca3af; }
.gantt-v2-task-dot.status-overdue     { background: #ef4444; }
.gantt-v2-reminder-icon { font-size: 13px; flex-shrink: 0; }

.gantt-v2-status-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
}
.gantt-v2-status-pill.status-done        { background: rgba(34,197,94,0.18);  color: #22c55e; }
.gantt-v2-status-pill.status-in_progress { background: rgba(59,130,246,0.18); color: #60a5fa; }
.gantt-v2-status-pill.status-todo        { background: rgba(148,163,184,0.22);color: var(--text-muted); }
.gantt-v2-status-pill.status-overdue     { background: rgba(239,68,68,0.18);  color: #ef4444; }
.gantt-v2-status-pill.status-deleted     { background: rgba(148,163,184,0.25); color: var(--text-muted); }
.gantt-v2-status-pill.status-archived    { background: rgba(148,163,184,0.20); color: var(--text-muted); }
.gantt-v2-left-row:has(.gantt-bulk-chk:checked) { background: rgba(239,68,68,0.12); }
.gantt-bulk-chk { width: 16px; height: 16px; margin: 0 6px 0 4px; flex-shrink: 0; cursor: pointer; }
.gantt-bulk-bar {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 2px 10px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  border-radius: 6px;
  font-size: 12px; color: var(--text-primary);
  margin-right: 8px;
}
.gantt-bulk-bar.hidden { display: none; }
.gantt-bulk-bar #gantt-bulk-count { font-weight: 700; }
/* Archived task rows appear dimmed */
.gantt-v2-left-row:has(.gantt-v2-status-pill.status-archived),
.gantt-v2-left-row:has(.gantt-v2-status-pill.status-deleted) { opacity: 0.55; }

/* Date header cells */
.gantt-v2-date-cell {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 0 0 2px;
  font-size: 10px; color: var(--text-muted);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
  line-height: 1.1;
}
.gantt-v2-date-cell .date-label { font-size: 10px; font-weight: 600; color: var(--text-primary); }
.gantt-v2-date-cell.is-today { background: rgba(239,68,68,0.12); }
.gantt-v2-date-cell.is-today .date-label { color: #ef4444; font-weight: 700; }
.gantt-v2-date-cell.is-off { background: rgba(148,163,184,0.22); }
.gantt-v2-date-cell.is-off .date-label { color: var(--text-muted); }
.gantt-v2-date-cell.is-sat { background: rgba(59,130,246,0.06); }
.gantt-v2-badge-off { font-size: 9px; color: var(--text-muted); line-height: 1; }
.gantt-v2-badge-hol { font-size: 9px; color: #ef4444; line-height: 1; font-weight: 700; }

/* Bar strips */
.gantt-v2-strip {
  position: relative;
  height: 40px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gantt-v2-strip .cell-off {
  position: absolute; top: 0; bottom: 0;
  background: rgba(148,163,184,0.10);
  pointer-events: none;
}
.gantt-v2-today-line {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: #ef4444;
  z-index: 2; pointer-events: none;
}
/* Left column header z-index must top out over sticky bar of sub-cols too */
.gantt-v2-left-head { z-index: 9 !important; }
.gantt-v2-bar {
  position: absolute; top: 6px; height: 28px;
  border-radius: 4px; overflow: hidden;
  display: flex; align-items: stretch;
  z-index: 2; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: filter 0.12s;
}
.gantt-v2-bar:hover { filter: brightness(1.12); }
.gantt-v2-bar-cell { flex: 0 0 auto; height: 100%; }
.gantt-v2-bar-percent {
  position: absolute; top: 6px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65);
  z-index: 4;
}
.gantt-v2-bar-overdue {
  position: absolute; top: 6px; height: 28px;
  background: #ef4444; border-radius: 4px;
  z-index: 2; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  animation: gantt-overdue-blink 1s ease-in-out infinite;
  color: #fff; font-weight: 700; font-size: 11px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}
@keyframes gantt-overdue-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50%      { opacity: 0.58; box-shadow: 0 0 8px 3px rgba(239,68,68,0.7); }
}

/* "他のメンバー" divider */
.gantt-v2-section-divider {
  height: 28px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
}
.gantt-v2-section-divider-right { padding: 0; }

/* Empty states */
.gantt-v2-empty-left, .gantt-v2-empty-right {
  height: 80px; display: flex; align-items: center;
  justify-content: center; padding: 0 18px;
  color: var(--text-muted); font-size: 13px;
}

/* Admin role dropdown */
.admin-role-sel { padding: 2px 6px; font-size: 12px; }

/* Manual/Q&A tabs + tag chips */
.manual-type-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.manual-type-tab {
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.manual-type-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.manual-tag-chip {
  display: inline-block;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  margin: 2px 3px 2px 0;
  cursor: pointer;
  color: var(--text-primary);
}
.manual-tag-chip:hover, .manual-tag-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Forum channel view */
body.forum-mode .message-input-wrap { display: none; } /* use + 新規トピック modal instead */
.forum-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  flex-wrap: wrap;
}
.forum-sort-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.forum-sort-tab {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
}
.forum-sort-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.forum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 0 16px 20px;
}
.forum-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.forum-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.forum-card-head { display: flex; gap: 10px; align-items: center; }
.forum-card-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.forum-card-meta { display: flex; flex-direction: column; line-height: 1.2; }
.forum-card-author { font-size: 13px; font-weight: 600; }
.forum-card-date { font-size: 11px; color: var(--text-muted); }
.forum-card-title { font-size: 15px; margin: 0; line-height: 1.35; word-break: break-word; }
.forum-card-body { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.forum-card-stats { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); margin-top: auto; }

/* Forum topic detail overlay */
.forum-topic-view .overlay-body { padding: 16px 20px 120px; }
.forum-post {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.forum-post-parent { background: var(--bg-tertiary); border-left: 3px solid var(--accent); }
.forum-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.forum-post-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.forum-post-author { font-weight: 600; font-size: 13px; }
.forum-post-date { color: var(--text-muted); font-size: 12px; }
.forum-post-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.55; }
.forum-reply-bar {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.forum-reply-bar textarea { flex: 1; }

/* Avatar image mode (for .avatar / .dm-avatar / .user-avatar / .mention-avatar with <img>) */
.avatar, .dm-avatar, .user-avatar, .mention-avatar, .profile-avatar-preview {
  overflow: hidden;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Profile modal */
.profile-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
}
.profile-avatar-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}

/* Admin panel */
.admin-panel { display: flex; flex-direction: column; height: 100%; }
.admin-tabs { display: flex; gap: 6px; padding: 0 16px 10px; border-bottom: 1px solid var(--border); }
.admin-tab {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.admin-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.admin-table th, .admin-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.admin-table th { background: var(--bg-tertiary); }
.admin-table td .btn { padding: 2px 8px; font-size: 12px; margin-right: 4px; }
.admin-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.admin-form-row input { flex: 0 1 200px; }
.admin-form-row label { font-size: 12px; color: var(--text-muted); }
.admin-cat-block {
  margin: 16px 0;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}
.admin-cat-head, .admin-ch-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.admin-ch-row { padding-left: 14px; }
.admin-sort { width: 70px; }
#admin-panel-btn { width: 100%; text-align: left; padding: 6px 12px; }

/* Input emoji button */
#emoji-input-btn { margin-right: 4px; }

/* Right panel resize handle (left edge) */
.panel-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
}
.panel-resize-handle:hover { background: var(--accent); opacity: 0.4; }
.side-panel { position: relative; }

/* Search keyword highlighting (spec-matched: yellow fade) */
mark {
  background: rgba(255, 235, 59, 0.6);
  padding: 0 2px;
  border-radius: 2px;
  color: inherit;
}
.message.highlight { /* spec class — complements existing .jump-highlight */ }

/* Infinite scroll: loader + end marker */
.older-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 13px;
}
.older-loader .ai-spinner {
  width: 16px; height: 16px; border-width: 2px; margin: 0;
}
.older-end {
  text-align: center;
  padding: 8px 0;
  color: var(--text-muted);
  font-size: 12px;
}

/* Reminder due banner (fixed bottom-right) */
.reminder-banner-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2000;
  max-width: 360px;
}
.reminder-banner {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-left: 4px solid #EF4444;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  animation: reminder-slide-in 0.25s ease-out;
}
@keyframes reminder-slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.reminder-banner-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.reminder-banner-icon { font-size: 18px; }
.reminder-banner-title { font-weight: 600; }
.reminder-banner-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.reminder-banner-jump { padding: 0; font-size: 12px; margin-bottom: 6px; }
.reminder-banner-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.reminder-banner-actions .btn { padding: 4px 10px; font-size: 12px; }

/* AI loading spinner */
.ai-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ai-spin 0.9s linear infinite;
  margin: 0 auto;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 8px;
  color: var(--text-primary);
}
.ai-loading-label { font-size: 14px; color: var(--text-muted); }

/* CO-AI thinking banner (bottom of messages / thread panel) */
.ai-thinking-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-muted);
  align-self: flex-start;
  max-width: fit-content;
}
.ai-thinking-banner .ai-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  margin: 0;
}

.task-ai-list { max-height: 60vh; overflow-y: auto; }
.task-ai-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--bg-tertiary);
}
.task-ai-check { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.task-ai-row-inline { display: flex; gap: 12px; }
.task-ai-row-inline > div { flex: 1; }
.task-ai-assignee { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.summary-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.summary-tab {
  flex: 1;
  padding: 6px 8px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.summary-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.summary-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.summary-output {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 12px;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

.reminder-due-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.reminder-due-row input[type="date"],
.reminder-due-row select {
  flex: 1;
  min-width: 0;
}
/* Force native calendar picker indicator to be visible on dark theme */
.reminder-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 1;
}
[data-theme="light"] .reminder-date-input::-webkit-calendar-picker-indicator {
  filter: none;
}

/* forward modal selected state */
.user-picker-item.selected { background: var(--accent); color: #fff; }
.user-picker-item.selected .up-display { color: #fff; }

@media (max-width: 480px) {
  .slack-menu { width: calc(100vw - 16px); }
}

/* ---------- Inline edit ---------- */
.edit-textarea {
  width: 100%;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
  min-height: 36px;
  line-height: 1.5;
}
.edit-textarea:focus { outline: none; border-color: var(--accent); }
.edit-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Mention autocomplete ---------- */
.mention-picker {
  position: fixed;
  z-index: 1000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
  max-height: 300px;
  overflow-y: auto;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.mention-item.selected,
.mention-item:hover {
  background: var(--accent);
  color: #fff;
}
.mention-item.selected .mention-name,
.mention-item:hover .mention-name { color: rgba(255,255,255,0.75); }
.mention-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11px;
  flex-shrink: 0; background: #888;
}
.mention-display { font-weight: 500; }
.mention-name { color: var(--text-muted); font-size: 13px; }

/* ==========================================================
   Step C additions: search / bookmarks panels, attachments,
   theme toggle, jump highlight
   ========================================================== */

/* ---------- Channel header actions ---------- */
.channel-header-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

/* ---------- Right side panel (search / bookmarks / thread share style) ---------- */
.side-panel {
  width: 420px;
  flex-shrink: 0;
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.side-panel-header {
  height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.side-panel-title { font-weight: 700; color: var(--text-bright); flex: 1; }
.side-panel-body { flex: 1; overflow-y: auto; padding: 8px 12px; }

/* ---------- Search panel ---------- */
.search-input {
  width: 100%;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0 12px;
  font-size: 14px;
  font-family: inherit;
}
.search-input:focus { outline: none; border-color: var(--accent); }
.search-result {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: background 0.1s;
}
.search-result:hover { background: var(--bg-hover); }
.search-result-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.search-result-channel { color: var(--accent); font-weight: 700; }
.search-result-author { color: var(--text-bright); margin-left: 6px; font-weight: 500; }
.search-result-content {
  color: var(--text-primary);
  font-size: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.empty-state {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- Bookmark panel ---------- */
.bookmark-item {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: background 0.1s;
}
.bookmark-item:hover { background: var(--bg-hover); }

/* ---------- Jump highlight (search/bookmark click) ---------- */
.message.jump-highlight { animation: jumpHighlight 2s ease-out; }
@keyframes jumpHighlight {
  0%   { background: rgba(255, 235, 59, 0.55); }
  100% { background: transparent; }
}

/* ---------- Attachments ---------- */
.icon-btn-large { padding: 8px 10px; font-size: 20px; }
.input-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input-stack #message-input { width: 100%; min-height: 44px; }
.message-input-wrap.drag-over,
.thread-input-wrap.drag-over {
  background: rgba(88, 101, 242, 0.1);
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
}
.pending-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
}
.pending-attachment.uploading { opacity: 0.6; }
.pending-attachment .pa-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-attachment .pa-size { color: var(--text-muted); font-size: 12px; }
.pending-attachment .pa-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
}
.pending-attachment .pa-remove:hover { color: var(--error); }

.attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.attachment-image {
  max-width: 400px;
  max-height: 320px;
  border-radius: 6px;
  display: block;
  cursor: pointer;
  background: var(--bg-tertiary);
}
.attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  max-width: 360px;
}
.attachment-file:hover { background: var(--bg-hover); color: var(--text-bright); }
.attachment-file .af-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.attachment-file .af-size { color: var(--text-muted); font-size: 12px; }

/* ==========================================================
   Phase 5 polish: toast, loading bar, login, responsive
   ========================================================== */

/* ---------- Toast notifications (bottom-right) ---------- */
.toast-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 380px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-left-color: var(--error); }
.toast-info  { border-left-color: var(--accent); }

/* ---------- Top loading bar ---------- */
.loading-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 2100;
  transition: width 0.4s ease, opacity 0.2s;
  opacity: 0;
}
.loading-bar.active {
  width: 90%;
  opacity: 1;
  transition: width 6s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.15s;
}

/* ---------- Login screen polish ---------- */
.auth-screen {
  background:
    radial-gradient(circle at 20% 20%, rgba(88,101,242,0.20), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(88,101,242,0.10), transparent 60%),
    var(--bg-tertiary);
}
.auth-card {
  border: 1px solid var(--border);
}
.auth-title {
  font-size: 28px;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--accent), #8a93f8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Responsive: tablet ≤1024px ---------- */
@media (max-width: 1024px) {
  #sidebar { width: 200px; }
  .thread-panel, .side-panel { width: 360px; }
  .attachment-image { max-width: 320px; max-height: 260px; }
  /* iPad: スレッド表示時はメインチャット領域を隠してスレッド全幅 */
  body.thread-open #channel-header,
  body.thread-open #messages,
  body.thread-open .message-input-wrap { display: none !important; }
  body.thread-open #main { display: none !important; }
  body.thread-open .thread-panel {
    flex: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    border-left: none !important;
  }
}

/* ---------- Responsive: mobile ≤768px ---------- */
@media (max-width: 768px) {
  body { font-size: 14px; }
  #sidebar {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 240px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s;
    box-shadow: 2px 0 12px rgba(0,0,0,0.4);
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  .resize-handle { display: none; }
  #main { width: 100%; }
  .thread-panel, .side-panel {
    position: absolute;
    right: 0; top: 0;
    height: 100%;
    width: 100%;
    z-index: 60;
  }
  .messages, .thread-body, .side-panel-body { padding: 8px; }
  .message-input-wrap, .thread-input-wrap { padding: 8px; padding-bottom: 12px; }
  .attachment-image { max-width: 100%; max-height: 240px; }
  .toast { min-width: 200px; max-width: calc(100vw - 32px); }
  .channel-header { padding: 0 8px; }
  .channel-description { display: none; }
  /* hamburger reveal: tap channel header hash to show sidebar */
  .channel-hash { cursor: pointer; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.05ms !important;
  }
}

/* ==========================================================
   Phase 6: DM / Reminders / Manuals / Projects
   ========================================================== */

.sidebar-section {
  border-top: 1px solid var(--border);
  padding: 4px 0;
}
.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.sidebar-section-header .icon-btn { font-size: 14px; padding: 2px 6px; }

/* Collapsible section chevron (clinic-slack-manual port). */
.section-toggle {
  background: transparent; border: none;
  color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; margin-right: 4px;
  transform: rotate(0deg);
  transition: transform 0.15s ease-out;
}
.section-toggle svg { width: 10px; height: 10px; display: block; }
.section-toggle.open { transform: rotate(90deg); }
.sidebar-section.collapsed .sidebar-list,
.sidebar-section.collapsed .channel-list { display: none; }
/* Panel-mode: hide main chat children and let the panel occupy main's body. */
#main.panel-mode > #channel-header,
#main.panel-mode > #messages,
#main.panel-mode > .message-input-wrap,
#main.panel-mode > #msg-select-bar { display: none !important; }
#main.panel-mode > .side-panel {
  width: auto; flex: 1 1 auto;
  border-left: none; height: auto;
}
.sidebar-myonly {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text-muted); cursor: pointer;
  margin: 0 4px 0 auto;
}
.sidebar-myonly input[type=checkbox] { margin: 0; width: 11px; height: 11px; }
.sidebar-myonly.hidden { display: none; }

/* Channel-header "過去のも表示" toggle */
.channel-header-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-muted);
  cursor: pointer; margin-right: 6px;
}
.channel-header-toggle input[type=checkbox] { margin: 0; width: 12px; height: 12px; }
.channel-header-toggle.hidden { display: none; }

/* Soft-deleted message rendering */
.message.message-deleted { background: rgba(148,163,184,0.08); opacity: 0.75; }
.message-deleted .message-content { color: var(--text-muted); }
.message-deleted-banner {
  font-size: 11px; color: var(--text-muted);
  padding: 2px 6px; margin-bottom: 3px;
  background: rgba(148,163,184,0.15);
  border-radius: 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.message-deleted-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.link-btn {
  background: transparent; border: none; color: var(--accent);
  cursor: pointer; padding: 1px 4px; font-size: 11px; font-weight: 600;
}
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: #ef4444; }

/* Self-DM (memo) row */
.dm-item.dm-self { background: rgba(99,102,241,0.08); }
.dm-item.dm-self:hover { background: rgba(99,102,241,0.15); }
.dm-self-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.bookmark-actions { padding: 4px 0 0; }

/* @mention pill rendered inside message content */
.mention-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(88,101,242,0.18);
  color: #8b93ff;
  font-weight: 600;
}
.mention-pill.mention-me {
  background: rgba(234,179,8,0.25);
  color: #eab308;
}

/* Admin — new user row */
.admin-new-user-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 16px; margin-bottom: 12px;
  background: var(--bg-secondary); border-radius: 8px;
}
.admin-new-user-row strong { font-size: 13px; color: var(--text-primary); }
.admin-new-user-row .search-input { width: auto; flex: 1; min-width: 140px; }

/* Password visibility toggle on login / register */
.auth-password-row { display: flex; align-items: stretch; gap: 6px; }
.auth-password-row input { flex: 1; min-width: 0; }
.auth-password-toggle {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-primary);
}
.auth-password-toggle:hover { background: var(--bg-hover); }
.auth-password-toggle.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Archived (90d+ soft-deleted) messages */
.message.message-archived { opacity: 0.35; }
.message-archived-banner {
  font-size: 11px; color: var(--text-muted);
  padding: 2px 6px; margin-bottom: 3px;
  background: rgba(148,163,184,0.20);
  border-radius: 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Bulk-delete mode — inline controls in the channel header, left of the 🗑 button */
.msg-bulk-chk {
  width: 18px; height: 18px; margin: 8px 10px 0 4px;
  flex-shrink: 0; cursor: pointer;
}
.msg-select-bar {
  display: inline-flex; gap: 10px; align-items: center;
  padding: 2px 8px; margin-right: 4px;
  background: rgba(239,68,68,0.10);
  border-radius: 6px;
  font-size: 12px; color: var(--text-primary);
}
.msg-select-bar.hidden { display: none; }
#msg-select-count { font-weight: 700; }
@media (max-width: 768px) {
  .msg-select-bar { gap: 6px; font-size: 11px; padding: 2px 6px; }
}
.sidebar-list { display: flex; flex-direction: column; padding: 2px 0; }

.dm-item { gap: 8px; }
.dm-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 10px;
  flex-shrink: 0;
  background: #888;
}
.project-item .ch-hash { opacity: 0.6; }

/* ---------- Reminder colors ---------- */
.reminder-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 16px;
  margin: 1px 8px 1px 0;
  border-left: 3px solid var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
}
.reminder-item:hover { background: var(--bg-hover); }
.reminder-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-due { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.reminder-overdue { border-left-color: var(--error); }
.reminder-overdue .reminder-due { color: var(--error); font-weight: 700; }
.reminder-today   { border-left-color: #f5a623; }
.reminder-today   .reminder-due { color: #f5a623; }
.reminder-soon    { border-left-color: #f5a623; opacity: 0.85; }
.reminder-later   { border-left-color: var(--text-muted); }
.reminder-done    { opacity: 0.5; text-decoration: line-through; }
#reminder-overdue-badge {
  display: inline-block;
  color: var(--error);
  font-weight: 700;
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 8px;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  border: 1px solid var(--border);
}
.modal-title { padding: 16px 20px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--border); }
.modal-body  { padding: 16px 20px; overflow-y: auto; flex: 1; }
.modal-buttons {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.modal-label {
  display: block;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); margin: 10px 0 4px;
}
.modal-body > textarea.search-input,
.modal-body > input.search-input,
.modal-body > select.search-input { margin: 0 0 4px; }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.form-row { display: flex; gap: 12px; }
.form-col { flex: 1; min-width: 0; }
.detail-row { padding: 6px 0; }
.detail-title { font-size: 18px; font-weight: 700; color: var(--text-bright); }
.detail-meta  { color: var(--text-muted); font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.detail-pre   {
  background: var(--bg-tertiary);
  padding: 12px;
  border-radius: 6px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  margin: 0;
  max-height: 50vh;
  overflow: auto;
}

/* ---------- User picker (DM / add member / forward) ---------- */
.user-picker { max-height: 50vh; overflow-y: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.user-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.user-picker-item:hover { background: var(--bg-hover); border-color: var(--border); }
.user-picker-item.selected { border-color: var(--accent); }
.up-text { flex: 1; min-width: 0; }
.up-display { font-weight: 500; color: var(--text-bright); }
.up-name    { font-size: 12px; color: var(--text-muted); }

/* ---------- Overlay view (manuals / project detail) ---------- */
.overlay-view {
  position: fixed; inset: 0;
  background: var(--bg-primary);
  z-index: 1500;
  overflow: auto;
}
.overlay-view.hidden { display: none; }
.overlay-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.overlay-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-secondary);
}
.overlay-title { flex: 1; font-size: 17px; font-weight: 700; color: var(--text-bright); }
.overlay-body  { padding: 16px; flex: 1; }

/* ---------- Manuals ---------- */
.manual-cat-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; color: var(--text-muted);
  padding: 16px 4px 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.manual-row {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--bg-secondary);
  margin-bottom: 6px;
}
.manual-row:hover { background: var(--bg-hover); }
.manual-title { font-weight: 700; color: var(--text-bright); }
.manual-excerpt { color: var(--text-muted); font-size: 13px; margin: 4px 0; white-space: pre-wrap; }
.manual-meta { color: var(--text-muted); font-size: 11px; }

/* ---------- Project detail ---------- */
.project-desc { padding: 0 16px 10px; color: var(--text-muted); }
.project-members {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.pm-label { color: var(--text-muted); font-size: 12px; }
.pm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: var(--bg-secondary); border-radius: 12px; font-size: 13px;
}
.pm-role { color: var(--text-muted); font-size: 11px; }

/* ---------- Kanban ---------- */
.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}
.kanban-col {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 10px;
  min-height: 200px;
}
.kanban-col-title {
  font-weight: 700;
  color: var(--text-bright);
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.task-card {
  background: var(--bg-primary);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background 0.1s;
}
.task-card:hover { background: var(--bg-hover); }
.task-title { font-weight: 500; color: var(--text-bright); margin-bottom: 4px; }
.task-assignee, .task-due { color: var(--text-muted); font-size: 12px; }

@media (max-width: 768px) {
  .kanban { grid-template-columns: 1fr; }
  .modal { max-width: 96vw; max-height: 95vh; }
  /* Gantt: full-screen on small devices, shrink left column so bars remain visible */
  .gantt-container { width: 100vw; height: 100vh; border-radius: 0; }
  .gantt-header { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
  .gantt-title { font-size: 14px; }
  .gantt-controls { gap: 6px; width: 100%; order: 10; }
  .gantt-v2-left { width: 180px !important; }
  .gantt-v2-left-head .col-task { padding-left: 8px; }
  .gantt-v2-left-head .col-assignee,
  .gantt-v2-left-row .col-assignee { min-width: 56px; max-width: 96px; }
  .gantt-v2-left-head .col-status,
  .gantt-v2-left-row .col-status { width: 56px; }
  .col-task-title { font-size: 12px; }
  .col-task-sub { font-size: 9px; }
  .reminder-due-row { flex-direction: column; gap: 6px; }
  .sidebar-myonly { font-size: 9px; }
}

/* Tablet-specific tweaks */
@media (min-width: 769px) and (max-width: 1024px) {
  .gantt-container { width: 98vw; height: 94vh; }
  .gantt-v2-left { width: 220px !important; }
}

/* 自分(メモ) DM用: bookmarks をインライン表示（panel-mode 不使用） */
.self-dm-bookmarks {
  flex: 1;
  overflow-y: auto;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  padding: 8px 12px;
  background: var(--bg-secondary, rgba(255,255,255,0.02));
}
.self-dm-bookmarks-header {
  font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,0.6));
  margin-bottom: 6px;
  font-weight: 500;
}
.self-dm-bookmarks-body .bookmark-item {
  padding: 8px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
}
.self-dm-bookmarks-body .bookmark-item:hover {
  background: var(--bg-hover, rgba(255,255,255,0.05));
}
/* 後でセクション: 投稿者名・チャンネル名・本文を通常メッセージと同じサイズに */
.self-dm-bookmarks-body .search-result-meta {
  font-size: 15px;
}
.self-dm-bookmarks-body .search-result-author {
  font-size: 15px;
  font-weight: 500;
}
.self-dm-bookmarks-body .search-result-content {
  font-size: 15px;
}

.message-bookmark-mark {
  display: inline-flex; align-items: center;
  margin-left: 6px; cursor: pointer;
  color: #f5c518;
  vertical-align: -0.125em;
  opacity: 0.8;
  font-size: 1em;
  line-height: 1;
}
.message-bookmark-mark svg { width: 1em; height: 1em; fill: #f5c518; }
.message-bookmark-mark:hover { opacity: 1; }

/* 保存ボタン SVG化: 保存済み状態の背景強調 */
.slack-card.slack-card-saved {
  background: var(--accent, #007a5a);
  color: #fff;
}
.slack-card.slack-card-saved .slack-card-icon svg { stroke: #fff; }

.bookmark-deleted { opacity: 0.7; border-left: 3px solid var(--text-muted, #888); }
.bookmark-deleted-label { font-size: 0.75rem; color: var(--text-muted, #888); padding: 2px 0 4px; }

.self-dm-bookmarks-header { display: flex; align-items: center; gap: 8px; }
.self-dm-trash-btn { font-size: 0.85rem; opacity: 0.6; cursor: pointer; }
.self-dm-trash-btn:hover { opacity: 1; }
.self-dm-bookmarks-body .bookmark-item.delete-mode { display: flex; align-items: flex-start; gap: 6px; }
.self-dm-bookmarks-body .bookmark-item.delete-mode input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; }

/* 保存マーク（メッセージ本文末尾のみ）*/
span.message-bookmark-mark { color: #f5c518 !important; cursor: pointer; display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; background: transparent !important; border: none !important; padding: 0 !important; }
span.message-bookmark-mark svg { width: 14px !important; height: 14px !important; fill: #f5c518 !important; }
span.message-bookmark-mark:hover { opacity: 0.7; }
#left-icon-col .left-icon-btn .left-label { font-size: 14px !important; }

/* 「後で」を投稿者名と同じサイズ (15px) に */
#left-icon-col .left-icon-btn .left-label { font-size: 15px !important; line-height: 1.2 !important; }
@media (max-width: 900px) { #left-icon-col .left-icon-btn .left-label { font-size: 14px !important; } }

/* ========= Admin user table: status column color coding (Phase A) ========= */
.status-active   { color:#2563eb !important; font-weight:600; }
.status-inactive { color:#dc2626 !important; font-weight:600; }
.admin-table td .status-active,
table.admin-table td .status-active,
.admin-users-table td .status-active,
table.admin-users-table td .status-active   { color:#2563eb !important; font-weight:600; }
.admin-table td .status-inactive,
table.admin-table td .status-inactive,
.admin-users-table td .status-inactive,
table.admin-users-table td .status-inactive { color:#dc2626 !important; font-weight:600; }

/* ========= Admin user table: 操作列 縦罫線を消す (Phase B) ========= */
.admin-table td:last-child, .admin-table th:last-child,
table.admin-table td:last-child, table.admin-table th:last-child,
.admin-users-table td:last-child, .admin-users-table th:last-child,
table.admin-users-table td:last-child, table.admin-users-table th:last-child {
  border-right: 0 !important;
  border-left:  0 !important;
}

/* ========= Password toggle: SVG icon alignment (Phase C) ========= */
.auth-password-toggle { padding: 0 8px; }
.auth-password-toggle svg { display:block; width:18px; height:18px; }

/* ========= Admin: パス再発行 button (force-reset password) ========= */
.btn-reset-pw { background: var(--danger, #dc2626); color: #fff; border: 0; padding: 4px 10px; border-radius: 3px; cursor: pointer; font-size: 12px; margin-left: 4px; }
.btn-reset-pw:hover { opacity: 0.85; }

/* === AVATAR FORCE SQUARE (all contexts) ===
   Attribute selector [class*="avatar"] catches every class containing "avatar"
   (e.g. .dm-avatar, .forum-card-avatar, .mention-avatar, .dm-self-avatar,
   .profile-avatar-preview, .avatar-img, etc.) without touching indicator-dots
   (.gantt-v2-task-dot) or spinners (.ai-spinner) which do not contain "avatar".
   Excluded: .user-avatar-menu (popup container), .avatar-rounded (opt-out hook). */
.avatar,
.user-avatar,
.channel-avatar,
.dm-avatar,
.message-avatar,
.sidebar .dm-item img,
.sidebar .dm-item .avatar,
.sidebar .channel-item img,
.sidebar .channel-item .avatar,
.message-header img,
.message-header .avatar,
.user-panel .user-avatar,
img.avatar,
div.avatar,
[class*="avatar"]:not(.avatar-rounded):not(.user-avatar-menu) {
  border-radius: 6px !important;
}

/* ========= Project row: hover-reveal delete button (admin/manager only) ========= */
.project-item { position: relative; }
.project-delete-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--text-muted);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px;
  opacity: 0; transition: opacity 0.15s;
}
.project-item:hover .project-delete-btn { opacity: 1; }
.project-delete-btn:hover { color: var(--danger, #dc2626); }

.status-clickable {
  padding: 2px 8px;
  border-radius: 3px;
  transition: background 0.15s;
  display: inline-block;
}
.status-clickable:hover {
  background: var(--bg-hover, rgba(255,255,255,0.08));
  text-decoration: underline;
}

/* Inactive (soft-deleted) user: dim the whole message row */
.message.deleted-user { opacity: 0.5; }
.message.deleted-user .message-author { text-decoration: line-through; opacity: 0.8; }
/* Admin panel: dim inactive user rows the same way */
tr.deleted-user { opacity: 0.5; }
tr.deleted-user .admin-display-name-edit { text-decoration: line-through; }
/* Admin panel: system user row — subtle highlight */
tr.system-user-row { background: var(--bg-hover, rgba(255,255,255,0.03)); }

/* ---------- Manual (Phase 1/2: cc_manual_entries) ---------- */
.manual-category-card { padding:16px; border-radius:8px; cursor:pointer; background:#2b2d31; margin:8px 0; transition:background 0.2s; }
.manual-category-card:hover { background:#3c3f45; }
.manual-entry-card { padding:12px; border-radius:6px; background:#2b2d31; margin:6px 0; cursor:pointer; display:flex; align-items:center; gap:8px; }
.manual-entry-card:hover { background:#3c3f45; }
.manual-entry-card .manual-entry-title { flex:1; min-width:0; }
.manual-entry-card .manual-entry-actions { display:flex; gap:4px; }
.manual-badge-draft { background:#fbbf24; color:#000; padding:2px 8px; border-radius:4px; font-size:12px; margin-left:8px; }
.manual-badge-published { background:#22c55e; color:#fff; padding:2px 8px; border-radius:4px; font-size:12px; margin-left:8px; }
.manual-detail-body { white-space:pre-wrap; line-height:1.6; padding:8px 4px; }
.qa-history { display:flex; flex-direction:column; gap:8px; padding:8px 4px; max-height:55vh; overflow-y:auto; }
.qa-message { padding:10px 12px; border-radius:8px; max-width:86%; word-break:break-word; white-space:pre-wrap; }
.qa-message.user { background:#3c4fe0; color:#fff; align-self:flex-end; }
.qa-message.ai { background:#2b2d31; color:var(--text-primary,#e5e7eb); align-self:flex-start; }
.qa-source-link { display:inline-block; margin:4px 4px 0 0; padding:2px 8px; background:#4f545c; color:#fff; border-radius:4px; font-size:12px; cursor:pointer; }
.qa-source-link:hover { background:#5d626c; }
.qa-input-row { display:flex; gap:8px; padding:8px 4px; }
.qa-input-row textarea { flex:1; min-height:60px; resize:vertical; }

/* Manual nav buttons (sidebar) */
.manual-nav-btn {
  background: transparent;
  border: 1px solid var(--border, #4f545c);
  color: var(--text-primary, #dfe1e4);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  margin-right: 2px;
  transition: background 0.15s;
}
.manual-nav-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--text-muted, #6f747c);
}