:root {
  color-scheme: dark;
  --bg: #0d1117;
  --bg-2: #161b22;
  --bg-3: #21262d;
  --fg: #c9d1d9;
  --fg-muted: #8b949e;
  --accent: #58a6ff;
  --err: #f85149;
  --border: #30363d;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Pretendard", "Segoe UI", sans-serif;
  word-break: keep-all;
  overscroll-behavior: contain;
}
.hidden { display: none !important; }
.muted { color: var(--fg-muted); font-size: 13px; }
.err { color: var(--err); margin-top: 8px; }
.screen { width: 100%; height: 100%; }

#login {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; max-width: 360px; margin: 0 auto;
}
#login h1 { margin: 0; font-size: 28px; }
#login input, #login button {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--fg);
  font-size: 16px;
}
.btn-google {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--fg);
  font-size: 16px; text-align: center; text-decoration: none; cursor: pointer;
}
.btn-google:hover { background: var(--bg-3); }
button {
  cursor: pointer; background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
}
button:hover { background: var(--border); }

#app {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100vh;
  height: 100dvh;
}
/* Graph and chat panes coexist; the body class flips visibility. */
#graph-sidebar { display: none; }
#graph-main { display: none; }
body.graph-mode #sidebar { display: none; }
body.graph-mode #chat { display: none; }
body.graph-mode #graph-sidebar { display: flex; }
body.graph-mode #graph-main { display: flex; }

#sidebar {
  display: flex; flex-direction: column;
  background: var(--bg-2); border-right: 1px solid var(--border);
  overflow: hidden;
}
#sidebar header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  gap: 6px;
}
#me { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#sidebar header button { padding: 4px 8px; }

.sidebar-section { display: flex; flex-direction: column; min-height: 0; }
.sidebar-section + .sidebar-section { border-top: 1px solid var(--border); }
.sidebar-section-title {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 10px 14px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted);
}
.sidebar-section-title > span:first-child { flex: 1; min-width: 0; }
.sidebar-section-title button {
  padding: 0 6px; font-size: 14px; line-height: 1;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
}

#channels, #dms {
  list-style: none; margin: 0; padding: 4px 0 8px;
  overflow-y: auto; flex: 0 1 auto; min-height: 0;
}
/* Flex shrinks siblings in proportion to their content height, and
   .sidebar-section sets min-height:0 — so a long channel list squeezed the DM
   section down to its title (0 visible rows). Pin the DM section to its
   content and let the channel list absorb the shrink and scroll instead. The
   50% cap keeps the reverse case (many DMs, few channels) from doing the same
   thing to the channel list. */
.sidebar-section-dms { flex: 0 0 auto; max-height: 50%; }
#channels li, #dms li {
  padding: 6px 14px; cursor: pointer; user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
#channels li .ch-label, #dms li .ch-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
}
#channels li:hover, #dms li:hover { background: var(--bg-3); }
#channels li.active, #dms li.active {
  background: var(--bg-3); border-left: 3px solid var(--accent); padding-left: 11px;
}
#channels li.unread .ch-label, #dms li.unread .ch-label {
  font-weight: 700; color: var(--fg);
}
#channels li.archived .ch-label, #dms li.archived .ch-label {
  font-style: italic; color: var(--fg-muted);
}
.badge {
  background: var(--accent); color: #0d1117;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; line-height: 1.4;
}
.toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; text-transform: none; letter-spacing: 0;
  color: var(--fg-muted); cursor: pointer;
}
.toggle input { margin: 0; }

#dm-picker, #channel-create {
  border: 1px solid var(--border); background: var(--bg-2); color: var(--fg);
  border-radius: 8px; padding: 0; max-width: 360px; width: 90vw;
}
#dm-picker::backdrop, #channel-create::backdrop { background: rgba(0,0,0,0.5); }
#dm-picker form, #channel-create form { padding: 16px; }
#dm-picker h3, #channel-create h3 { margin: 0 0 12px; }
#dm-picker-list {
  list-style: none; margin: 0 0 12px; padding: 0;
  max-height: 50vh; overflow-y: auto;
}
#dm-picker-list li {
  padding: 8px 12px; cursor: pointer; border-radius: 4px;
}
#dm-picker-list li:hover { background: var(--bg-3); }
#dm-picker-list .empty { color: var(--fg-muted); cursor: default; }
#dm-picker menu, #channel-create menu {
  display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 0;
}
.dialog-field {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px;
  color: var(--fg-muted); font-size: 12px;
}
.dialog-field input {
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font: inherit;
}

#chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#chat-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-weight: 600; display: flex; align-items: center; gap: 10px;
}
#channel-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notify-mode {
  max-width: 96px; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--fg);
}
#chat-header .back {
  display: none;
  background: transparent; border: none; color: var(--fg);
  font-size: 20px; line-height: 1; padding: 4px 8px; margin-left: -4px;
  cursor: pointer;
}
#chat-header .back:hover { background: var(--bg-3); }
/* Mobile layout. Must follow the default #sidebar/#chat rules above so the
   responsive `display` override actually wins the cascade (equal specificity,
   later-rule-wins). */
@media (max-width: 640px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { display: flex; }
  #chat { display: none; }
  body.in-chat #sidebar { display: none; }
  body.in-chat #chat { display: flex; }
  #chat-header .back { display: inline-block; }

  /* Graph mode mobile: sidebar by default, main when discussion/list selected.
     `body.in-graph` mirrors `body.in-chat` for the graph pane. */
  body.graph-mode #graph-sidebar { display: flex; }
  body.graph-mode #graph-main { display: none; }
  body.graph-mode.in-graph #graph-sidebar { display: none; }
  body.graph-mode.in-graph #graph-main { display: flex; }
}

#messages {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.msg { padding: 8px 10px; border-radius: 6px; background: var(--bg-2); }
.msg .meta { font-size: 12px; color: var(--fg-muted); margin-bottom: 2px; }
.msg .body { white-space: pre-wrap; }
.msg.self { background: #1f2937; }
.mention-link {
  display: inline; padding: 0; border: 0; background: transparent;
  color: var(--accent); font: inherit; font-weight: 600;
}
.mention-link:hover { background: transparent; text-decoration: underline; }

#composer {
  position: relative; display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--border);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
#composer textarea {
  flex: 1; resize: none; min-height: 36px; padding: 8px 10px;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit;
}
#composer button { padding: 8px 14px; }
.mention-suggest {
  position: absolute; left: 12px; right: 78px; bottom: calc(100% + 6px);
  max-height: 220px; overflow-y: auto; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35); z-index: 10;
}
.mention-option {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 8px; border: 0; background: transparent;
  text-align: left; color: var(--fg);
}
.mention-option.active, .mention-option:hover { background: var(--bg-3); }
.mention-kind { color: var(--fg-muted); font-size: 11px; }
#mic-btn { font-size: 18px; padding: 4px 10px; background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
#mic-btn.recording { background: rgba(220,50,50,0.2); border-color: #dc3232; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.voice-att { display: block; margin-top: 6px; max-width: 280px; }

/* ─── graph view ─────────────────────────────────────────────────────────── */

#graph-sidebar {
  flex-direction: column;
  background: var(--bg-2); border-right: 1px solid var(--border);
  overflow: hidden;
}
#graph-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.graph-section-header {
  padding: 12px 16px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fg-muted);
}
.graph-empty { padding: 4px 16px; color: var(--fg-muted); font-size: 12px; }
.graph-kind-group { margin-top: 4px; }
.graph-kind-label {
  padding: 2px 16px; font-size: 10px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.graph-row {
  width: 100%; text-align: left;
  background: transparent; border: none; color: var(--fg);
  padding: 4px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font: inherit; border-radius: 0;
}
.graph-row:hover { background: rgba(255,255,255,0.05); }
.graph-row.active { background: rgba(255,255,255,0.1); }
.graph-row-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.graph-row-extra {
  font-size: 10px; color: var(--fg-muted);
}

#graph-main {
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.graph-placeholder, .graph-loading, .graph-error {
  padding: 16px; color: var(--fg-muted); font-size: 13px;
}
.graph-error { color: var(--err); }

.graph-page-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.graph-page-header-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.graph-page-header h1 {
  margin: 0; font-size: 17px; font-weight: 600;
}
.graph-page-topic {
  margin: 4px 0 0; color: var(--fg-muted); font-size: 12px;
}
.graph-pill {
  padding: 1px 6px; border-radius: 4px;
  background: var(--bg-3); color: var(--fg-muted);
  font-size: 11px;
}
.graph-pill-kind { background: var(--bg-3); color: var(--fg-muted); }
.graph-pill-ext {
  background: rgba(88,166,255,0.1);
  border: 1px solid rgba(88,166,255,0.2);
  color: var(--accent);
}
.graph-pill-tag {
  background: rgba(88,166,255,0.1);
  border: 1px solid rgba(88,166,255,0.2);
  color: var(--accent);
}
.graph-pill.status-resolved {
  background: rgba(16,185,129,0.1); color: #6ee7b7;
}
.graph-pill.status-abandoned {
  background: rgba(107,114,128,0.1); color: var(--fg-muted);
}
.graph-pill.status-resolving {
  background: rgba(245,158,11,0.1); color: #fcd34d;
}
.graph-pill.status-open, .graph-pill.status-active {
  background: rgba(59,130,246,0.1); color: #93c5fd;
}

.graph-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.graph-list-empty {
  color: var(--fg-muted); font-size: 12px; padding: 4px;
}
.graph-card {
  width: 100%; text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  font: inherit; color: var(--fg);
  transition: border-color 0.15s ease;
}
.graph-card:hover {
  border-color: rgba(88,166,255,0.4);
  background: var(--bg-2);
}
.graph-card-head {
  display: flex; align-items: baseline; gap: 8px;
}
.graph-card-type { color: var(--fg-muted); font-size: 11px; }
.graph-card-title {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg);
}
.graph-card-utts {
  color: var(--fg-muted); font-size: 11px; flex-shrink: 0;
}
.graph-card-meta {
  font-size: 11px; color: var(--fg-muted);
  display: flex; gap: 6px;
}

