/* 1対1トーク (talk) view-specific styles. Every selector starts with #page-talk
   (SPEC: CSS の規律). */

#page-talk .talk-layout { display: flex; gap: 16px; align-items: flex-start; }

#page-talk .talk-roster { width: 240px; flex: none; }
#page-talk .talk-roster-head { display: flex; gap: 8px; margin-bottom: 8px; }
#page-talk .talk-roster-list { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
#page-talk .talk-roster-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }

#page-talk .talk-reader-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 8px; cursor: pointer;
}
#page-talk .talk-reader-row:hover { background: var(--tag-bg); }
#page-talk .talk-reader-row.active { background: var(--accent-secondary); color: #fff; }

#page-talk .talk-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--border-color); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex: none;
}
#page-talk .talk-reader-name { flex: 1; font-size: 13px; }
#page-talk .talk-unread-badge {
  background: var(--danger); color: #fff; font-size: 11px;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

#page-talk .talk-thread-card { flex: 1; }
#page-talk .talk-thread { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; margin-bottom: 12px; }
#page-talk .talk-thread-empty { color: var(--text-muted); font-size: 13px; }

#page-talk .talk-bubble { max-width: 70%; padding: 8px 12px; border-radius: 10px; }
#page-talk .talk-bubble-in { align-self: flex-start; background: var(--tag-bg); }
#page-talk .talk-bubble-out { align-self: flex-end; background: var(--accent-secondary); color: #fff; }
#page-talk .talk-bubble-body { font-size: 13px; white-space: pre-wrap; }
#page-talk .talk-bubble-meta { font-size: 11px; opacity: 0.7; margin-top: 4px; }