/* Phase 3 (bigtionax-memory-read-g-source-marker): 답변 끝 윗첨자 기억 아이콘 · hover 발췌 툴팁 ·
   클릭/터치/키보드 팝오버. index.html에서 chat-mention-reply-reaction.css 근처에 별도 시트로
   로드된다 — chat.css가 선언하는 "chat 캐스케이드 1~6/6" 고정 목록 밖의 독립 추가라 그 파일의
   헤더는 건드리지 않는다. var(--*) 토큰만 사용한다(raw hex·named color 금지, css-token-guard).
   .reaction-participant-popover(absolute, .chat-area 기준)와 .reaction-actors-popover(fixed,
   pointer-events:none) 두 선례의 포지셔닝 관례를 각각 팝오버/툴팁에 미러한다. */

.memory-source-marker-sup {
  margin-left: 2px;
  line-height: 1;
  vertical-align: super;
}

.memory-source-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}

.memory-source-marker:hover,
.memory-source-marker:focus-visible,
.memory-source-marker[aria-expanded="true"] {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

/* hover 발췌 미리보기 — 클릭 대상이 아니므로 pointer-events:none(reaction-actors-popover 미러). */
.memory-source-tooltip {
  position: fixed;
  z-index: 320;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}

.memory-source-tooltip[hidden] { display: none; }

.memory-source-popover {
  position: absolute;
  z-index: 61;
  min-width: 200px;
  max-width: min(300px, calc(100vw - 24px));
  /* 채팅 영역(.chat-area, position:relative 기준 블록)보다 커지지 않게 막고, 넘치는 몫은
     목록이 줄어들며 흡수한다(flex column + 목록 min-height:0). 모바일처럼 채팅 영역이 낮을 때도
     팝오버가 입력창 위로 새지 않는다. */
  max-height: calc(100% - 16px);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.memory-source-popover[hidden] { display: none; }

.memory-source-popover:focus-visible,
.memory-source-popover:focus {
  outline: none;
}

.memory-source-popover-title,
.memory-source-popover-state,
.memory-source-popover-note {
  flex-shrink: 0;
}

.memory-source-popover-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 발췌가 길거나 많을 때(예: 25개) 제목·안내문은 그대로 두고 목록만 세로 스크롤한다.
   상한은 chat.css의 .chat-search-panel min(42vh, 360px) 선례에 맞추되, 팝오버 안의 제목·안내문
   (~100px)을 더해도 모바일 채팅 영역에 들어가도록 50vh로 둔다. overscroll-behavior: contain은
   경계에서 휠이 #chatMessages로 이어져 그 scroll 리스너가 팝오버를 닫는 것을 막는다. */
.memory-source-popover-list {
  display: grid;
  gap: 6px;
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(50vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-sm);
}

.memory-source-popover-list:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.memory-source-popover-item {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}

.memory-source-popover-item.is-journal {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.memory-source-journal-link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  text-decoration: underline;
}

.memory-source-popover-item.unavailable {
  color: var(--text-muted);
}

.memory-source-popover-state {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.memory-source-popover-note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}