/* DiscussionView */
.graph-discussion-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 10px;
}
.graph-back-btn {
  background: transparent; border: none; color: var(--fg);
  font-size: 20px; line-height: 1; padding: 4px 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.graph-back-btn:hover { background: var(--bg-3); }
.graph-discussion-title-wrap { flex: 1; min-width: 0; }
.graph-discussion-title-wrap h2 {
  margin: 0; font-size: 16px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.graph-discussion-sub {
  margin-top: 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-muted);
}
.graph-discussion-by { color: var(--fg-muted); }
.graph-resolve-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  background: rgba(88,166,255,0.8); color: #000;
  border: none; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.graph-resolve-btn:hover:not(:disabled) { background: var(--accent); }
.graph-resolve-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.graph-discussion-tags {
  padding: 8px 16px;
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--border);
}
.graph-utterance-list {
  flex: 1;
  list-style: none; margin: 0; padding: 12px 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.graph-utterance {
  display: flex; gap: 12px; font-size: 14px;
}
.graph-utterance-author {
  flex-shrink: 0; width: 64px;
  color: var(--fg-muted); font-size: 12px; padding-top: 2px;
}
.graph-utterance-body {
  flex: 1;
  white-space: pre-wrap;
  color: var(--fg);
}
.graph-utterance-empty {
  color: var(--fg-muted); font-size: 12px;
}
.graph-summary {
  padding: 12px 16px;
  border-top: 1px solid rgba(88,166,255,0.2);
  background: rgba(88,166,255,0.05);
}
.graph-summary-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.graph-summary-ai { color: var(--fg-muted); text-transform: lowercase; }
.graph-summary-by { margin-left: auto; color: var(--fg-muted); text-transform: none; }
.graph-summary-body {
  margin: 6px 0 0; white-space: pre-wrap;
  color: var(--fg); font-size: 14px;
}
.graph-utterance-composer {
  display: flex; gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.graph-utterance-composer textarea {
  flex: 1; resize: none; min-height: 36px; padding: 8px 10px;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit;
}
.graph-utterance-composer button { padding: 8px 14px; }

/* Resolve modal */
#resolve-modal {
  border: 1px solid var(--border); background: var(--bg-2); color: var(--fg);
  border-radius: 8px; padding: 0; max-width: 600px; width: 90vw;
  max-height: 90vh;
}
#resolve-modal::backdrop { background: rgba(0,0,0,0.6); }
.resolve-modal-form { padding: 0; margin: 0; }
.resolve-modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.resolve-modal-header h3 { margin: 0; font-size: 14px; }
.resolve-modal-header button {
  background: transparent; border: none; color: var(--fg-muted);
  font-size: 16px; padding: 0; cursor: pointer;
}
.resolve-modal-body {
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; max-height: calc(90vh - 120px);
}
.resolve-field { display: flex; flex-direction: column; gap: 4px; }
.resolve-field > span, .resolve-field > legend {
  color: var(--fg-muted); font-size: 11px;
}
.resolve-field select, .resolve-field textarea {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
}
.resolve-field textarea { resize: vertical; }
.resolve-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.graph-tag-toggle {
  padding: 4px 10px; font-size: 12px;
  background: transparent; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.graph-tag-toggle.on {
  background: rgba(88,166,255,0.15);
  border-color: rgba(88,166,255,0.4);
  color: var(--accent);
}
.resolve-modal-actions {
  padding: 12px 16px; margin: 0;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
}
#resolve-confirm {
  background: rgba(88,166,255,0.8); color: #000;
  border: none; padding: 6px 14px; border-radius: 6px;
  font-weight: 500; cursor: pointer;
}
#resolve-confirm:hover:not(:disabled) { background: var(--accent); }
#resolve-confirm:disabled { opacity: 0.5; cursor: not-allowed; }